"use client";

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { apiPost } from "@/utils/api-client";
import type { OcrBank } from "@/types/ocr";

const CURRENCIES = ["USD", "EUR", "GBP", "CHF", "JPY"];

interface CreateBankDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  customerId: number;
  defaultBankName?: string;
  defaultAccountNumber?: string;
  defaultCurrency?: string;
  onBankCreated: (bank: OcrBank) => void;
}

export function CreateBankDialog({
  open,
  onOpenChange,
  customerId,
  defaultBankName = "",
  defaultAccountNumber = "",
  defaultCurrency = "USD",
  onBankCreated,
}: CreateBankDialogProps) {
  const [bankName, setBankName] = useState(defaultBankName);
  const [accountNumber, setAccountNumber] = useState(defaultAccountNumber);
  const [currency, setCurrency] = useState(defaultCurrency);
  const [isCreating, setIsCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Sync state when dialog opens with new defaults
  useEffect(() => {
    if (open) {
      setBankName(defaultBankName);
      setAccountNumber(defaultAccountNumber);
      setCurrency(defaultCurrency);
      setError(null);
    }
  }, [open, defaultBankName, defaultAccountNumber, defaultCurrency]);

  const handleCreate = async () => {
    if (!bankName.trim() || !accountNumber.trim() || !currency) {
      setError("All fields are required.");
      return;
    }

    setIsCreating(true);
    setError(null);

    try {
      const response = await apiPost<{
        status: string;
        bank: OcrBank;
        message?: string;
      }>("/api/ocr/create-bank", {
        customer_id: customerId,
        bank_name: bankName.trim(),
        account_number: accountNumber.trim(),
        reporting_currency: currency,
        status: "Active",
      });

      if (response.status === "success" && response.bank) {
        onBankCreated(response.bank);
        setBankName("");
        setAccountNumber("");
        setCurrency("USD");
        onOpenChange(false);
      } else {
        setError(response.message || "Failed to create bank.");
      }
    } catch (err) {
      console.error("Create bank error:", err);
      setError(
        err instanceof Error ? err.message : "Failed to create bank."
      );
    } finally {
      setIsCreating(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md bg-white text-gray-900">
        <DialogHeader>
          <DialogTitle>Create New Bank</DialogTitle>
        </DialogHeader>

        <div className="space-y-4 py-2">
          {error && (
            <div className="text-sm text-red-600 bg-red-50 px-3 py-2 rounded">
              {error}
            </div>
          )}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Bank Name <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={bankName}
              onChange={(e) => setBankName(e.target.value)}
              className="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter bank name"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Account / Portfolio Number <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              value={accountNumber}
              onChange={(e) => setAccountNumber(e.target.value)}
              className="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter account number"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Reporting Currency <span className="text-red-500">*</span>
            </label>
            <select
              value={currency}
              onChange={(e) => setCurrency(e.target.value)}
              className="w-full px-3 py-2 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {CURRENCIES.map((c) => (
                <option key={c} value={c}>
                  {c}
                </option>
              ))}
            </select>
          </div>
        </div>

        <DialogFooter>
          <button
            type="button"
            onClick={() => onOpenChange(false)}
            className="px-4 py-2 text-sm border rounded-md hover:bg-gray-50"
            disabled={isCreating}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleCreate}
            disabled={isCreating}
            className="px-4 py-2 text-sm bg-[#428B4D] text-white rounded-md hover:bg-[#357a3f] disabled:opacity-50"
          >
            {isCreating ? "Creating..." : "Create Bank"}
          </button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}