// DonationWidget.jsx — IMPROVEMENT over the original static donation panel.
// Preset amount chips, custom input, copy-IBAN-to-clipboard with toast.
const { useState: useStateDW } = React;

function DonationWidget({ lang }) {
  const [amount, setAmount] = useStateDW(100);
  const [custom, setCustom] = useStateDW('');
  const [copied, setCopied] = useStateDW(false);

  const IBAN = 'PL 00 0000 0000 0000 0000 0000 0000'; // placeholder — replace with real account

  const presets = [50, 100, 250, 500];
  const t = lang === 'pl'
    ? { title: 'Wybierz kwotę', custom: 'Inna kwota', currency: 'zł', iban: 'Nr rachunku', copy: 'Kopiuj IBAN', copied: 'Skopiowano ✓', note: 'Po wpłacie wystawimy potwierdzenie darowizny — napisz do nas.', tytul: 'Tytuł przelewu', tytulVal: 'Darowizna na cele statutowe' }
    : { title: 'Choose amount', custom: 'Other amount', currency: 'PLN', iban: 'Account number', copy: 'Copy IBAN', copied: 'Copied ✓', note: 'After your transfer, we will issue a donation confirmation — just write to us.', tytul: 'Transfer title', tytulVal: 'Donation for statutory purposes' };

  const copyIban = async () => {
    try { await navigator.clipboard.writeText(IBAN.replace(/\s/g,'')); } catch {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  const effectiveAmount = custom ? Number(custom) || 0 : amount;

  return (
    <div className="donate-box">
      <h3>{t.title}</h3>
      <div className="amount-chips" role="radiogroup" aria-label={t.title}>
        {presets.map(v => (
          <button
            key={v}
            role="radio"
            aria-checked={!custom && amount === v}
            className={`chip${!custom && amount === v ? ' is-active' : ''}`}
            onClick={() => { setAmount(v); setCustom(''); }}
          >
            {v} {t.currency}
          </button>
        ))}
        <label className={`chip chip-custom${custom ? ' is-active' : ''}`}>
          <span>{t.custom}</span>
          <input
            type="number"
            min="1"
            inputMode="numeric"
            value={custom}
            onChange={e => setCustom(e.target.value)}
            placeholder="—"
          />
          <span className="cur">{t.currency}</span>
        </label>
      </div>

      <dl className="kv">
        <dt>{t.iban}</dt>
        <dd className="iban-row">
          <code className="iban">{IBAN}</code>
          <button className="copy-btn" onClick={copyIban} aria-live="polite">
            {copied ? t.copied : t.copy}
          </button>
        </dd>
        <dt>{t.tytul}</dt>
        <dd>{t.tytulVal}</dd>
        <dt>{lang === 'pl' ? 'Kwota' : 'Amount'}</dt>
        <dd><strong style={{fontVariantNumeric:'tabular-nums'}}>{effectiveAmount} {t.currency}</strong></dd>
      </dl>

      <p className="fineprint">{t.note}</p>
    </div>
  );
}

window.DonationWidget = DonationWidget;