import SearchableSelect from "@/components/ui/SearchableSelect";
import Modal from "./Model";
import { useState } from "react";

interface BankModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess?: () => void;
}

export default function BankModal({ isOpen, onClose, onSuccess }: BankModalProps) {
  const [currency, setCurrency] = useState<{ label: string; value: string } | null>(null);
  const [bankName, setBankName] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    const name = bankName.trim();
    if (!name) {
      setError("Bank name is required.");
      return;
    }
    setError(null);
    setIsSaving(true);
    try {
      const response = await fetch("/api/banks/create", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          bank_name: name,
          ...(currency?.value != null && currency.value !== "" && {
            r_currency: Number(currency.value),
          }),
        }),
      });
      const result = await response.json();
      const isSuccess = result?.success === true || result?.status === "success";

      if (isSuccess) {
        setBankName("");
        setCurrency(null);
        onSuccess?.();
        onClose();
      } else {
        const message =
          typeof result?.message === "string"
            ? result.message
            : "Failed to save bank.";
        setError(message);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save bank.");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      title="Add Bank"
      onClose={onClose}
      footer={
        <>
          <button
            onClick={onClose}
            disabled={isSaving}
            className="rounded-md border px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            onClick={handleSave}
            disabled={isSaving}
            className="rounded-md bg-[#428B4D] px-4 py-2 text-sm font-medium text-white hover:bg-[#35703E] transition disabled:opacity-50"
          >
            {isSaving ? "Saving..." : "Save"}
          </button>
        </>
      }
    >
      <div className="space-y-4">
        {error && (
          <p className="text-sm text-red-600" role="alert">
            {error}
          </p>
        )}
        <SearchableSelect
          label="Currency (if different)"
          apiUrl="/api/searchabledropdown/currencylist"
          value={currency}
          onChange={setCurrency}
          placeholder="Select currency..."
        />
        <div>
          <label className="mb-1 block text-sm font-medium text-gray-700">
            Bank name
          </label>
          <input
            type="text"
            placeholder="Enter bank name"
            value={bankName}
            onChange={(e) => setBankName(e.target.value)}
            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm
                       focus:border-[#428B4D] focus:outline-none focus:ring-2 focus:ring-[#428B4D]/20"
          />
        </div>
      </div>
    </Modal>
  );
}