import { useState } from "react";
import { Pencil, Trash2 } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/shared/common/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
} from "@/shared/common/ui/alert-dialog";
import { Button } from "@/shared/common/ui/button";
import { useRecordTags } from "@/user-management/hooks/useRecordTags";
import { RecordTag } from "@/user-management/dto/recordTags/recordTags.type";
import { RecordTagForm } from "./RecordTagForm";
import { toast } from "sonner";
import { useTranslation } from "react-i18next";
import { useErrorHandler } from "@/shared/hooks/useErrorHandler";

interface Props {
  row: RecordTag;
  unitId: string;
}

export default function RecordTagActionsCell({ row, unitId }: Props) {
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false); // confirmation dialog
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);

  const { deleteRecordTag, refetchRecordTagsList } = useRecordTags({ unitId });
  const { t } = useTranslation();
  const { handleError } = useErrorHandler(t);

  // --- Handle Delete ---
  const confirmDelete = () => {
    setIsDeleteLoading(true);
    deleteRecordTag(row.id, {
      onSuccess: () => {
        refetchRecordTagsList();
        setIsDeleteOpen(false);
      },
      onError: (error) => {
        handleError(error);
      },
      onSettled: () => {
        setIsDeleteLoading(false);
      },
    });
  };

  return (
    <>
      <div className="flex items-center gap-2">
        {/* Edit Button */}
        <Button variant="outline" size="sm" onClick={() => setIsEditOpen(true)}>
          <Pencil className="h-4 w-4" />
        </Button>

        {/* Delete Button (opens confirm) */}
        <Button
          variant="destructive"
          size="sm"
          onClick={() => setIsDeleteOpen(true)}>
          <Trash2 className="h-4 w-4" />
        </Button>
      </div>

      {/* Edit Dialog */}
      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Record Tag</DialogTitle>
          </DialogHeader>
          <RecordTagForm
            unitId={unitId}
            mode="edit"
            id={row.id}
            defaultValues={{
              nameAm: row.name?.am ?? "",
              nameEn: row.name?.en ?? "",
              key: row.key,
              unitId: row.unitId,
            }}
            onSuccess={() => {
              setIsEditOpen(false);
              refetchRecordTagsList();
            }}
          />
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation */}
      <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              Are you sure you want to delete this record tag?
            </AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. The record tag <b>{row.name?.en}</b>{" "}
              will be permanently removed.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleteLoading}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              disabled={isDeleteLoading}
              className="bg-red-600 hover:bg-red-700">
              {isDeleteLoading ? "Deleting..." : "Delete"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
