"use client";

import * as React from "react";
import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Upload, FolderOpen, Loader2, X, FileText, AlertCircle } from "lucide-react";
import { toast } from "sonner";
import { useTranslation } from "@/i18n/client";
import { useFileUploadWithProgress } from "../hooks/use-file-upload-with-progress";
import { uploadFilesWithProgress, type UploadResult } from "../utils/upload-with-progress";
import { FileUploadProgressList } from "../components/file-upload-progress-list";

interface UploadFilesToDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  uploadId: string;
  drawingNo: string;
  revNo: string;
  userId: string;
  onUploadComplete?: () => void;
  lng: string;
}

export function UploadFilesToDetailDialog({
  open,
  onOpenChange,
  uploadId,
  drawingNo,
  revNo,
  userId,
  onUploadComplete,
  lng,
}: UploadFilesToDetailDialogProps) {
  const { t } = useTranslation(lng, "dolce");
  const [isUploading, setIsUploading] = useState(false);

  // 파일 업로드 훅 사용 (진행도 추적)
  const {
    fileProgresses,
    files: selectedFiles,
    removeFile,
    clearFiles,
    updateFileProgress,
    getRootProps,
    getInputProps,
    isDragActive,
  } = useFileUploadWithProgress();

  // 다이얼로그 닫을 때 초기화
  React.useEffect(() => {
    if (!open) {
      clearFiles();
    }
  }, [open, clearFiles]);

  // 업로드 처리
  const handleUpload = async () => {
    if (selectedFiles.length === 0) {
      toast.error(t("uploadFilesDialog.selectFilesError"));
      return;
    }

    setIsUploading(true);

    try {
      // 모든 파일 상태를 uploading으로 변경
      selectedFiles.forEach((_, index) => {
        updateFileProgress(index, 0, "uploading");
      });

      // 진행도 추적 업로드 호출
      const result: UploadResult = await uploadFilesWithProgress({
        uploadId,
        userId,
        files: selectedFiles,
        callbacks: {
          onProgress: (fileIndex, progress) => {
            updateFileProgress(fileIndex, progress, "uploading");
          },
          onFileComplete: (fileIndex) => {
            updateFileProgress(fileIndex, 100, "completed");
          },
          onFileError: (fileIndex, error) => {
            updateFileProgress(fileIndex, 0, "error", error);
          },
        },
      });

      if (result.success) {
        toast.success(t("uploadFilesDialog.uploadSuccess", { count: result.uploadedCount }));
        onOpenChange(false);
        onUploadComplete?.();
      } else {
        toast.error(result.error || t("uploadFilesDialog.uploadError"));
      }
    } catch (error) {
      console.error("업로드 실패:", error);
      toast.error(
        error instanceof Error ? error.message : t("uploadFilesDialog.uploadErrorMessage")
      );
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{t("uploadFilesDialog.title")}</DialogTitle>
          <DialogDescription>
            {t("uploadFilesDialog.description", { drawingNo, revNo })}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 안내 메시지 */}
          <Alert>
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>
              {t("uploadFilesDialog.alertMessage")}
            </AlertDescription>
          </Alert>

          {/* 파일 선택 영역 */}
          <div
            {...getRootProps()}
            className={`border-2 border-dashed rounded-lg p-8 transition-all duration-200 cursor-pointer ${
              isDragActive
                ? "border-primary bg-primary/5 scale-[1.02]"
                : "border-muted-foreground/30 hover:border-muted-foreground/50"
            }`}
          >
            <input {...getInputProps()} />
            <div className="flex flex-col items-center justify-center">
              <FolderOpen
                className={`h-12 w-12 mb-3 transition-colors ${
                  isDragActive ? "text-primary" : "text-muted-foreground"
                }`}
              />
              <p
                className={`text-sm transition-colors ${
                  isDragActive
                    ? "text-primary font-medium"
                    : "text-muted-foreground"
                }`}
              >
                {isDragActive
                  ? t("uploadFilesDialog.dropHereText")
                  : t("uploadFilesDialog.dragDropText")}
              </p>
              <p className="text-xs text-muted-foreground mt-1">
                {t("uploadFilesDialog.fileInfo")}
              </p>
            </div>
          </div>

          {/* 선택된 파일 목록 */}
          {selectedFiles.length > 0 && (
            <div className="border rounded-lg p-4">
              {isUploading ? (
                // 업로드 중: 진행도 표시
                <FileUploadProgressList fileProgresses={fileProgresses} />
              ) : (
                // 대기 중: 삭제 버튼 표시
                <>
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="text-sm font-medium">
                      {t("uploadFilesDialog.selectedFiles", { count: selectedFiles.length })}
                    </h4>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={clearFiles}
                    >
                      {t("uploadFilesDialog.removeAll")}
                    </Button>
                  </div>
                  <div className="max-h-60 overflow-y-auto space-y-2">
                    {selectedFiles.map((file, index) => (
                      <div
                        key={index}
                        className="flex items-center justify-between p-2 rounded bg-muted/50"
                      >
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                          <FileText className="h-4 w-4 text-muted-foreground shrink-0" />
                          <div className="flex-1 min-w-0">
                            <p className="text-sm truncate">{file.name}</p>
                            <p className="text-xs text-muted-foreground">
                              {(file.size / 1024 / 1024).toFixed(2)} MB
                            </p>
                          </div>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => removeFile(index)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                </>
              )}
            </div>
          )}
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
            disabled={isUploading}
          >
            {t("uploadFilesDialog.cancelButton")}
          </Button>
          <Button
            onClick={handleUpload}
            disabled={selectedFiles.length === 0 || isUploading}
          >
            {isUploading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {t("uploadFilesDialog.uploadingButton")}
              </>
            ) : (
              <>
                <Upload className="mr-2 h-4 w-4" />
                {t("uploadFilesDialog.uploadButton", { count: selectedFiles.length })}
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}