// Riga IBAN con bottone copia — usata nel modal fondo e nel pannello IBAN
function IbanCopy({ iban }){
  const [copied, setCopied] = React.useState(false);
  const onCopy = async () => {
    try { await navigator.clipboard.writeText(iban); } catch(e){}
    setCopied(true); setTimeout(() => setCopied(false), 2200);
  };
  return (
    <div style={{display:'flex', alignItems:'center', gap:16, padding:'16px 20px', border:'1px solid rgba(244,237,216,.25)', background:'rgba(244,237,216,.05)'}}>
      <div style={{flex:1, fontSize:'clamp(12px, 1.1vw, 15px)', letterSpacing:1.5, fontFamily:'"Fraunces", serif', fontVariationSettings:'"opsz" 144', fontWeight:400, fontFeatureSettings:'"tnum"', color:'var(--cream)'}}>
        {iban}
      </div>
      <button onClick={onCopy} className="italiana" style={{
        background: copied ? 'var(--cream)' : 'transparent', border:'1px solid rgba(244,237,216,.4)',
        color: copied ? 'var(--ink)' : 'var(--cream)',
        padding:'9px 16px', fontSize:10, letterSpacing:2.5, textTransform:'uppercase', cursor:'pointer',
        transition:'all .2s', minWidth:90, whiteSpace:'nowrap',
      }}>
        {copied ? '✓ Copiato' : 'Copia'}
      </button>
    </div>
  );
}

// Modal di claim — stile coerente con la palette ink/cream/blood
function ClaimModal({ regalo, onClose, onSuccess }){
  const { t } = useLang();
  const [nome,    setNome]    = React.useState(sessionStorage.getItem(`rsvp_name_${CONFIG.event_id}`) || '');
  const [email,   setEmail]   = React.useState(sessionStorage.getItem(`rsvp_email_${CONFIG.event_id}`) || '');
  const [importo, setImporto] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [errore,  setErrore]  = React.useState('');
  const isFund = regalo.type === 'fund';

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const submit = async () => {
    if (!nome.trim()) { setErrore('Scrivi il tuo nome'); return; }
    if (isFund) {
      const n = Number(importo);
      if (!importo || isNaN(n) || n < regalo.min) { setErrore(`Importo minimo € ${regalo.min}`); return; }
    }
    setLoading(true);
    setErrore('');
    const { error } = await window.db.from('gift_claims').insert({
      event_id:    CONFIG.event_id,
      gift_id:     regalo.id,
      guest_name:  nome.trim(),
      guest_email: email.trim() || null,
      amount:      isFund ? Number(importo) : null,
    });
    setLoading(false);
    if (error) { setErrore('Qualcosa non ha funzionato, riprova.'); return; }
    onSuccess();
  };

  const inputStyle = {
    width:'100%', padding:'12px 0', background:'transparent', border:'none',
    borderBottom:'1px solid rgba(244,237,216,.25)', color:'var(--cream)',
    fontFamily:'"Cormorant Garamond", serif', fontSize:19, fontStyle:'italic', outline:'none',
  };

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, zIndex:10000, background:'rgba(5,3,2,.93)',
      backdropFilter:'blur(10px)', display:'flex', alignItems:'center', justifyContent:'center',
      padding:'6vh 6vw', animation:'fadeUp .25s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background:'var(--ink-2)', color:'var(--cream)', width:'100%', maxWidth:500,
        padding:'clamp(36px, 5vw, 60px)', position:'relative',
        border:'1px solid rgba(244,237,216,.12)',
      }}>
        <button onClick={onClose} className="italiana" style={{
          position:'absolute', top:20, right:20, background:'transparent',
          border:'1px solid rgba(244,237,216,.2)', color:'var(--cream)',
          padding:'6px 12px', fontSize:10, letterSpacing:3, cursor:'pointer', textTransform:'uppercase',
        }}>Esc</button>

        <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, textTransform:'uppercase', marginBottom:10}}>
          · {regalo.tag}
        </div>
        <h3 className="display" style={{
          fontSize:'clamp(28px, 3vw, 44px)', fontStyle:'italic', fontWeight:300,
          lineHeight:1.05, marginBottom:36, fontVariationSettings:'"SOFT" 80',
        }}>
          {regalo.title}
        </h3>

        {isFund ? (
          // Per i fondi mostra l'IBAN direttamente — il contributo avviene via bonifico
          <div>
            <p className="cormorant" style={{fontSize:17, opacity:.8, lineHeight:1.6, fontStyle:'italic', marginBottom:32}}>
              {t('regali.fund_intro')}
            </p>
            <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, textTransform:'uppercase', marginBottom:8}}>
              {t('regali.fund_holder_label')}
            </div>
            <div className="display" style={{fontSize:22, fontStyle:'italic', fontWeight:300, marginBottom:20}}>
              {CONFIG.iban.holder}
            </div>
            <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, textTransform:'uppercase', marginBottom:10}}>
              {t('regali.fund_iban_label')} — {CONFIG.iban.banca}
            </div>
            <IbanCopy iban={CONFIG.iban.code}/>
          </div>
        ) : (
          // Per i regali singoli mostra il form di claim
          <div style={{display:'grid', gap:28}}>
            <div>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, textTransform:'uppercase', marginBottom:10}}>· {t('regali.your_name')}</div>
              <input value={nome} onChange={e => setNome(e.target.value)}
                placeholder={t('regali.your_name')} style={inputStyle}/>
            </div>
            <div>
              <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.5, textTransform:'uppercase', marginBottom:10}}>· {t('regali.your_email')}</div>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                placeholder={t('regali.your_email')} style={inputStyle}/>
            </div>
          </div>
        )}

        {errore && (
          <p style={{color:'var(--passion)', fontSize:13, fontStyle:'italic', marginTop:18}}>{errore}</p>
        )}

        {!isFund && (
          <button onClick={submit} disabled={loading} className="italiana" style={{
            marginTop:40, width:'100%', padding:'18px',
            background:'var(--blood)', color:'var(--cream)', border:'none',
            fontSize:11, letterSpacing:3, textTransform:'uppercase',
            cursor: loading ? 'wait' : 'pointer', opacity: loading ? .6 : 1, transition:'opacity .2s',
          }}>
            {loading ? '...' : t('regali.confirm')}
          </button>
        )}
      </div>
    </div>
  );
}

function RegaloCard({ g, idx, giftClaims, onClaim }){
  const { t: translate } = useLang();
  const [ref, inView] = useInView({threshold:.2});
  const [hover, setHover] = React.useState(false);
  const tones = {
    dark:  { bg:'var(--ink-2)', fg:'var(--cream)', acc:'var(--passion)', border:'rgba(244,237,216,.12)' },
    cream: { bg:'var(--cream)', fg:'var(--ink)', acc:'var(--blood)', border:'rgba(10,6,5,.12)' },
    blood: { bg:'var(--blood)', fg:'var(--cream)', acc:'var(--cream)', border:'rgba(244,237,216,.25)' },
  };
  const tone = tones[g.tone];

  const isFund    = g.type === 'fund';
  const isClaimed = !isFund && giftClaims.length > 0;

  return (
    <div ref={ref} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className={`reveal ${inView?'in':''}`}
      style={{
        background:tone.bg, color:tone.fg, padding:'42px 32px 32px', position:'relative',
        border:`1px solid ${tone.border}`, transitionDelay:`${idx*.05}s`,
        transform: hover && !isClaimed ? 'translateY(-8px)' : 'translateY(0)',
        transition:'transform .4s cubic-bezier(.2,.6,.2,1), opacity 1.2s, box-shadow .4s',
        boxShadow: hover && !isClaimed ? '0 50px 80px -20px rgba(0,0,0,.5)' : 'none',
        display:'flex', flexDirection:'column', minHeight:380,
      }}>

      {/* Overlay "Già scelto" per i regali singoli già reclamati */}
      {isClaimed && (
        <div style={{
          position:'absolute', inset:0, background: g.tone === 'cream'
            ? 'rgba(244,237,216,.88)' : 'rgba(10,6,5,.82)',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
          zIndex:2, backdropFilter:'blur(2px)',
        }}>
          <div className="script" style={{fontSize:'clamp(38px, 4vw, 60px)', color:'var(--passion)'}}>
            {translate('regali.claimed')}
          </div>
        </div>
      )}

      <div style={{display:'flex', justifyContent:'space-between', marginBottom:40, alignItems:'baseline'}}>
        <span className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase'}}>
          · {g.tag}
        </span>
        <span className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.4}}>
          N° {String(idx+1).padStart(2,'0')}
        </span>
      </div>

      <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:12}}>
        {g.sub}
      </div>
      <h3 className="display" style={{fontSize:34, lineHeight:1.05, fontWeight:300, fontStyle:'italic', letterSpacing:'-.02em', marginBottom:18, fontVariationSettings:'"SOFT" 80'}}>
        {g.title}
      </h3>
      <p className="cormorant" style={{fontSize:15, lineHeight:1.6, opacity:.82, fontWeight:400, fontStyle:'italic', marginBottom:28, flex:1}}>
        {g.desc}
      </p>

      <div style={{display:'flex', justifyContent:'flex-end', alignItems:'baseline', borderTop:`1px solid ${tone.border}`, paddingTop:20}}>
        <button
          onClick={() => !isClaimed && onClaim(g.id)}
          disabled={isClaimed}
          className="italiana"
          style={{
            background:'transparent', border:`1px solid ${tone.border}`, color:tone.fg, padding:'11px 18px',
            fontSize:10, letterSpacing:2.5, textTransform:'uppercase',
            cursor: isClaimed ? 'default' : 'pointer', opacity: isClaimed ? 0 : 1,
          }}>
          {translate('regali.claim_button')} →
        </button>
      </div>
    </div>
  );
}

function IbanPanel(){
  const { t } = useLang();
  const iban = CONFIG.iban.code;
  const [ref, inView] = useInView({threshold:.3});

  return (
    <div ref={ref} className={`reveal ${inView?'in':''}`} style={{
      marginTop:100, padding:'clamp(50px, 7vw, 100px)',
      background:'var(--blood)', color:'var(--cream)', position:'relative', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'-20%', right:'-5%', fontSize:'clamp(160px, 26vw, 400px)',
        color:'rgba(244,237,216,.09)', pointerEvents:'none',
      }}>IBAN</div>

      <div className="iban-grid" style={{position:'relative', zIndex:2, display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center'}}>
        <div>
          <div className="italiana" style={{fontSize:11, letterSpacing:4, opacity:.7, textTransform:'uppercase', marginBottom:18}}>
            {t('regali.iban_contrib_label')}
          </div>
          <h3 className="display" style={{fontSize:'clamp(36px, 4.5vw, 68px)', fontStyle:'italic', fontWeight:300, lineHeight:1.08, marginBottom:22, fontVariationSettings:'"SOFT" 80'}}>
            {t('regali.iban_headline_1')}<br/><span className="script" style={{fontStyle:'normal'}}>{t('regali.iban_headline_2')}</span>
          </h3>
          <p className="cormorant" style={{fontSize:17, opacity:.82, lineHeight:1.6, maxWidth:420, fontStyle:'italic'}}>
            {t('regali.iban_causale_label')}: {CONFIG.iban.causale}
          </p>
        </div>
        <div>
          <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:10}}>
            {t('regali.iban_holder_label')}
          </div>
          <div className="display" style={{fontSize:24, marginBottom:28, fontStyle:'italic', fontWeight:300}}>
            {CONFIG.iban.holder}
          </div>
          <div className="italiana" style={{fontSize:10, letterSpacing:3, opacity:.55, textTransform:'uppercase', marginBottom:10}}>
            IBAN — {CONFIG.iban.banca}
          </div>
          <IbanCopy iban={iban}/>
        </div>
      </div>
    </div>
  );
}

function Regali(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.05});
  const y = useScrollY();
  const [claims, setClaims]       = React.useState([]);
  const [openClaim, setOpenClaim] = React.useState(null);
  const items = window.TRANSLATIONS[lang].regali.items;

  // Carica i claim esistenti al mount
  React.useEffect(() => {
    window.db.from('gift_claims')
      .select('gift_id, guest_name, amount')
      .eq('event_id', CONFIG.event_id)
      .then(({ data }) => { if (data) setClaims(data); });
  }, []);

  const ricaricaClaims = () => {
    window.db.from('gift_claims')
      .select('gift_id, guest_name, amount')
      .eq('event_id', CONFIG.event_id)
      .then(({ data }) => { if (data) setClaims(data); });
  };

  // Merge dati tradotti (testi) con dati CONFIG (tone, type, price, min)
  const regaliMerged = items.map(tr => {
    const cfg = CONFIG.regali.find(g => g.id === tr.id) || {};
    return { ...cfg, ...tr };
  });
  const regaloAperto = openClaim ? regaliMerged.find(g => g.id === openClaim) : null;

  return (
    <section ref={ref} data-screen-label="06 Regali" style={{
      position:'relative', background:'var(--cream)', color:'var(--ink)',
      padding:'20vh 6vw 16vh', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'-4vh', left:'-4vw',
        fontSize:'clamp(180px, 28vw, 460px)', color:'rgba(200,16,46,.1)', pointerEvents:'none',
        transform:`translateY(${y*-0.1}px)`,
      }}>
        grazie
      </div>

      <div style={{position:'relative', zIndex:2, maxWidth:1400, margin:'0 auto'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:30}}>
          <div style={{width:60, height:1, background:'var(--ink)', opacity:.3}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.55}}>
            {t('regali.section_label')}
          </span>
        </div>
        <div className={`reveal ${inView?'in':''}`} style={{transitionDelay:'.1s', display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:40, marginBottom:80}}>
          <DecodeText
            tag="h2" className="display"
            text={t('regali.title')}
            endPct={60}
            style={{fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em', fontStyle:'italic', fontVariationSettings:'"SOFT" 100', maxWidth:'12ch'}}
          />
          <div className="cormorant" style={{maxWidth:320, fontSize:17, lineHeight:1.6, opacity:.75, fontStyle:'italic'}}>
            {t('regali.desc')}
          </div>
        </div>

        <div className="regali-grid" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:1, background:'rgba(10,6,5,.12)', border:'1px solid rgba(10,6,5,.12)'}}>
          {regaliMerged.map((g, i) => (
            <RegaloCard
              key={g.id}
              g={g}
              idx={i}
              giftClaims={claims.filter(c => c.gift_id === g.id)}
              onClaim={setOpenClaim}
            />
          ))}
        </div>

        <IbanPanel/>
      </div>

      {/* Modal claim — fuori dal contenitore per evitare overflow:hidden */}
      {regaloAperto && (
        <ClaimModal
          regalo={regaloAperto}
          onClose={() => setOpenClaim(null)}
          onSuccess={() => { ricaricaClaims(); setOpenClaim(null); }}
        />
      )}
    </section>
  );
}

window.Regali = Regali;