"use client";

import { FileText, CheckCircle2, XCircle, Loader2 } from "lucide-react";
import { Progress } from "@/components/ui/progress";
import { FileUploadProgress } from "../hooks/use-file-upload-with-progress";

interface FileUploadProgressListProps {
  fileProgresses: FileUploadProgress[];
}

export function FileUploadProgressList({ fileProgresses }: FileUploadProgressListProps) {
  if (fileProgresses.length === 0) {
    return null;
  }

  return (
    <div className="space-y-3">
      <h4 className="text-sm font-medium">
        파일 업로드 진행 상황 ({fileProgresses.length}개)
      </h4>
      <div className="max-h-64 overflow-y-auto space-y-2">
        {fileProgresses.map((fileProgress, index) => (
          <FileUploadProgressItem key={index} fileProgress={fileProgress} />
        ))}
      </div>
    </div>
  );
}

interface FileUploadProgressItemProps {
  fileProgress: FileUploadProgress;
}

function FileUploadProgressItem({ fileProgress }: FileUploadProgressItemProps) {
  const { file, progress, status, error } = fileProgress;

  const getStatusIcon = () => {
    switch (status) {
      case "completed":
        return <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />;
      case "error":
        return <XCircle className="h-4 w-4 text-red-600 shrink-0" />;
      case "uploading":
        return <Loader2 className="h-4 w-4 text-primary shrink-0 animate-spin" />;
      default:
        return <FileText className="h-4 w-4 text-muted-foreground shrink-0" />;
    }
  };

  const getStatusColor = () => {
    switch (status) {
      case "completed":
        return "border-green-200 bg-green-50/50";
      case "error":
        return "border-red-200 bg-red-50/50";
      case "uploading":
        return "border-primary/30 bg-primary/5";
      default:
        return "border-muted bg-muted/30";
    }
  };

  return (
    <div className={`border rounded-lg p-3 space-y-2 ${getStatusColor()}`}>
      <div className="flex items-center gap-2">
        {getStatusIcon()}
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium truncate">{file.name}</p>
          <p className="text-xs text-muted-foreground">
            {(file.size / 1024 / 1024).toFixed(2)} MB
          </p>
        </div>
        {status !== "pending" && (
          <div className="text-sm font-medium">
            {status === "completed" ? (
              <span className="text-green-600">완료</span>
            ) : status === "error" ? (
              <span className="text-red-600">실패</span>
            ) : (
              <span className="text-primary">{Math.round(progress)}%</span>
            )}
          </div>
        )}
      </div>

      {/* Progress Bar */}
      {status === "uploading" && (
        <>
          <Progress value={progress} className="h-1.5" />
          {/* 90% 이상일 때 추가 안내 메시지 */}
          {progress >= 90 && progress < 100 && (
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              <Loader2 className="h-3 w-3 animate-spin" />
              서버에서 DOLCE API로 전송 중...
            </p>
          )}
        </>
      )}

      {/* 에러 메시지 */}
      {status === "error" && error && (
        <p className="text-xs text-red-600">{error}</p>
      )}
    </div>
  );
}