/* Panel de datos bancarios (transferencia) — lee de Supabase o fallback local */

const BANK_FALLBACK = {
  beneficiary: 'Tecos Elite VOLLEYBALL AC',
  bank_name: 'BBVA México',
  account_number: '0123 4567 8901',
  clabe: '012 345 678901234567',
};

const TransferBankPanel = ({ theme, purpose = 'tienda', reference, amount, extraRows = [] }) => {
  const [bank, setBank] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      if (typeof fetchBankTransfer === 'function' && isSupabaseReady()) {
        const row = await fetchBankTransfer(purpose);
        if (!cancelled && row) setBank(row);
      }
      if (!cancelled) setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [purpose]);

  const b = bank || BANK_FALLBACK;
  const rows = [
    { l: 'Beneficiario', v: b.beneficiary },
    { l: 'Banco', v: b.bank_name },
    { l: 'Cuenta', v: b.account_number },
    { l: 'CLABE', v: b.clabe },
    ...(reference ? [{ l: 'Concepto', v: reference }] : []),
    ...(amount != null ? [{ l: 'Monto', v: `$${amount} MXN` }] : []),
    ...extraRows,
  ];

  return (
    <div style={{
      padding: 18, borderRadius: 12,
      background: `linear-gradient(135deg, ${theme.primary}22, ${theme.bgInput})`,
      border: `1px solid ${theme.primary}55`, marginBottom: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <Icon name="info" size={18} style={{ color: theme.primary }} />
        <span style={{ color: theme.text, fontWeight: 600, fontFamily: 'Inter, sans-serif' }}>
          {loading ? 'Cargando datos bancarios…' : 'Realiza tu transferencia con estos datos'}
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 13, fontFamily: 'Inter, sans-serif' }}>
        {rows.map(it => (
          <div key={it.l} style={{
            padding: 12, borderRadius: 8, background: theme.bgElev, border: `1px solid ${theme.border}`,
          }}>
            <div style={{ color: theme.textMute, fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{it.l}</div>
            <div style={{ color: theme.text, fontWeight: 600, marginTop: 4 }}>{it.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { TransferBankPanel, BANK_FALLBACK });