// Overview page

const Kpi = ({ k }) => {
  const t = useTheme();
  return (
    <div className="kpi">
      <div className="kpi__l">{k.l}</div>
      <div className="kpi__v">{k.v}</div>
      <div className={`kpi__d ${k.tone}`}>
        <Ico name={k.tone === "down" ? "down" : "up"} size={11}/>
        {k.d}
      </div>
      <div className="kpi__spark"><Sparkline data={k.spark} color={k.tone === "down" ? t.rust : t.teal} width={84} height={28}/></div>
    </div>
  );
};

const OverviewPage = ({ openDrawer, compare }) => {
  const [metric, setMetric] = React.useState("clicks");
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">SEO performance, <em>at a glance</em>.</h1>
          <div className="page__sub">Last 30 days · vs. previous 30 days · 4 anomalies detected</div>
        </div>
        <div className="chips">
          <span className="chip is-active">All countries <span className="chip__x">×</span></span>
          <span className="chip">Desktop</span>
          <span className="chip">Mobile</span>
          <span className="chip">+ Add filter</span>
        </div>
      </div>

      <div className="kpis">
        {KPIS.map(k => <Kpi key={k.l} k={k}/>)}
      </div>

      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Organic traffic</h3>
              <div className="panel__sub">Daily clicks · Apr 1 – Apr 30</div>
            </div>
            <div className="tabs">
              <button className={metric==="clicks" ? "is-active" : ""} onClick={() => setMetric("clicks")}>Clicks</button>
              <button className={metric==="imp" ? "is-active" : ""} onClick={() => setMetric("imp")}>Impressions</button>
            </div>
          </div>
          <div className="panel__body">
            <TrafficChart data={TRAFFIC} metric={metric} compare={compare}/>
            <div style={{ display: "flex", gap: 18, marginTop: 8, font: "500 12px/1 var(--sans)", color: "var(--muted)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <i style={{ width: 14, height: 3, background: "var(--teal)", borderRadius: 2 }}/>This period
              </span>
              {compare && (
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <i style={{ width: 14, height: 0, borderTop: "1px dashed var(--muted)" }}/>Previous
                </span>
              )}
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <i style={{ width: 8, height: 8, borderRadius: 999, background: "var(--rust)" }}/>Anomaly
              </span>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">SERP feature health</h3>
              <div className="panel__sub">Coverage in featured slots</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 14 }}>
            {[
              { l: "Featured snippets", v: 24, max: 60, tone: "ok" },
              { l: "AI overviews",      v: 18, max: 40, tone: "ok" },
              { l: "People also ask",   v: 96, max: 120, tone: "ok" },
              { l: "Image pack",        v: 8,  max: 20, tone: "warn" },
              { l: "Video carousel",    v: 2,  max: 12, tone: "bad" },
            ].map(r => (
              <div key={r.l}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, font: "500 12px/1 var(--sans)" }}>
                  <span>{r.l}</span>
                  <span style={{ fontFamily: "var(--mono)", color: "var(--muted)" }}>{r.v}/{r.max}</span>
                </div>
                <div style={{ height: 6, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{
                    width: `${(r.v/r.max)*100}%`, height: "100%",
                    background: r.tone === "ok" ? "var(--ok)" : r.tone === "warn" ? "var(--warn)" : "var(--bad)",
                    borderRadius: 999,
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Top pages</h3>
              <div className="panel__sub">By organic clicks</div>
            </div>
            <button className="btn btn--ghost">View all <Ico name="arrow" size={12}/></button>
          </div>
          <table className="t">
            <thead><tr>
              <th>Page</th><th className="num">Clicks</th><th className="num">Impr.</th><th className="num">CTR</th><th className="num">Pos</th>
            </tr></thead>
            <tbody>
              {TOP_PAGES.slice(0,6).map(p => (
                <tr key={p.url} onClick={() => openDrawer({ kind: "page", row: p })}>
                  <td>
                    <span className="t__url">{p.url}</span>
                    <span className="t__sub">{p.url.split("/")[2] || "learn"}</span>
                  </td>
                  <td className="num">
                    {p.clicks.toLocaleString()}
                    <div className={`delta ${p.d>0?"up":p.d<0?"down":"flat"}`}>{p.d>0?"+":""}{p.d}%</div>
                  </td>
                  <td className="num">{(p.imp/1000).toFixed(0)}k</td>
                  <td className="num">{p.ctr}%</td>
                  <td className="num"><span className={`pos ${p.pos<5?"t1":p.pos<10?"t2":p.pos<15?"t3":"t4"}`}>{p.pos}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Core Web Vitals</h3>
              <div className="panel__sub">Field data, last 28 days</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, textAlign: "center" }}>
            <div>
              <Donut value={92} label="92" sub="LCP good" color="var(--ok)"/>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", marginTop: 8 }}>2.1s p75</div>
            </div>
            <div>
              <Donut value={78} label="78" sub="INP good" color="var(--warn)"/>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", marginTop: 8 }}>240ms p75</div>
            </div>
            <div>
              <Donut value={96} label="96" sub="CLS good" color="var(--ok)"/>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", marginTop: 8 }}>0.04 p75</div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">AI mentions</h3>
              <div className="panel__sub">Citations across LLM-driven engines</div>
            </div>
            <span className="badge badge--rust">+59 this week</span>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 12 }}>
            {AI_MENTIONS.map(a => (
              <div key={a.engine} style={{ display: "grid", gridTemplateColumns: "100px 1fr 80px 60px", gap: 12, alignItems: "center", padding: "8px 0", borderBottom: "1px solid var(--rule)" }}>
                <div style={{ font: "600 13px/1.2 var(--sans)" }}>{a.engine}</div>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 11, marginBottom: 4 }}>
                    <span style={{ color: "var(--muted)" }}>Citation share</span>
                    <span>{a.share}%</span>
                  </div>
                  <div style={{ height: 4, background: "var(--paper-2)", borderRadius: 999 }}>
                    <div style={{ width: `${a.share*2}%`, maxWidth: "100%", height: "100%", background: "var(--rust)", borderRadius: 999 }}/>
                  </div>
                </div>
                <div className="num" style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{a.cited}</div>
                <div className="delta up" style={{ textAlign: "right" }}>+{a.d}%</div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Anomalies</h3>
              <div className="panel__sub">Auto-detected, last 7 days</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 10 }}>
            {[
              { tone: "rust", t: "Clicks dropped 18% on /reviews/arrived-homes", s: "Apr 22 · likely SERP feature loss" },
              { tone: "ok", t: "New ranking jump: 'fractional real estate' #5 → #3", s: "Apr 26 · +312 clicks/day est." },
              { tone: "warn", t: "INP regression on /learn pages (215ms → 280ms)", s: "Apr 24 · check recent JS bundle" },
              { tone: "rust", t: "Crawl errors: 5 new 404s after migration", s: "Apr 20 · review sitemap" },
            ].map((a, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "start", padding: "10px 12px", borderRadius: 8, background: "var(--paper)" }}>
                <span className="dot" style={{ background: a.tone === "rust" ? "var(--rust)" : a.tone === "warn" ? "var(--warn)" : "var(--ok)", marginTop: 6 }}/>
                <div>
                  <div style={{ font: "500 13px/1.4 var(--sans)" }}>{a.t}</div>
                  <div style={{ font: "400 11px/1.4 var(--mono)", color: "var(--muted)", marginTop: 2 }}>{a.s}</div>
                </div>
                <button className="icon-btn" style={{ width: 24, height: 24 }}><Ico name="arrow" size={12}/></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { OverviewPage, Kpi });