"use client";

/**
 * 저장 확인 다이얼로그
 * 
 * 경고가 있을 때 저장 전 확인을 받습니다
 */

import { memo } from "react";
import { AlertTriangle, AlertCircle, Info } from "lucide-react";
import type { FlowValidation } from "@/lib/utils/flowValidation";
import { summarizeValidations } from "@/lib/utils/flowValidation";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";

interface SaveConfirmDialogProps {
  open: boolean;
  validations: FlowValidation[];
  onConfirm: () => void;
  onCancel: () => void;
}

export const SaveConfirmDialog = memo(
  ({ open, validations, onConfirm, onCancel }: SaveConfirmDialogProps) => {
    const summary = summarizeValidations(validations);

    // 오류가 있으면 저장 불가
    if (summary.hasBlockingIssues) {
      return (
        <Dialog open={open} onOpenChange={onCancel}>
          <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
                <AlertCircle className="h-5 w-5 text-red-500" />
                저장할 수 없습니다
              </DialogTitle>
              <DialogDescription className="text-xs sm:text-sm">
                오류를 수정한 후 다시 시도하세요
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <Badge variant="destructive" className="gap-1">
                  <AlertCircle className="h-3 w-3" />
                  오류 {summary.errorCount}
                </Badge>
                {summary.warningCount > 0 && (
                  <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
                    <AlertTriangle className="h-3 w-3" />
                    경고 {summary.warningCount}
                  </Badge>
                )}
              </div>

              <ScrollArea className="max-h-[300px]">
                <div className="space-y-2">
                  {validations
                    .filter((v) => v.severity === "error")
                    .map((validation, index) => (
                      <div
                        key={index}
                        className="rounded-lg border-2 border-red-200 bg-red-50 p-3"
                      >
                        <div className="mb-1 text-xs font-medium text-red-600">
                          {validation.type}
                        </div>
                        <div className="text-sm text-red-800">
                          {validation.message}
                        </div>
                      </div>
                    ))}
                </div>
              </ScrollArea>

              <p className="text-xs text-gray-500">
                위의 오류를 먼저 해결해주세요. 경고는 저장 후에도 확인할 수
                있습니다.
              </p>
            </div>

            <DialogFooter className="gap-2 sm:gap-0">
              <Button
                onClick={onCancel}
                className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
              >
                확인
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      );
    }

    // 경고만 있는 경우 - 저장 가능하지만 확인 필요
    return (
      <Dialog open={open} onOpenChange={onCancel}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
              <AlertTriangle className="h-5 w-5 text-yellow-500" />
              경고가 있습니다
            </DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              플로우에 {summary.warningCount + summary.infoCount}개의 경고가
              발견되었습니다
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            <div className="flex items-center gap-2">
              {summary.warningCount > 0 && (
                <Badge className="gap-1 bg-yellow-500 hover:bg-yellow-600">
                  <AlertTriangle className="h-3 w-3" />
                  경고 {summary.warningCount}
                </Badge>
              )}
              {summary.infoCount > 0 && (
                <Badge variant="secondary" className="gap-1">
                  <Info className="h-3 w-3" />
                  정보 {summary.infoCount}
                </Badge>
              )}
            </div>

            <ScrollArea className="max-h-[300px]">
              <div className="space-y-2">
                {validations
                  .filter((v) => v.severity === "warning")
                  .map((validation, index) => (
                    <div
                      key={index}
                      className="rounded-lg border-2 border-yellow-200 bg-yellow-50 p-3"
                    >
                      <div className="mb-1 text-xs font-medium text-yellow-600">
                        {validation.type}
                      </div>
                      <div className="text-sm text-yellow-800">
                        {validation.message}
                      </div>
                    </div>
                  ))}
                {validations
                  .filter((v) => v.severity === "info")
                  .map((validation, index) => (
                    <div
                      key={index}
                      className="rounded-lg border-2 border-blue-200 bg-blue-50 p-3"
                    >
                      <div className="mb-1 text-xs font-medium text-blue-600">
                        {validation.type}
                      </div>
                      <div className="text-sm text-blue-800">
                        {validation.message}
                      </div>
                    </div>
                  ))}
              </div>
            </ScrollArea>

            <div className="rounded-lg bg-gray-50 p-3">
              <p className="text-xs text-gray-600">
                ⚠️ 이 경고들은 플로우의 동작에 영향을 줄 수 있습니다.
                <br />
                그래도 저장하시겠습니까?
              </p>
            </div>
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={onCancel}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              onClick={onConfirm}
              className="h-8 flex-1 bg-yellow-500 text-xs hover:bg-yellow-600 sm:h-10 sm:flex-none sm:text-sm"
            >
              경고 무시하고 저장
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }
);

SaveConfirmDialog.displayName = "SaveConfirmDialog";