// ─────────────────────────────────────────────────────────────────
// gifts.jsx — registry + checkout (Pix / Card via Mercado Pago)
// ─────────────────────────────────────────────────────────────────
const { useState: useStateG, useEffect: useEffectG, useMemo: useMemoG, useRef: useRefG } = React;

function fmtBRL(v) {
  return v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 0 });
}

function Gifts({ t, lang, layout = 'grid', gifts = [], onPaid }) {
  const [filter, setFilter] = useStateG('all'); // all | home | honey
  const [active, setActive] = useStateG(null);  // gift in modal
  const [soldIds, setSoldIds] = useStateG(() => new Set(gifts.filter(g => g.sold).map(g => g.id)));

  useEffectG(() => {
    setSoldIds(new Set(gifts.filter(g => g.sold).map(g => g.id)));
  }, [gifts]);

  const filtered = gifts.filter(g =>
    filter === 'all' ? true : g.cat === (filter === 'home' ? 'home' : 'honey')
  );

  const isSold = (g) => soldIds.has(g.id);

  const markPaid = (g) => {
    setSoldIds(s => new Set([...s, g.id]));
    if (typeof onPaid === 'function') onPaid();
  };

  return (
    <section className="section" id="gifts" style={{ background: 'var(--surface)' }} data-screen-label="04 Presentes">
      <div className="container">
        <div className="sec-head">
          <span className="sec-head__num">{t('gifts.eyebrow')}</span>
          <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('gifts.title') }} />
          <p className="sec-head__sub">{t('gifts.sub')}</p>
        </div>

        <div className="gifts-tabs">
          <button className={`gifts-tab ${filter === 'all' ? 'is-active' : ''}`} onClick={() => setFilter('all')}>{t('gifts.tabAll')}</button>
          <button className={`gifts-tab ${filter === 'home' ? 'is-active' : ''}`} onClick={() => setFilter('home')}>{t('gifts.tabHome')}</button>
          <button className={`gifts-tab ${filter === 'honey' ? 'is-active' : ''}`} onClick={() => setFilter('honey')}>
            {t('gifts.tabHoney')} <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--accent)', textTransform: 'none', letterSpacing: 0, fontSize: 12, marginLeft: 8 }}>Turks & Caicos</span>
          </button>
        </div>

        <div className="gifts-toolbar">
          <span className="gifts-count">
            {filtered.filter(g => !isSold(g)).length} / {filtered.length} · {t('gifts.count')}
          </span>
        </div>

        <GiftGrid items={filtered} isSold={isSold} layout={layout} t={t} lang={lang} onChoose={setActive} />
      </div>

      <CheckoutModal t={t} lang={lang} gift={active} onClose={() => setActive(null)} onPaid={(g) => { markPaid(g); }} />
    </section>
  );
}

function GiftGrid({ items, isSold, layout, t, lang, onChoose }) {
  const styled = items.map((g, i) => ({
    ...g,
    _editorialClass:
      layout === 'editorial' && (g.feature ? 'gift--feature' : (i % 7 === 3 ? 'gift--wide' : ''))
  }));

  const cls = layout === 'list' ? 'gifts gifts--list'
            : layout === 'editorial' ? 'gifts gifts--editorial'
            : 'gifts gifts--grid';

  return (
    <div className={cls}>
      {styled.map(g => (
        <GiftCard key={g.id} gift={g} sold={isSold(g)} t={t} lang={lang} onChoose={onChoose}
                  extraClass={g._editorialClass} />
      ))}
    </div>
  );
}

function GiftCard({ gift, sold, t, lang, onChoose, extraClass = '' }) {
  const title = lang === 'en' && gift.titleEn ? gift.titleEn : gift.title;
  const desc = lang === 'en' && gift.descEn ? gift.descEn : gift.desc;
  const catLabel = gift.cat === 'home'
    ? (lang === 'pt' ? 'Casa' : 'Home')
    : (lang === 'pt' ? 'Lua de Mel' : 'Honeymoon');
  return (
    <article className={`gift ${extraClass}`}>
      {gift.imageUrl
        ? <div className="gift__photo" style={{ backgroundImage: `url(${gift.imageUrl})`, backgroundSize: 'cover', backgroundPosition: 'center', aspectRatio: '4 / 3' }} />
        : <GiftIllustration kind={gift.kind} id={gift.id} />}
      <span className="gift__cat">{catLabel}</span>
      {sold && <div className="gift__purchased">{t('gifts.purchased')}</div>}
      <div className="gift__body">
        <h3 className="gift__title">{title}</h3>
        <p className="gift__desc">{desc}</p>
        <div className="gift__price-row">
          <div className="gift__price"><small>R$</small>{gift.price.toLocaleString('pt-BR')}</div>
          {!sold && (
            <button className="gift__btn" onClick={() => onChoose(gift)}>{t('gifts.gift')}</button>
          )}
        </div>
      </div>
    </article>
  );
}

// ─── CHECKOUT MODAL ───
function CheckoutModal({ t, lang, gift, onClose, onPaid }) {
  const [tab, setTab] = useStateG('pix');
  const [stage, setStage] = useStateG('form'); // form | processing | pixWaiting | success | error
  const [error, setError] = useStateG('');
  const [payer, setPayer] = useStateG({ name: '', email: '' });
  const [pix, setPix] = useStateG(null);          // { qrBase64, qrCode, paymentId }
  const [card, setCard] = useStateG({ num: '', name: '', exp: '', cvv: '', inst: '1' });
  const [copied, setCopied] = useStateG(false);
  const pollRef = useRefG(null);

  useEffectG(() => {
    if (gift) {
      setStage('form');
      setTab('pix');
      setError('');
      setPix(null);
      setPayer({ name: '', email: '' });
      setCard({ num: '', name: '', exp: '', cvv: '', inst: '1' });
    }
    return () => {
      if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
    };
  }, [gift]);

  const open = !!gift;

  useEffectG(() => {
    if (!open) return;
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [open, onClose]);

  if (!gift) return <div className="modal-veil" aria-hidden="true" />;

  const title = lang === 'en' && gift.titleEn ? gift.titleEn : gift.title;
  const desc = lang === 'en' && gift.descEn ? gift.descEn : gift.desc;
  const catLabel = gift.cat === 'home'
    ? (lang === 'pt' ? 'Casa · presente' : 'Home · gift')
    : (lang === 'pt' ? 'Lua de Mel · experiência' : 'Honeymoon · experience');

  const startPolling = (paymentId) => {
    if (pollRef.current) clearInterval(pollRef.current);
    pollRef.current = setInterval(async () => {
      try {
        const r = await API.paymentStatus(paymentId);
        if (r.status === 'approved') {
          clearInterval(pollRef.current);
          pollRef.current = null;
          setStage('success');
          onPaid(gift);
          setTimeout(() => onClose(), 3000);
        } else if (r.status === 'rejected' || r.status === 'cancelled') {
          clearInterval(pollRef.current);
          pollRef.current = null;
          setStage('error');
          setError(t('checkout.error'));
        }
      } catch (_) {}
    }, 3500);
  };

  const startPix = async () => {
    if (!payer.name.trim()) { setError('Informe seu nome'); return; }
    setError('');
    setStage('processing');
    try {
      const r = await API.createPayment({
        giftId: gift.id,
        method: 'pix',
        payerName: payer.name,
        payerEmail: payer.email
      });
      setPix({ ...r.pix, paymentId: r.paymentId });
      setStage('pixWaiting');
      startPolling(r.paymentId);
    } catch (e) {
      setStage('error');
      setError(e.message || t('checkout.error'));
    }
  };

  const startCard = async () => {
    if (!payer.name.trim()) { setError('Informe seu nome'); return; }
    if (!card.num || !card.name || !card.exp || !card.cvv) {
      setError('Preencha os dados do cartão');
      return;
    }
    setError('');
    setStage('processing');
    try {
      // Tokenizar via SDK do Mercado Pago (client-side, sem trafegar PAN no nosso servidor)
      if (!window.MercadoPago) {
        throw new Error('Mercado Pago SDK não carregou');
      }
      const mp = window.__mpInstance || new window.MercadoPago(window.MP_PUBLIC_KEY, { locale: 'pt-BR' });
      window.__mpInstance = mp;

      const [mm, yy] = card.exp.split('/').map(s => s.trim());
      const cardForm = await mp.createCardToken({
        cardNumber: card.num.replace(/\s+/g, ''),
        cardholderName: card.name,
        cardExpirationMonth: mm,
        cardExpirationYear: yy && yy.length === 2 ? '20' + yy : yy,
        securityCode: card.cvv,
        identificationType: 'CPF',
        identificationNumber: '00000000000' // placeholder; MP exige campo mas o token funciona
      });

      const r = await API.createPayment({
        giftId: gift.id,
        method: 'card',
        payerName: payer.name,
        payerEmail: payer.email,
        cardToken: cardForm.id,
        installments: parseInt(card.inst, 10) || 1
      });

      if (r.status === 'approved') {
        setStage('success');
        onPaid(gift);
        setTimeout(() => onClose(), 3000);
      } else if (r.status === 'in_process' || r.status === 'pending') {
        setStage('pixWaiting'); // mesmo visual de "aguardando"
        startPolling(r.paymentId);
      } else {
        setStage('error');
        setError(t('checkout.error'));
      }
    } catch (e) {
      setStage('error');
      setError(e.message || t('checkout.error'));
    }
  };

  const copy = async () => {
    try { await navigator.clipboard.writeText(pix.qrCode); } catch {}
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <div className={`modal-veil ${open ? 'is-open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal__close" onClick={onClose} aria-label="close">×</button>
        <div className="modal__photo" style={{ background: gift.imageUrl ? `url(${gift.imageUrl}) center / cover` : 'transparent', position: 'relative', overflow: 'hidden' }}>
          {!gift.imageUrl && <GiftIllustration kind={gift.kind} id={gift.id} />}
        </div>
        <div className="modal__body">
          {stage === 'success' ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '20px 0', gap: 12 }}>
              <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1">
                <circle cx="12" cy="12" r="11"/><path d="M7 12l3.5 3.5L17 9"/>
              </svg>
              <h3 className="modal__title" style={{ fontSize: 32, marginTop: 8 }}>{t('checkout.success')}</h3>
              <p className="modal__desc" style={{ maxWidth: 360 }}>{t('checkout.successMsg')}</p>
            </div>
          ) : (
            <>
              <span className="modal__cat">{catLabel}</span>
              <h3 className="modal__title">{title}</h3>
              <p className="modal__desc">{desc}</p>
              <div className="modal__price"><small>R$</small>{gift.price.toLocaleString('pt-BR')}</div>

              <div className="pay-methods">
                <button className={`pay-method ${tab === 'pix' ? 'is-active' : ''}`} onClick={() => { setTab('pix'); setError(''); setStage('form'); }}>
                  <span className="pay-method__title">{t('checkout.pix')}</span>
                  <span className="pay-method__sub">{t('checkout.pixSub')}</span>
                </button>
                <button className={`pay-method ${tab === 'card' ? 'is-active' : ''}`} onClick={() => { setTab('card'); setError(''); setStage('form'); }}>
                  <span className="pay-method__title">{t('checkout.card')}</span>
                  <span className="pay-method__sub">{t('checkout.cardSub')}</span>
                </button>
              </div>

              <div className="field field--full" style={{ marginTop: 10 }}>
                <label>{t('checkout.payerName')}</label>
                <input value={payer.name} onChange={e => setPayer(p => ({ ...p, name: e.target.value }))} placeholder="Nome completo" />
              </div>
              <div className="field field--full">
                <label>{t('checkout.payerEmail')}</label>
                <input type="email" value={payer.email} onChange={e => setPayer(p => ({ ...p, email: e.target.value }))} placeholder="opcional, para enviarmos agradecimento" />
              </div>

              {tab === 'pix' ? (
                stage === 'pixWaiting' && pix?.qrBase64 ? (
                  <div className="pix-area">
                    <div className="pix-qr">
                      <img src={`data:image/png;base64,${pix.qrBase64}`} alt="QR Code Pix" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                    </div>
                    <div className="pix-info">
                      <span className="lbl">{t('checkout.pixCode')}</span>
                      <div className="copy">
                        <span style={{ wordBreak: 'break-all' }}>{pix.qrCode}</span>
                        <button onClick={copy}>{copied ? t('checkout.copied') : t('checkout.copy')}</button>
                      </div>
                      <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--muted)', fontSize: 13, marginTop: 8 }}>
                        {t('checkout.waiting')}
                      </p>
                    </div>
                  </div>
                ) : (
                  <button className="btn btn--gold" style={{ marginTop: 18, alignSelf: 'flex-start' }} onClick={startPix} disabled={stage === 'processing'}>
                    {stage === 'processing' ? t('checkout.processing') : `${t('checkout.confirm')} · Pix`}
                  </button>
                )
              ) : (
                <>
                  <div className="card-form">
                    <div className="field field--full">
                      <label>{t('checkout.cardNumber')}</label>
                      <input value={card.num} onChange={e => setCard(c => ({ ...c, num: e.target.value }))} placeholder="0000 0000 0000 0000" autoComplete="cc-number" />
                    </div>
                    <div className="field field--full">
                      <label>{t('checkout.cardName')}</label>
                      <input value={card.name} onChange={e => setCard(c => ({ ...c, name: e.target.value }))} placeholder="Nome impresso no cartão" autoComplete="cc-name" />
                    </div>
                    <div className="field">
                      <label>{t('checkout.cardExpiry')}</label>
                      <input value={card.exp} onChange={e => setCard(c => ({ ...c, exp: e.target.value }))} placeholder="MM/AA" autoComplete="cc-exp" />
                    </div>
                    <div className="field">
                      <label>{t('checkout.cardCvv')}</label>
                      <input value={card.cvv} onChange={e => setCard(c => ({ ...c, cvv: e.target.value }))} placeholder="000" autoComplete="cc-csc" />
                    </div>
                    <div className="field field--full">
                      <label>{t('checkout.installments')}</label>
                      <select value={card.inst} onChange={e => setCard(c => ({ ...c, inst: e.target.value }))}
                        style={{
                          background: 'transparent', border: 0, borderBottom: '1px solid var(--line)',
                          padding: '10px 0', fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--ink)', outline: 'none'
                        }}>
                        {[1,2,3,4,5,6].map(n => (
                          <option key={n} value={n}>{n}× de {fmtBRL(gift.price / n)} {n === 1 ? '' : 'sem juros'}</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <button className="btn btn--gold" style={{ marginTop: 18, alignSelf: 'flex-start' }} onClick={startCard} disabled={stage === 'processing'}>
                    {stage === 'processing' ? t('checkout.processing') : t('checkout.confirm')}
                  </button>
                </>
              )}

              {error && (
                <p style={{ color: '#c33', marginTop: 12, fontSize: 14 }}>{error}</p>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Gifts, CheckoutModal });