"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { CheckCircle2, XCircle } from "lucide-react";
import { useClientDecideTask } from "../hook/task.hook";


interface ClientDecideDialogProps {
  taskId: string;
  decision: "APPROVED" | "REJECTED";
  open: boolean;
  onClose: () => void;
}

export function ClientDecideDialog({
  taskId,
  decision,
  open,
  onClose,
}: ClientDecideDialogProps) {
  const [remarks, setRemarks] = useState("");

  const { mutate, isPending } = useClientDecideTask(() => {
    onClose();
    setRemarks("");
  });

  const handleSubmit = () => {
    mutate({ taskId, body: { status: decision, remarks: remarks.trim() || undefined } });
  };

  const isApprove = decision === "APPROVED";

  return (
    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="text-base flex items-center gap-2">
            {isApprove
              ? <CheckCircle2 className="h-4 w-4 text-green-600" />
              : <XCircle className="h-4 w-4 text-red-600" />}
            {isApprove ? "Approve Task" : "Reject Task"}
          </DialogTitle>
          <DialogDescription className="text-xs">
            {isApprove
              ? "This will approve the task and move it to filing."
              : "This will reject the task and send it back for rework."}
          </DialogDescription>
        </DialogHeader>

        <Textarea
          placeholder="Remarks (optional)"
          value={remarks}
          onChange={(e) => setRemarks(e.target.value)}
          className="text-xs resize-none h-20"
        />

        <DialogFooter className="gap-2 sm:gap-2">
          <Button variant="outline" size="sm" onClick={onClose} disabled={isPending}>
            Cancel
          </Button>
          <Button
            size="sm"
            variant={isApprove ? "default" : "destructive"}
            onClick={handleSubmit}
            disabled={isPending}
          >
            {isPending ? "Submitting..." : isApprove ? "Approve" : "Reject"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}