'use client';

/**
 * 작업 완료 결과 다이얼로그
 *
 * 스크린샷 기준:
 * - ✅ 작업이 완료되었습니다
 * - 🔲 제품검사LOT: KD-SA-251223-01
 * - ✅ 제품검사(FQC)가 자동 생성되었습니다.
 * - [품질관리 > 제품검사]에서 검사를 진행하세요.
 */

import { CheckSquare, Square } from 'lucide-react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';

interface WorkCompletionResultDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  lotNo: string;
  onConfirm: () => void;
}

export function WorkCompletionResultDialog({
  open,
  onOpenChange,
  lotNo,
  onConfirm,
}: WorkCompletionResultDialogProps) {
  const handleConfirm = () => {
    onConfirm();
    onOpenChange(false);
  };

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="bg-zinc-900 text-white border-zinc-700">
        <AlertDialogHeader>
          <AlertDialogTitle className="sr-only">작업 완료</AlertDialogTitle>
          <AlertDialogDescription asChild>
            <div className="space-y-3 text-white">
              {/* ✅ 작업이 완료되었습니다 */}
              <div className="flex items-center gap-2">
                <CheckSquare className="h-5 w-5 text-green-500 fill-green-500" />
                <span className="text-base">작업이 완료되었습니다.</span>
              </div>

              {/* 🔲 제품검사LOT */}
              <div className="flex items-center gap-2">
                <Square className="h-5 w-5 text-zinc-500" />
                <span className="text-base text-zinc-400">제품검사LOT: {lotNo}</span>
              </div>

              {/* ✅ 제품검사(FQC)가 자동 생성되었습니다 */}
              <div className="flex items-center gap-2">
                <CheckSquare className="h-5 w-5 text-green-500 fill-green-500" />
                <span className="text-base">제품검사(FQC)가 자동 생성되었습니다.</span>
              </div>

              {/* 안내 메시지 */}
              <p className="text-sm text-zinc-400 pl-7">
                [품질관리 &gt; 제품검사]에서 검사를 진행하세요.
              </p>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="flex justify-center sm:justify-center">
          <AlertDialogAction
            onClick={handleConfirm}
            className="bg-pink-200 hover:bg-pink-300 text-zinc-900 font-medium px-8"
          >
            확인
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}