"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { CheckCircle2, XCircle, FileText } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";

interface UploadResult {
  fileName: string;
  success: boolean;
  error?: string;
}

interface SwpUploadResultDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  results: UploadResult[];
}

export function SwpUploadResultDialog({
  open,
  onOpenChange,
  results,
}: SwpUploadResultDialogProps) {
  const successCount = results.filter((r) => r.success).length;
  const failCount = results.filter((r) => !r.success).length;
  const totalCount = results.length;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle>파일 업로드 결과</DialogTitle>
          <DialogDescription>
            총 {totalCount}개 파일 중 성공 {successCount}개, 실패 {failCount}개
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className="max-h-[500px] pr-4">
          <div className="space-y-3">
            {results.map((result, index) => (
              <div
                key={index}
                className={`flex items-start gap-3 p-4 rounded-lg border ${
                  result.success
                    ? "bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800"
                    : "bg-red-50 border-red-200 dark:bg-red-950 dark:border-red-800"
                }`}
              >
                <div className="flex-shrink-0 mt-0.5">
                  {result.success ? (
                    <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
                  ) : (
                    <XCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
                  )}
                </div>

                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                    <span className="font-medium text-sm break-all">
                      {result.fileName}
                    </span>
                  </div>

                  {result.success ? (
                    <p className="text-sm text-green-700 dark:text-green-300">
                      업로드 성공
                    </p>
                  ) : (
                    <div className="space-y-1">
                      <p className="text-sm font-medium text-red-700 dark:text-red-300">
                        업로드 실패
                      </p>
                      {result.error && (
                        <p className="text-sm text-red-600 dark:text-red-400 break-words">
                          사유: {result.error}
                        </p>
                      )}
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>

        <div className="flex justify-between items-center pt-4 border-t">
          <div className="text-sm text-muted-foreground">
            {failCount > 0 && (
              <span className="text-red-600 dark:text-red-400 font-medium">
                실패한 파일을 확인하고 다시 업로드해주세요.
              </span>
            )}
          </div>
          <Button onClick={() => onOpenChange(false)}>확인</Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}