"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { useState } from "react";
import { toast } from "sonner";

interface SkipReasonDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  onConfirm: (reason: string) => Promise<void>;
  loading: boolean;
}

export function SkipReasonDialog({
  open,
  onOpenChange,
  title,
  description,
  onConfirm,
  loading,
}: SkipReasonDialogProps) {
  const [reason, setReason] = useState("");

  const handleConfirm = async () => {
    if (!reason.trim()) {
      toast.error("Skip 사유를 입력해주세요.");
      return;
    }

    try {
      await onConfirm(reason.trim());
      setReason(""); // 성공 시 초기화
      onOpenChange(false);
    } catch (error) {
      // 에러는 상위 컴포넌트에서 처리
    }
  };

  const handleCancel = () => {
    setReason("");
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        
        <div className="space-y-4">
          <p className="text-sm text-muted-foreground">
            {description}
          </p>
          
          <div className="space-y-2">
            <Label htmlFor="reason">Skip 사유</Label>
            <Textarea
              id="reason"
              placeholder="Skip 사유를 입력해주세요..."
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              rows={4}
              disabled={loading}
            />
          </div>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            onClick={handleCancel}
            disabled={loading}
          >
            취소
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={loading || !reason.trim()}
          >
            {loading ? "처리 중..." : "확인"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}