import React, { useEffect, useState } from 'react';
import { toast } from 'sonner';
import Modal from '../ui/Modal';
import SearchableSelect from '../ui/SearchableSelect';
import { BANK_OPTIONS } from './banks';
import {
  useCreateBankAccount,
  useUpdateBankAccount,
  type BankAccount,
} from '../../hooks/usePaymentMethods';
import { digitsOnly, toEnglishDigits } from '../../lib/utils';

/**
 * فرم افزودن/ویرایش حساب بانکی — پورت مبدأ ModalAddBankAccount.jsx.
 * اگر `account` داده شود حالت ویرایش، وگرنه افزودن.
 */
export default function BankAccountFormModal({
  open,
  account,
  onClose,
}: {
  open: boolean;
  account: BankAccount | null;
  onClose: () => void;
}) {
  const isEdit = !!account;
  const [bankName, setBankName] = useState('');
  const [cardNumber, setCardNumber] = useState('');
  const [accountNumber, setAccountNumber] = useState('');
  const [shabaNumber, setShabaNumber] = useState('');

  const createMut = useCreateBankAccount();
  const updateMut = useUpdateBankAccount();
  const pending = createMut.isPending || updateMut.isPending;

  useEffect(() => {
    if (!open) return;
    setBankName(account?.bank_name ?? '');
    setCardNumber(account?.card_number ?? '');
    setAccountNumber(account?.account_number ?? '');
    setShabaNumber(account?.shaba_number ?? '');
  }, [open, account]);

  const submit = () => {
    if (!bankName.trim()) { toast.error('نام بانک الزامی است'); return; }
    if (!accountNumber.trim()) { toast.error('شماره حساب الزامی است'); return; }

    const body = {
      bank_name: bankName.trim(),
      account_number: accountNumber.trim(),
      card_number: cardNumber.trim(),
      shaba_number: shabaNumber.trim(),
    };

    const onSuccess = () => {
      toast.success(isEdit ? 'حساب بانکی ویرایش شد' : 'حساب بانکی اضافه شد');
      onClose();
    };
    const onError = (e: unknown) => toast.error(e instanceof Error ? e.message : 'خطا در ذخیره');

    if (isEdit && account) {
      updateMut.mutate({ uuid: account.uuid, body }, { onSuccess, onError });
    } else {
      createMut.mutate(body, { onSuccess, onError });
    }
  };

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={isEdit ? 'ویرایش حساب بانکی' : 'افزودن حساب بانکی'}
      size="sm"
      footer={
        <button className="btn primary" style={{ width: '100%' }} disabled={pending} onClick={submit}>
          {pending ? '...' : isEdit ? 'ذخیره تغییرات' : 'اضافه کردن حساب بانکی'}
        </button>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <label className="field-label">نام بانک</label>
          <SearchableSelect
            options={BANK_OPTIONS}
            value={bankName || null}
            onChange={(v) => setBankName(v != null ? String(v) : '')}
            placeholder="انتخاب بانک"
          />
        </div>
        <div>
          <label className="field-label">شماره کارت</label>
          <input className="input" type="tel" inputMode="numeric" dir="ltr" value={cardNumber} onChange={(e) => setCardNumber(digitsOnly(e.target.value, 16))} placeholder="شماره کارت" />
        </div>
        <div>
          <label className="field-label">شماره حساب</label>
          <input className="input" type="tel" inputMode="numeric" dir="ltr" value={accountNumber} onChange={(e) => setAccountNumber(digitsOnly(e.target.value))} placeholder="شماره حساب" />
        </div>
        <div>
          <label className="field-label">شبا</label>
          <input className="input" inputMode="numeric" dir="ltr" value={shabaNumber} onChange={(e) => setShabaNumber(toEnglishDigits(e.target.value).toUpperCase())} placeholder="شبا" />
        </div>
      </div>
    </Modal>
  );
}