import { UserTablo } from "@xtablo/shared/types/tablos.types";
import { useTranslation } from "react-i18next";
import { ClickOutside } from "./ClickOutside";

interface DeleteTabloModalProps {
  tablo: UserTablo | null;
  onClose: () => void;
  onConfirm: (tabloId: string) => void;
  isDeleting: boolean;
}

export const DeleteTabloModal = ({
  tablo,
  onClose,
  onConfirm,
  isDeleting,
}: DeleteTabloModalProps) => {
  const { t } = useTranslation("components");

  if (!tablo) return null;

  const handleConfirm = () => {
    onConfirm(tablo.id);
  };

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
      <ClickOutside onClickOutside={onClose}>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
          {/* Header */}
          <div className="flex items-center mb-4">
            <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mr-4">
              <svg
                className="w-6 h-6 text-red-600 dark:text-red-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                ></path>
              </svg>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {t("deleteTabloModal.title")}
              </h3>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {t("deleteTabloModal.subtitle")}
              </p>
            </div>
          </div>

          {/* Content */}
          <div className="mb-6">
            <p className="text-gray-700 dark:text-gray-300 mb-3">
              {t("deleteTabloModal.confirmQuestion")}{" "}
              <span className="font-semibold text-gray-900 dark:text-white">
                &ldquo;{tablo.name}&rdquo;
              </span>{" "}
              ?
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {t("deleteTabloModal.warning")}
            </p>
          </div>

          {/* Actions */}
          <div className="flex justify-end space-x-3">
            <button
              type="button"
              className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
              onClick={onClose}
              disabled={isDeleting}
            >
              {t("deleteTabloModal.buttons.cancel")}
            </button>
            <button
              type="button"
              className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              onClick={handleConfirm}
              disabled={isDeleting}
            >
              {isDeleting && (
                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  ></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              )}
              {isDeleting
                ? t("deleteTabloModal.buttons.deleting")
                : t("deleteTabloModal.buttons.delete")}
            </button>
          </div>
        </div>
      </ClickOutside>
    </div>
  );
};
