"use client";

import Modal from "@/components/Modal";
import { useTranslations } from "next-intl";
import { useClientsControllerRemoveV1 } from "@/api/user/practitioner-clients/practitioner-clients";
import { toast } from "react-hot-toast";
import { useQueryClient } from "@tanstack/react-query";
import { getClientsControllerFindAllV1QueryKey } from "@/api/user/practitioner-clients/practitioner-clients";

interface ClientData {
  id: number;
  name: string;
}

interface DeleteClientModalProps {
  isOpen: boolean;
  onClose: () => void;
  client: ClientData | null;
  onSuccess?: () => void;
}

export default function DeleteClientModal({
  isOpen,
  onClose,
  client,
  onSuccess
}: DeleteClientModalProps) {
  const t = useTranslations("practitioner");
  const queryClient = useQueryClient();

  const { mutate: deleteClient, isPending } = useClientsControllerRemoveV1({
    mutation: {
      onSuccess: () => {
        toast.success(t("modals.deleteClient.successMessage"));
        // Invalidate clients query to refresh the list
        queryClient.invalidateQueries({ queryKey: getClientsControllerFindAllV1QueryKey() });
        onClose();
        if (onSuccess) {
          onSuccess();
        }
      },
      onError: (error: any) => {
        const errorMessage = error?.response?.data?.message || t("modals.deleteClient.errorMessage");
        toast.error(errorMessage);
      },
    },
  });

  const handleDelete = () => {
    if (!client) return;
    deleteClient({ id: client.id });
  };

  const WarningIcon = () => (
    <svg className="w-12 h-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
    </svg>
  );

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="md">
      <div className="p-6 text-center">
        {/* Warning Icon */}
        <div className="flex justify-center mb-4">
          <div className="p-3 bg-red-50 rounded-full">
            <WarningIcon />
          </div>
        </div>

        {/* Title */}
        <h2 className="text-xl font-bold text-gray-900 mb-2">
          {t("modals.deleteClient.title")}
        </h2>

        {/* Description */}
        <p className="text-gray-500 mb-6">
          {t("modals.deleteClient.description")}{" "}
          <span className="font-semibold text-gray-700">{client?.name}</span>
          {t("modals.deleteClient.descriptionSuffix")}
        </p>

        {/* Buttons */}
        <div className="flex justify-center gap-3">
          <button
            type="button"
            onClick={onClose}
            disabled={isPending}
            className="px-8 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:bg-gray-50 transition cursor-pointer disabled:opacity-50"
          >
            {t("modals.deleteClient.cancel")}
          </button>
          <button
            type="button"
            onClick={handleDelete}
            disabled={isPending}
            className="px-8 py-3 text-sm font-medium text-white bg-red-500 rounded-full hover:bg-red-600 transition focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
          >
            {isPending ? (
              <div className="flex items-center gap-2">
                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                {t("modals.deleteClient.deleting")}
              </div>
            ) : (
              t("modals.deleteClient.delete")
            )}
          </button>
        </div>
      </div>
    </Modal>
  );
}