// Products page — the main event.
const CATEGORIES = [
  {k:"all",      l:"Todos"},
  {k:"psa",      l:"PSA"},
  {k:"pokemon",  l:"Pokémon"},
  {k:"boxes",    l:"Booster Boxes"},
  {k:"onepiece", l:"One Piece"},
];

function ProductsPage(){
  const { PRODUCTS, USER } = window.KYOUDAI;
  const isMobile = window.useIsMobile();
  const [filter, setFilter] = React.useState("all");
  const [view, setView] = React.useState("grid");
  const [sort, setSort] = React.useState("commission");
  const [search, setSearch] = React.useState(window.kyoudaiSearch || "");

  React.useEffect(() => {
    function onSearch() { setSearch(window.kyoudaiSearch || ""); }
    window.addEventListener('kyoudai-search', onSearch);
    return () => window.removeEventListener('kyoudai-search', onSearch);
  }, []);

  const q = search.toLowerCase().trim();
  const filtered = PRODUCTS
    .filter(p => filter === "all" || p.category === filter)
    .filter(p => !q || p.name.toLowerCase().includes(q) || (p.sku||'').toLowerCase().includes(q))
    .sort((a,b) => {
      if(sort==="commission") return b.commission - a.commission;
      if(sort==="conversion") return b.conversion - a.conversion;
      if(sort==="price") return b.price - a.price;
      return 0;
    });

  return (
    <div className="page-enter" style={{padding: isMobile ? "14px 14px 80px" : "26px 32px 48px"}}>
      {/* Filter/sort bar */}
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: isMobile ? 12 : 20, gap:10, flexWrap:"wrap"}}>
        <div style={{display:"flex", alignItems:"center", gap:8}}>
          <div className="seg">
            {CATEGORIES.map(f => (
              <button key={f.k} className={filter===f.k?"active":""} onClick={() => setFilter(f.k)}>{f.l}</button>
            ))}
          </div>
          <span className="mono" style={{fontSize:11, color:"var(--sub)", marginLeft:6}}>{filtered.length} products</span>
        </div>

        <div style={{display:"flex", alignItems:"center", gap:10}}>
          <div style={{display:"flex", alignItems:"center", gap:8, fontSize:12, color:"var(--sub)"}}>
            <I.filter style={{width:13, height:13}}/>Sort:
            <select className="field" value={sort} onChange={e => setSort(e.target.value)} style={{height:32, fontSize:12}}>
              <option value="commission">Highest commission</option>
              <option value="conversion">Best converting</option>
              <option value="price">Highest price</option>
            </select>
          </div>
          <div className="seg">
            <button className={view==="grid"?"active":""} onClick={()=>setView("grid")}>Grid</button>
            <button className={view==="list"?"active":""} onClick={()=>setView("list")}>List</button>
          </div>
        </div>
      </div>

      {/* Product grid */}
      {view === "grid" ? (
        <div style={{display:"grid", gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(auto-fill, minmax(300px, 1fr))", gap: isMobile ? 10 : 16}}>
          {filtered.map(p => <ProductCard key={p.id} product={p} user={USER}/>)}
        </div>
      ) : (
        <div className="glass" style={{overflow:"hidden"}}>
          <div style={{overflowX:"auto", WebkitOverflowScrolling:"touch"}}>
          <table style={{minWidth: isMobile ? 560 : undefined}}>
            <thead><tr>
              <th>Product</th><th>Price</th><th>Commission</th><th>CVR</th><th>Stock</th><th style={{textAlign:"right"}}>Actions</th>
            </tr></thead>
            <tbody>
              {filtered.map(p => (
                <tr key={p.id}>
                  <td>
                    <div style={{display:"flex", alignItems:"center", gap:12}}>
                      <div style={{width:44, flexShrink:0}}><CardArt product={p}/></div>
                      <div>
                        <div style={{fontWeight:600, fontSize:13}}>{p.name}</div>
                        <div className="mono" style={{fontSize:10, color:"var(--sub)", marginTop:2}}>{p.series.toUpperCase()}</div>
                      </div>
                    </div>
                  </td>
                  <td className="mono">€{p.price.toFixed(2)}</td>
                  <td><span style={{color:"#3EE8BE", fontWeight:700}}>+€{p.commission.toFixed(2)}</span></td>
                  <td className="mono">{p.conversion}%</td>
                  <td className="mono" style={{color: p.stock < 20 ? "#FF8FA5" : "var(--sub)"}}>{p.stock}</td>
                  <td style={{textAlign:"right"}}>
                    <CopyButton
                      text={((window.KYOUDAI.LINKS||[]).find(l=>l.productId===p.id)||{}).url || `${window.KYOUDAI_CONFIG.shopUrl}/products/${p.slug}?ref=${USER.referral}`}
                      label="Copy link" toastMsg="Affiliate link copied"
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          </div>
        </div>
      )}
    </div>
  );
}

function ProductCard({ product, user }){
  const ref = useMouseGlow();
  const _linkObj = (window.KYOUDAI.LINKS || []).find(l => l.productId === product.id);
  const link = _linkObj ? _linkObj.url : `${window.KYOUDAI_CONFIG.shopUrl}/products/${product.slug}?ref=${user.referral}`;
  const salesText = `🔥 ${product.name} — the ${product.series} box every collector is quietly stacking.\n\n${product.blurb}\n\nJust ${product.stock} sealed boxes left in my dashboard. Grab one here (my link):\n${link}`;

  const badgeMap = {
    HOT: { cls:"badge-hot", icon:<I.fire style={{width:10,height:10}}/> },
    TOP: { cls:"badge-top", icon:<I.star style={{width:10,height:10}}/> },
    TRENDING: { cls:"badge-trend", icon:<I.trend style={{width:10,height:10}}/> },
    NEW: { cls:"badge-new", icon:<I.sparkle style={{width:10,height:10}}/> },
  };
  const b = badgeMap[product.badge];

  return (
    <div ref={ref} className="product-card glass" style={{padding:16, display:"flex", flexDirection:"column", gap:14}}>
      {/* Art */}
      <div style={{position:"relative"}}>
        <CardArt product={product}/>
        {b && (
          <div style={{position:"absolute", top:10, left:10, display:"flex", gap:6}}>
            <span className={`badge ${b.cls}`}>{b.icon}{product.badge}</span>
          </div>
        )}
        <div style={{position:"absolute", top:10, right:10}}>
          <div style={{
            padding:"4px 8px", borderRadius:6,
            background:"rgba(0,0,0,0.55)", backdropFilter:"blur(6px)",
            border:"1px solid rgba(255,255,255,0.12)",
            fontSize:11, color:"#fff", display:"flex", alignItems:"center", gap:4
          }}>
            <I.star style={{width:10, height:10, color:"#F6C56B"}}/>
            <span className="mono">{product.rating}</span>
          </div>
        </div>
      </div>

      {/* Info */}
      <div style={{display:"flex", flexDirection:"column", gap:4}}>
        <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.1em"}}>{product.series.toUpperCase()}</div>
        <div style={{fontSize:14, fontWeight:600, lineHeight:1.3, textWrap:"pretty", minHeight:36}}>{product.name}</div>
      </div>

      {/* Price + commission */}
      <div style={{display:"flex", alignItems:"stretch", gap:10}}>
        <div style={{flex:1, padding:"10px 12px", borderRadius:10, background:"rgba(255,255,255,0.03)", border:"1px solid var(--line)"}}>
          <div className="mono" style={{fontSize:9, color:"var(--sub)", letterSpacing:"0.1em"}}>PRICE</div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2, letterSpacing:"-0.02em"}}>€{product.price.toFixed(2)}</div>
        </div>
        <div style={{
          flex:1.3, padding:"10px 12px", borderRadius:10,
          background:"linear-gradient(135deg, rgba(0,224,164,0.16), rgba(0,224,164,0.04))",
          border:"1px solid rgba(0,224,164,0.3)",
          position:"relative", overflow:"hidden",
        }}>
          <div className="mono" style={{fontSize:9, color:"#3EE8BE", letterSpacing:"0.1em"}}>YOU EARN</div>
          <div style={{fontSize:20, fontWeight:800, color:"#3EE8BE", marginTop:2, letterSpacing:"-0.03em", lineHeight:1}}>
            +€{product.commission.toFixed(2)}
          </div>
        </div>
      </div>

      {/* Micro stats */}
      <div style={{display:"flex", justifyContent:"space-between", fontSize:11, color:"var(--sub)"}} className="mono">
        <span>CVR {product.conversion}%</span>
        <span style={{color: product.stock < 20 ? "#FF8FA5" : "var(--sub)"}}>
          {product.stock < 20 && "⚠ "}{product.stock} in stock
        </span>
        <span>{product.commissionRate}% rate</span>
      </div>

      {/* Actions */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:6}}>
        <CopyButton text={link} label="Copy link" toastMsg="Affiliate link copied" variant="primary" className="" />
        <CopyButton text={salesText} label="Copy text" toastMsg="Sales copy ready" />
      </div>
      <CardBtn product={product} user={user}/>
    </div>
  );
}

function CardBtn({ product, user }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      {open && <CardPreviewModal product={product} user={user} onClose={() => setOpen(false)}/>}
      <button className="btn btn-sm" style={{justifyContent:"center"}} onClick={() => setOpen(true)}>
        <I.download style={{width:13, height:13}}/>Tarjeta marketing
      </button>
    </>
  );
}

window.ProductsPage = ProductsPage;