// Dashboard page
function DashboardPage({ goToProducts }){
  const { USER, PRODUCTS, WEEKLY, LEADERBOARD, TRANSACTIONS } = window.KYOUDAI;
  const isMobile = window.useIsMobile();
  const [range, setRange] = React.useState("12w");
  const [chartMode, setChartMode] = React.useState("earnings");

  const totalEarnings = USER.totalEarnings || 0;
  const salesCount = USER.salesCount || 0;
  const pending = USER.pendingEarnings || TRANSACTIONS.filter(t => t.status === "Pending").reduce((s,t) => s+t.commission, 0);

  const { LINKS } = window.KYOUDAI;
  const totalClicks = LINKS.reduce((s,l) => s + l.clicks, 0);
  const totalConv   = LINKS.reduce((s,l) => s + l.conversions, 0);
  const conversion  = totalClicks > 0 ? Math.round(totalConv / totalClicks * 1000) / 10 : 0;

  const sortedProducts = [...PRODUCTS].sort((a,b) => (b.commission * (b.conversion||5)) - (a.commission * (a.conversion||5)));
  const top3 = sortedProducts.slice(0, 3);
  const topProduct = top3[0] || PRODUCTS[0];

  return (
    <div className="page-enter" style={{padding: isMobile ? "14px 14px 80px" : "26px 32px 48px"}}>
      {/* stat grid */}
      <div style={{display:"grid", gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(4, 1fr)", gap: isMobile ? 10 : 16, marginBottom: isMobile ? 10 : 16}}>
        <StatTile
          label="Total earnings"
          value={totalEarnings} prefix="€" decimals={0}
          delta="+34%"
          sub="Lifetime, after payouts"
          tone="#5B8CFF"
          icon={<I.cash style={{width:16,height:16}}/>}
          spark={<Sparkline data={WEEKLY.map(w => w.earnings)} color="#5B8CFF" width={200} height={36}/>}
        />
        <StatTile
          label="Sales generated"
          value={salesCount}
          delta="+22%"
          sub={`${salesCount} confirmed orders`}
          tone="#8A5BFF"
          icon={<I.box style={{width:16,height:16}}/>}
          spark={<Sparkline data={WEEKLY.map(w => w.sales)} color="#8A5BFF" width={200} height={36}/>}
        />
        <StatTile
          label="Conversion rate"
          value={conversion} suffix="%" decimals={1}
          delta="+1.8%"
          sub="Avg. across all links"
          tone="#00E0A4"
          icon={<I.trend style={{width:16,height:16}}/>}
          spark={<Sparkline data={[7.2,8.1,7.9,9.4,9.1,10.2,10.8,11.1,11.4]} color="#00E0A4" width={200} height={36}/>}
        />
        <StatTile
          label="Pending payout"
          value={pending} prefix="€" decimals={2}
          delta="+12%"
          sub={`Clears ${USER.nextPayout}`}
          tone="#F6C56B"
          icon={<I.calendar style={{width:16,height:16}}/>}
          spark={<Sparkline data={[100,180,220,280,320,380,420,pending]} color="#F6C56B" width={200} height={36}/>}
        />
      </div>

      {/* Main row: chart + top product */}
      <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.6fr 1fr", gap: isMobile ? 10 : 16, marginBottom: isMobile ? 10 : 16}}>
        {/* Chart */}
        <div className="glass" style={{padding:24, minHeight:360, display:"flex", flexDirection:"column"}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:6}}>
            <div>
              <div style={{fontSize:14, fontWeight:600, color:"var(--text)"}}>Weekly performance</div>
              <div style={{fontSize:12, color:"var(--sub)", marginTop:3}}>Your commission curve — last 12 weeks</div>
            </div>
            <div style={{display:"flex", gap:8, alignItems:"center"}}>
              <div className="seg">
                <button className={chartMode==="earnings"?"active":""} onClick={() => setChartMode("earnings")}>Earnings</button>
                <button className={chartMode==="sales"?"active":""} onClick={() => setChartMode("sales")}>Sales</button>
              </div>
              <div className="seg">
                {["4w","12w","ALL"].map(r => (
                  <button key={r} className={range===r?"active":""} onClick={() => setRange(r)}>{r}</button>
                ))}
              </div>
            </div>
          </div>
          <div style={{flex:1, marginTop:12}}>
            <PerfChart data={WEEKLY} mode={chartMode}/>
          </div>
        </div>

        {/* Top product this week */}
        <div className="glass" style={{padding:24, position:"relative", overflow:"hidden"}}>
          <div style={{position:"absolute", inset:0, background:`radial-gradient(500px 300px at 100% 0%, ${topProduct.accent}22, transparent 60%)`}}/>
          <div style={{position:"relative"}}>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom:16}}>
              <div>
                <div className="mono" style={{fontSize:10, color:"var(--sub)", letterSpacing:"0.12em"}}>TOP PRODUCT THIS WEEK</div>
                <div style={{fontSize:16, fontWeight:700, marginTop:6, color:"var(--text)", letterSpacing:"-0.02em"}}>{topProduct.name}</div>
              </div>
              <span className="badge badge-hot"><I.fire style={{width:10,height:10}}/>HOT</span>
            </div>

            <div style={{display:"flex", gap:16, alignItems:"flex-start"}}>
              <div style={{width:110, flexShrink:0}}>
                <CardArt product={topProduct}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{
                  padding:"14px 14px", borderRadius:12,
                  background:"linear-gradient(135deg, rgba(0,224,164,0.14), rgba(0,224,164,0.04))",
                  border:"1px solid rgba(0,224,164,0.3)", marginBottom:12,
                }}>
                  <div className="mono" style={{fontSize:10, color:"#3EE8BE", letterSpacing:"0.1em"}}>YOU EARN PER SALE</div>
                  <div style={{fontSize:28, fontWeight:700, color:"#3EE8BE", letterSpacing:"-0.03em", lineHeight:1, marginTop:6}}>
                    +€{topProduct.commission.toFixed(2)}
                  </div>
                </div>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, fontSize:12, marginBottom:14}}>
                  <div>
                    <div style={{color:"var(--sub)"}}>Conversion</div>
                    <div style={{color:"var(--text)", fontWeight:600, marginTop:2}}>{topProduct.conversion}%</div>
                  </div>
                  <div>
                    <div style={{color:"var(--sub)"}}>Your sales</div>
                    <div style={{color:"var(--text)", fontWeight:600, marginTop:2}}>29 this week</div>
                  </div>
                </div>
                <button className="btn btn-primary" style={{width:"100%"}} onClick={goToProducts}>
                  Promote this product
                  <I.chevron style={{width:12, height:12}}/>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom row: Top 3 to promote + Leaderboard */}
      <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr", gap: isMobile ? 10 : 16}}>
        <div className="glass" style={{padding: isMobile ? 14 : 24}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14}}>
            <div>
              <div style={{fontSize:14, fontWeight:600, display:"flex", alignItems:"center", gap:8}}>
                <I.bolt style={{width:14, height:14, color:"#F6C56B"}}/>
                Top 3 to promote today
              </div>
              <div style={{fontSize:12, color:"var(--sub)", marginTop:3}}>Algorithm-picked — highest ROI in your audience</div>
            </div>
            <button className="btn btn-sm btn-ghost" onClick={goToProducts}>View all<I.chevron style={{width:11,height:11}}/></button>
          </div>
          <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "1fr 1fr 1fr", gap: isMobile ? 8 : 12}}>
            {top3.map((p,i) => (
              <div key={p.id} style={{
                padding:14, borderRadius:12, border:"1px solid var(--line)", position:"relative",
                background:"rgba(255,255,255,0.015)",
              }}>
                <div style={{position:"absolute", top:10, right:10}}>
                  <div className={`rank-ring rank-${i+1}`}>#{i+1}</div>
                </div>
                <div style={{width:56}}>
                  <CardArt product={p}/>
                </div>
                <div style={{fontSize:12.5, fontWeight:600, marginTop:10, lineHeight:1.3, textWrap:"pretty"}}>{p.name}</div>
                <div style={{display:"flex", alignItems:"baseline", gap:6, marginTop:8}}>
                  <span style={{fontSize:18, fontWeight:700, color:"#3EE8BE", letterSpacing:"-0.02em"}}>+€{p.commission.toFixed(0)}</span>
                  <span className="mono" style={{fontSize:10, color:"var(--sub)"}}>/ SALE</span>
                </div>
                <div className="mono" style={{fontSize:10, color:"var(--sub)", marginTop:4}}>{p.conversion}% CVR</div>
              </div>
            ))}
          </div>
        </div>

        {/* Leaderboard */}
        <div className="glass" style={{padding:24}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14}}>
            <div>
              <div style={{fontSize:14, fontWeight:600, display:"flex", alignItems:"center", gap:8}}>
                <I.trophy style={{width:14, height:14, color:"#F6C56B"}}/>
                Top seller ranking
              </div>
              <div style={{fontSize:12, color:"var(--sub)", marginTop:3}}>This season · resets May 1</div>
            </div>
            <span className="badge badge-top"><I.star style={{width:10, height:10}}/>#{USER.rank}</span>
          </div>
          <div style={{display:"flex", flexDirection:"column", gap:4}}>
            {LEADERBOARD.slice(0,7).map(l => (
              <div key={l.rank} style={{
                display:"flex", alignItems:"center", gap:12, padding:"9px 10px", borderRadius:9,
                background: l.you ? "linear-gradient(90deg, rgba(91,140,255,0.14), rgba(138,91,255,0.06))" : "transparent",
                border: l.you ? "1px solid rgba(91,140,255,0.3)" : "1px solid transparent",
              }}>
                <div className={`rank-ring ${l.rank<=3 ? "rank-"+l.rank : "rank-n"}`}>{l.rank}</div>
                <Avatar initials={l.name.split(" ").map(s=>s[0]).join("")} size={28} tone={l.you ? "#8A5BFF" : "#3A4257"}/>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12.5, fontWeight:600, display:"flex", alignItems:"center", gap:6}}>
                    {l.name}
                    {l.you && <span className="mono" style={{fontSize:9, padding:"2px 5px", borderRadius:4, background:"rgba(91,140,255,0.25)", color:"#8AB0FF"}}>YOU</span>}
                  </div>
                  <div className="mono" style={{fontSize:10, color:"var(--sub)"}}>@{l.handle}</div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div style={{fontSize:12.5, fontWeight:700}}>€{l.earnings.toLocaleString()}</div>
                  <div className="mono" style={{fontSize:10, color: l.trend.startsWith("-") ? "#FF8FA5" : "#3EE8BE"}}>{l.trend}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
window.DashboardPage = DashboardPage;