"use client";

import { useState } from "react";
import Modal from "@/components/Modal";
import { useTranslations } from "next-intl";
import { toast } from "react-hot-toast";

interface RemoveTherapistModalProps {
  isOpen: boolean;
  onClose: () => void;
  therapistName?: string;
  therapistId?: string;
  onRemove?: () => void;
}

export default function RemoveTherapistModal({
  isOpen,
  onClose,
  therapistName,
  therapistId,
  onRemove
}: RemoveTherapistModalProps) {
  const t = useTranslations("practitioner");
  const [isLoading, setIsLoading] = useState(false);

  const handleRemove = async () => {
    setIsLoading(true);
    try {
      // TODO: Replace with actual API call when backend is ready
      // await deleteTherapist({ uuid: therapistId });

      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));

      toast.success(t("modals.removeTherapist.successMessage"));

      if (onRemove) {
        onRemove();
      }
      onClose();
    } catch (error: any) {
      const errorMessage = error?.response?.data?.message || t("modals.removeTherapist.errorMessage");
      toast.error(errorMessage);
    } finally {
      setIsLoading(false);
    }
  };

  const WarningIcon = () => (
    <svg className="w-16 h-16 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="px-2 py-4">
        {/* Warning Icon */}
        <div className="flex justify-center mb-6">
          <div className="w-20 h-20 rounded-full bg-red-50 flex items-center justify-center">
            <WarningIcon />
          </div>
        </div>

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

        {/* Message */}
        <p className="text-gray-600 text-center mb-8">
          {t("modals.removeTherapist.message")}
          {therapistName && (
            <span className="block mt-2 font-semibold text-gray-900">
              {therapistName}
            </span>
          )}
        </p>

        {/* Warning Text */}
        <p className="text-sm text-gray-500 text-center mb-4">
          {t("modals.removeTherapist.warning")}
        </p>

        <div className="mb-6 p-3 bg-amber-50 border border-amber-200 rounded-lg">
          <p className="text-sm text-amber-800 text-center">
            <strong>Coming soon:</strong> This feature is currently in development. Removal will not be persisted.
          </p>
        </div>

        {/* Buttons */}
        <div className="flex justify-center gap-4">
          <button
            type="button"
            onClick={onClose}
            disabled={isLoading}
            className="px-10 py-3.5 text-base font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:bg-gray-50 transition cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {t("modals.removeTherapist.cancel")}
          </button>
          <button
            type="button"
            onClick={handleRemove}
            disabled={isLoading}
            className="px-10 py-3.5 text-base 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"
          >
            {isLoading ? (
              <span className="flex items-center gap-2">
                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                  <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" />
                </svg>
                {t("modals.removeTherapist.removing")}
              </span>
            ) : (
              t("modals.removeTherapist.remove")
            )}
          </button>
        </div>
      </div>
    </Modal>
  );
}