// Content Hub — generador de texto para Instagram / TikTok
function ContentPage(){
  const { PRODUCTS, LINKS, USER } = window.KYOUDAI;
  const isMobile = window.useIsMobile();
  const [selected, setSelected] = React.useState(null);
  const [platform, setPlatform] = React.useState("instagram");
  const [tone, setTone] = React.useState("hype"); // hype | collector | urgency

  const product = selected ? PRODUCTS.find(p => p.id === selected) : null;
  const linkObj = product ? (LINKS || []).find(l => l.productId === product.id) : null;
  const affiliateUrl = linkObj
    ? ('https://' + linkObj.displayUrl)
    : product
      ? (window.KYOUDAI_CONFIG.shopUrl + '/products/' + product.slug + '?ref=' + USER.referral)
      : '';

  function generateCaption(p, plat, t, url) {
    if (!p) return '';
    const name = p.name;
    const price = '€' + p.price.toFixed(2);
    const comm = '+€' + p.commission.toFixed(2);
    const series = p.series || 'Pokémon';
    const isPSA = p.category === 'psa' || (p.name || '').toLowerCase().includes('psa');

    const igTags = [
      '#pokemon', '#pokemoncards', isPSA ? '#psagraded' : '#pokemonbox',
      isPSA ? '#psa10' : '#sealedpokemon', '#japanesepokemon',
      '#pokemoncollector', '#cardcollector', '#pokemontrading',
      '#kyoudai', '#maickjp', '#pokemonjapan',
      p.category === 'onepiece' ? '#onepiece #onepiececards' : '',
      p.category === 'boxes' ? '#boosterbox #pokemonsealed' : '',
    ].filter(Boolean).join(' ');

    const ttTags = [
      '#pokemon', '#pokemontiktok', isPSA ? '#psacards' : '#pokemonbox',
      '#cartaspokemon', '#coleccionismo', '#kyoudai',
    ].filter(Boolean).join(' ');

    const tags = plat === 'instagram' ? igTags : ttTags;

    if (plat === 'instagram') {
      if (t === 'hype') return `🔥 ${name}\n\nEsta carta no necesita presentación. ${isPSA ? 'PSA 10 — la nota más alta que existe. Perfección certificada.' : 'Caja sellada japonesa. Lo que todo coleccionista quiere en su vitrina.'}\n\nPrecio: ${price}\n📦 Stock limitado en mi tienda\n\n👇 Link directo en bio o aquí:\n${url}\n\n${tags}`;
      if (t === 'collector') return `✨ Para los que saben — ${name}\n\n${series}. ${isPSA ? 'Slabbeada PSA 10. Autenticidad garantizada, valor que no para de subir.' : 'Japonesa, sellada, con el arte que no llega al mercado europeo.'}\n\nEsto no es una compra, es una inversión en tu colección.\n\n🔗 ${url}\n\n${tags}`;
      if (t === 'urgency') return `⚠️ POCAS UNIDADES — ${name}\n\nCuando se acaben, se acaben. ${isPSA ? 'PSA 10 de este ejemplar — no hay segunda oportunidad.' : 'Cajas selladas japonesas que no vuelven a reponer.'}\n\nPrecio: ${price} · Stock mínimo\n\n🛒 Compra ahora:\n${url}\n\n${tags}`;
    }

    if (plat === 'tiktok') {
      if (t === 'hype') return `POV: encuentras ${name} en mi tienda 👀\n\n${isPSA ? '→ PSA 10. La carta más codiciada del mercado.' : '→ Caja sellada japonesa. Sin abrir. Perfecta.'}\n→ Precio justo: ${price}\n→ Stock limitado\n\nLink en bio 🔗\n\n${tags}`;
      if (t === 'collector') return `No para todo el mundo — ${name} 🏆\n\n${isPSA ? 'PSA 10 certificada. Para coleccionistas serios.' : 'Japonesa, sellada. Arte que Europa no ve.'}\nSolo para los que entienden de verdad.\n\nLink en bio 🔗\n\n${tags}`;
      if (t === 'urgency') return `Se acaba — ${name} ⏰\n\n${isPSA ? 'PSA 10 · Pocos ejemplares disponibles' : 'Cajas selladas · Stock mínimo'}\nCuando desaparezca, precio se dispara.\n\nLink en bio 🔗\n\n${tags}`;
    }
    return '';
  }

  const caption = product ? generateCaption(product, platform, tone, affiliateUrl) : '';

  return (
    <div className="page-enter" style={{padding: isMobile ? "14px 14px 80px" : "26px 32px 48px", display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 400px", gap: isMobile ? 16 : 24, alignItems:"start"}}>

      {/* Left — product picker */}
      <div>
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:18}}>
          <div>
            <div style={{fontSize:15, fontWeight:700, letterSpacing:"-0.01em"}}>Selecciona un producto</div>
            <div style={{fontSize:12, color:"var(--sub)", marginTop:3}}>El texto se genera con tu link de afiliado incluido.</div>
          </div>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(150px, 1fr))", gap:12}}>
          {PRODUCTS.map(p => (
            <div key={p.id} onClick={() => setSelected(p.id)}
              style={{
                cursor:"pointer", borderRadius:12, overflow:"hidden", position:"relative",
                border: selected === p.id ? "2px solid #5B8CFF" : "1px solid var(--line)",
                boxShadow: selected === p.id ? "0 0 20px rgba(91,140,255,0.35)" : "none",
                transition:"all .2s",
                background:"#0E1322",
              }}>
              {p.imageUrl
                ? <img src={p.imageUrl} alt={p.name}
                    style={{width:"100%", aspectRatio:"3/4", objectFit:"cover", display:"block"}}/>
                : <div style={{width:"100%", aspectRatio:"3/4", background:"linear-gradient(180deg,#141A2B,#0E1322)",
                    display:"grid", placeItems:"center", fontSize:28, color:"var(--sub)"}}>
                    {p.glyph}
                  </div>
              }
              <div style={{
                position:"absolute", inset:0, display:"flex", flexDirection:"column",
                justifyContent:"flex-end", padding:"8px",
                background:"linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%)",
              }}>
                <div style={{fontSize:11, fontWeight:600, color:"#fff", lineHeight:1.2}}>{p.name}</div>
                <div style={{fontSize:10, color:"#3EE8BE", fontWeight:700, marginTop:2}}>+€{p.commission.toFixed(2)}</div>
              </div>
              {selected === p.id && (
                <div style={{position:"absolute", top:8, right:8, width:20, height:20, borderRadius:99,
                  background:"#5B8CFF", display:"grid", placeItems:"center"}}>
                  <I.check style={{width:12, height:12, color:"#fff"}}/>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Right — text generator */}
      <div style={{position:"sticky", top:90}}>
        {!product ? (
          <div className="glass" style={{padding:32, display:"flex", flexDirection:"column", alignItems:"center", gap:12, textAlign:"center", minHeight:300, justifyContent:"center"}}>
            <div style={{fontSize:36}}>👆</div>
            <div style={{fontSize:14, fontWeight:600}}>Elige un producto</div>
            <div style={{fontSize:12, color:"var(--sub)", lineHeight:1.6}}>Se genera el texto listo para copiar y pegar en Instagram o TikTok con tu link de afiliado.</div>
          </div>
        ) : (
          <div className="glass" style={{padding:20, display:"flex", flexDirection:"column", gap:16}}>
            {/* Product header */}
            <div style={{display:"flex", alignItems:"center", gap:12}}>
              {product.imageUrl
                ? <img src={product.imageUrl} alt={product.name} style={{width:48, height:60, objectFit:"cover", borderRadius:8, border:"1px solid var(--line)"}}/>
                : <div style={{width:48, height:60, borderRadius:8, background:"var(--bg-3)", border:"1px solid var(--line)", display:"grid", placeItems:"center", fontSize:18}}>{product.glyph}</div>
              }
              <div>
                <div style={{fontSize:13, fontWeight:700}}>{product.name}</div>
                <div style={{fontSize:12, color:"#3EE8BE", fontWeight:700, marginTop:2}}>Ganas {'+€' + product.commission.toFixed(2)} por venta</div>
                <div style={{fontSize:11, color:"var(--sub)", marginTop:2}}>Tu link: <span className="mono" style={{color:"var(--primary)", fontSize:10}}>{affiliateUrl.replace(/^https?:\/\//,'')}</span></div>
              </div>
            </div>

            {/* Platform selector */}
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--dim)", letterSpacing:"0.12em", marginBottom:8}}>PLATAFORMA</div>
              <div className="seg">
                <button className={platform==="instagram"?"active":""} onClick={()=>setPlatform("instagram")}>Instagram</button>
                <button className={platform==="tiktok"?"active":""} onClick={()=>setPlatform("tiktok")}>TikTok</button>
              </div>
            </div>

            {/* Tone selector */}
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--dim)", letterSpacing:"0.12em", marginBottom:8}}>TONO</div>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:6}}>
                {[
                  {k:"hype", l:"Hype 🔥"},
                  {k:"collector", l:"Collector ✨"},
                  {k:"urgency", l:"Urgencia ⚠️"},
                ].map(t => (
                  <button key={t.k} onClick={()=>setTone(t.k)}
                    style={{
                      padding:"7px 4px", borderRadius:8, border:"1px solid", fontSize:11, fontWeight:600, cursor:"pointer",
                      background: tone===t.k ? "rgba(91,140,255,0.18)" : "rgba(255,255,255,0.02)",
                      borderColor: tone===t.k ? "rgba(91,140,255,0.6)" : "var(--line)",
                      color: tone===t.k ? "#8AB0FF" : "var(--sub)",
                      transition:"all .15s",
                    }}>{t.l}</button>
                ))}
              </div>
            </div>

            {/* Generated text */}
            <div>
              <div className="mono" style={{fontSize:10, color:"var(--dim)", letterSpacing:"0.12em", marginBottom:8}}>TEXTO GENERADO</div>
              <div style={{
                padding:14, borderRadius:10, fontSize:12.5, lineHeight:1.65,
                background:"rgba(255,255,255,0.02)", border:"1px solid var(--line)",
                whiteSpace:"pre-wrap", color:"var(--text)", maxHeight:320, overflow:"auto",
              }}>{caption}</div>
            </div>

            {/* Actions */}
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8}}>
              <CopyButton text={caption} label="Copiar texto" toastMsg="Texto copiado ✓" variant="primary"/>
              <CopyButton text={affiliateUrl} label="Copiar link" toastMsg="Link copiado ✓" icon={true}/>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.ContentPage = ContentPage;