"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 } from "lucide-react";
import { useEmployeeApproveTask } from "../hooks/task.hooks";

interface ApproveTaskDialogProps {
  taskId: string;
  open: boolean;
  onClose: () => void;
}

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

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

  const handleApprove = () => {
    mutate({ taskId, payload: { remarks: remarks.trim() || undefined } });
  };

  return (
    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose(); }}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="text-base flex items-center gap-2">
            <CheckCircle2 className="h-4 w-4 text-green-600" />
            Approve Task
          </DialogTitle>
          <DialogDescription className="text-xs">
            This will mark your part as complete and send the task to your manager for approval.
          </DialogDescription>
        </DialogHeader>

        <Textarea
          placeholder="Remarks for manager (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" onClick={handleApprove} disabled={isPending}>
            {isPending ? "Approving..." : "Approve & Send to Manager"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}