"use client";

import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";

interface ApplicationReasonDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (reason: string) => void;
  vendorCount: number;
  attachmentCount: number;
}

/**
 * 암호화해제 신청 사유 입력 다이얼로그
 * 
 * RFQ 발송 시 첨부파일이 있는 경우, 결재 미리보기 전에
 * 사용자가 신청 사유를 입력하도록 하는 다이얼로그
 */
export function ApplicationReasonDialog({
  open,
  onOpenChange,
  onConfirm,
  vendorCount,
  attachmentCount,
}: ApplicationReasonDialogProps) {
  const [reason, setReason] = React.useState("");

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

  const handleConfirm = () => {
    if (!reason.trim()) {
      return;
    }
    onConfirm(reason);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>암호화해제 신청 사유</DialogTitle>
          <DialogDescription>
            첨부파일이 사외업체에 송부되므로 신청 사유를 입력해주세요.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* 발송 정보 요약 */}
          <div className="rounded-lg border bg-muted/50 p-4 space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">발송 대상</span>
              <span className="font-medium">{vendorCount}개 업체</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-muted-foreground">첨부파일</span>
              <span className="font-medium">{attachmentCount}개</span>
            </div>
          </div>

          {/* 신청 사유 입력 */}
          <div className="space-y-2">
            <Label htmlFor="reason">
              신청 사유 <span className="text-red-500">*</span>
            </Label>
            <Textarea
              id="reason"
              placeholder="예) RFQ 발송을 위한 기술 도면 전달&#10;예) 견적 요청을 위한 사양서 공유"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              rows={5}
              className="resize-none"
            />
            <p className="text-xs text-muted-foreground">
              신청 사유는 결재 문서에 포함됩니다.
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={() => onOpenChange(false)}
          >
            취소
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={!reason.trim()}
          >
            다음 단계로
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}