// Keywords, Pages, Backlinks, Technical, AI, Competitors pages

const KeywordsPage = ({ openDrawer }) => {
  const [intent, setIntent] = React.useState("all");
  const intents = [
    { k: "all", l: "All", n: 1842 }, { k: "info", l: "Informational", n: 982 },
    { k: "comp", l: "Comparison", n: 284 }, { k: "trans", l: "Transactional", n: 196 },
    { k: "brand", l: "Branded", n: 380 },
  ];
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">Keywords <em>tracking 1,842</em></h1>
          <div className="page__sub">128 movers this week · 42 entered top 10 · 18 lost top 10</div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button className="btn btn--ghost"><Ico name="plus" size={12}/>Add keywords</button>
          <button className="btn"><Ico name="download" size={12}/>Export CSV</button>
        </div>
      </div>

      <div className="row">
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {intents.map(i => (
            <button key={i.k} onClick={() => setIntent(i.k)}
              className={`chip ${intent === i.k ? "is-active" : ""}`}>
              {i.l} <span style={{ fontFamily: "var(--mono)", opacity: 0.7, fontSize: 10 }}>{i.n}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="grid-3 row">
        <div className="kpi"><div className="kpi__l">Top 3</div><div className="kpi__v">142</div><div className="kpi__d up"><Ico name="up" size={11}/>+18</div></div>
        <div className="kpi"><div className="kpi__l">Top 10</div><div className="kpi__v">486</div><div className="kpi__d up"><Ico name="up" size={11}/>+42</div></div>
        <div className="kpi"><div className="kpi__l">Estimated traffic value</div><div className="kpi__v">$48.2k</div><div className="kpi__d up"><Ico name="up" size={11}/>+9.4%</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div>
            <h3 className="panel__title">Tracked keywords</h3>
            <div className="panel__sub">Click any row to drill down</div>
          </div>
          <div className="tabs">
            <button className="is-active">All</button>
            <button>Movers</button>
            <button>New</button>
            <button>Lost</button>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Keyword</th>
            <th className="num">Position</th>
            <th className="num">Δ</th>
            <th className="num">Volume</th>
            <th className="num">CTR</th>
            <th>Landing page</th>
          </tr></thead>
          <tbody>
            {KEYWORDS.map(k => {
              const delta = k.prev - k.pos;
              return (
                <tr key={k.kw} onClick={() => openDrawer({ kind: "keyword", row: k })}>
                  <td><span className="t__url">{k.kw}</span></td>
                  <td className="num"><span className={`pos ${k.pos<5?"t1":k.pos<10?"t2":k.pos<15?"t3":"t4"}`}>{k.pos}</span></td>
                  <td className="num">
                    <span className={`delta ${delta>0?"up":delta<0?"down":"flat"}`}>
                      {delta>0?"▲":delta<0?"▼":"–"} {Math.abs(delta) || ""}
                    </span>
                  </td>
                  <td className="num">{k.vol.toLocaleString()}</td>
                  <td className="num">{k.ctr}%</td>
                  <td><span className="t__sub" style={{ fontFamily: "var(--mono)", color: "var(--ink-2)" }}>{k.url}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="panel__foot">
          <span>Showing 10 of 1,842</span>
          <span>Page 1 / 185</span>
        </div>
      </div>
    </div>
  );
};

const PagesPage = ({ openDrawer }) => (
  <div className="page">
    <div className="page__head">
      <div>
        <h1 className="page__h1">Pages</h1>
        <div className="page__sub">284 indexable pages tracked · ranked by clicks</div>
      </div>
      <button className="btn btn--ghost"><Ico name="filter" size={12}/>Filter</button>
    </div>
    <div className="panel">
      <table className="t">
        <thead><tr>
          <th>URL</th><th className="num">Clicks</th><th className="num">Δ</th><th className="num">Impressions</th>
          <th className="num">CTR</th><th className="num">Avg pos</th><th className="num">Keywords</th>
        </tr></thead>
        <tbody>
          {TOP_PAGES.map(p => (
            <tr key={p.url} onClick={() => openDrawer({ kind: "page", row: p })}>
              <td><span className="t__url">{p.url}</span></td>
              <td className="num">{p.clicks.toLocaleString()}</td>
              <td className="num"><span className={`delta ${p.d>0?"up":p.d<0?"down":"flat"}`}>{p.d>0?"+":""}{p.d}%</span></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>
              <td className="num">{Math.round(p.imp/3500)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const BacklinksPage = () => (
  <div className="page">
    <div className="page__head">
      <div>
        <h1 className="page__h1">Backlinks <em>+24 new</em></h1>
        <div className="page__sub">Domain rating 64 · 1,284 referring domains · 28.4k inbound links</div>
      </div>
      <div style={{ display: "flex", gap: 6 }}>
        <button className="btn btn--ghost">Disavow</button>
        <button className="btn"><Ico name="download" size={12}/>Export</button>
      </div>
    </div>
    <div className="grid-3 row">
      <div className="kpi"><div className="kpi__l">Domain rating</div><div className="kpi__v">64</div><div className="kpi__d up"><Ico name="up" size={11}/>+2</div></div>
      <div className="kpi"><div className="kpi__l">Referring domains</div><div className="kpi__v">1,284</div><div className="kpi__d up"><Ico name="up" size={11}/>+18</div></div>
      <div className="kpi"><div className="kpi__l">Toxic links</div><div className="kpi__v">12</div><div className="kpi__d down"><Ico name="up" size={11}/>flagged</div></div>
    </div>
    <div className="panel">
      <div className="panel__head">
        <div>
          <h3 className="panel__title">Recent backlinks</h3>
          <div className="panel__sub">High-authority sources, last 60 days</div>
        </div>
      </div>
      <table className="t">
        <thead><tr>
          <th>Domain</th><th className="num">DR</th><th className="num">Refs</th>
          <th>Type</th><th>Anchor</th><th className="num">First seen</th>
        </tr></thead>
        <tbody>
          {BACKLINKS.map(b => (
            <tr key={b.domain}>
              <td><span className="t__url">{b.domain}</span></td>
              <td className="num">
                <span className="bar"><span style={{ width: `${b.dr}%` }}/></span>{b.dr}
              </td>
              <td className="num">{b.refs}</td>
              <td><span className={`badge ${b.type==="dofollow"?"badge--ok":""}`}>{b.type}</span></td>
              <td><span style={{ font: "italic 400 12px/1.3 var(--serif)", color: "var(--ink-2)" }}>"{b.anchor}"</span></td>
              <td className="num">{b.first}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const TechnicalPage = () => (
  <div className="page">
    <div className="page__head">
      <div>
        <h1 className="page__h1">Technical <em>health</em></h1>
        <div className="page__sub">Last crawl: 2 hours ago · 1,340 URLs · 3 issues</div>
      </div>
      <button className="btn">Re-crawl now</button>
    </div>

    <div className="panel" style={{ marginBottom: 16 }}>
      <div className="panel__head">
        <div>
          <h3 className="panel__title">Site health score</h3>
          <div className="panel__sub">Composite, last crawl</div>
        </div>
      </div>
      <div className="panel__body" style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 32, alignItems: "center" }}>
        <Donut value={87} max={100} size={160} label="87" sub="Healthy" color="var(--ok)"/>
        <div style={{ display: "grid", gap: 8 }}>
          {TECH.map(t => (
            <div key={t.c} style={{ display: "grid", gridTemplateColumns: "1fr 80px 200px", gap: 12, alignItems: "center", padding: "10px 0", borderBottom: "1px solid var(--rule)" }}>
              <div>
                <div style={{ font: "500 13px/1.2 var(--sans)" }}>{t.c}</div>
                <div style={{ font: "400 11px/1.3 var(--mono)", color: "var(--muted)", marginTop: 2 }}>{t.note}</div>
              </div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 13, textAlign: "right" }}>{t.v.toLocaleString()}</div>
              <div style={{ height: 6, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden" }}>
                <div style={{
                  width: t.total ? `${(t.v/t.total)*100}%` : "100%", height: "100%",
                  background: t.tone === "ok" ? "var(--ok)" : t.tone === "warn" ? "var(--warn)" : "var(--bad)",
                }}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    <div className="panel">
      <div className="panel__head">
        <div>
          <h3 className="panel__title">Open issues</h3>
          <div className="panel__sub">3 items · 2 medium, 1 low</div>
        </div>
      </div>
      <table className="t">
        <thead><tr>
          <th>Issue</th><th>Severity</th><th>URL</th><th className="num">First seen</th>
        </tr></thead>
        <tbody>
          {[
            { i: "INP regression on /learn/* pages", s: "medium", u: "/learn/*", f: "Apr 24" },
            { i: "404: redirect missing for moved page", s: "medium", u: "/old/getting-started.html", f: "Apr 20" },
            { i: "Missing FAQPage schema", s: "low", u: "/learn/lockups-liquidity", f: "Apr 18" },
          ].map((r, i) => (
            <tr key={i}>
              <td>{r.i}</td>
              <td><span className={`badge ${r.s==="medium"?"badge--warn":""}`}>{r.s}</span></td>
              <td><span className="t__sub" style={{ fontFamily: "var(--mono)", color: "var(--ink-2)" }}>{r.u}</span></td>
              <td className="num">{r.f}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const AIPage = () => {
  const t = useTheme();
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">AI mentions <em>new</em></h1>
          <div className="page__sub">Citation tracking across LLM-driven engines · 370 cites this month</div>
        </div>
        <span className="badge badge--rust">Beta</span>
      </div>
      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Citation share by engine</h3>
              <div className="panel__sub">Among queries you target</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 14 }}>
            {AI_MENTIONS.map(a => (
              <div key={a.engine}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                  <span style={{ font: "600 13px/1 var(--sans)" }}>{a.engine}</span>
                  <span style={{ font: "500 12px/1 var(--mono)", color: "var(--muted)" }}>{a.cited} cites · {a.share}% share</span>
                </div>
                <div style={{ height: 8, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{ width: `${a.share*2.5}%`, maxWidth: "100%", height: "100%", background: t.rust, borderRadius: 999 }}/>
                </div>
                <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {a.queries.map(q => <span key={q} className="chip" style={{ fontSize: 11, padding: "3px 8px" }}>"{q}"</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Citation trend</h3>
              <div className="panel__sub">Last 30 days</div>
            </div>
          </div>
          <div className="panel__body">
            <TrafficChart data={TRAFFIC.map(d => ({ ...d, clicks: Math.round(d.clicks/55) }))} metric="clicks" compare={true}/>
            <div style={{ marginTop: 12, padding: 12, background: "var(--paper)", borderRadius: 8, font: "400 12px/1.5 var(--sans)", color: "var(--ink-2)" }}>
              <strong style={{ display: "block", marginBottom: 4, font: "600 12px/1.2 var(--sans)" }}>What changed</strong>
              ChatGPT and Perplexity are increasingly citing your <em>/learn/fractional-real-estate/*</em> cluster. Schema markup and FAQPage coverage correlate with citation lift.
            </div>
          </div>
        </div>
      </div>

      <div className="panel" style={{ marginTop: 16 }}>
        <div className="panel__head">
          <div>
            <h3 className="panel__title">Recent citations</h3>
            <div className="panel__sub">Live feed</div>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Engine</th><th>Query</th><th>Page cited</th><th className="num">When</th>
          </tr></thead>
          <tbody>
            {[
              { e: "Perplexity", q: "best fractional real estate platforms 2025", u: "/learn/fractional-real-estate/what-is", w: "12m ago" },
              { e: "ChatGPT", q: "how do I start investing in real estate with $100", u: "/learn/getting-started-real-estate", w: "38m ago" },
              { e: "Google AIO", q: "fractional real estate vs reit", u: "/learn/reit-vs-fractional", w: "1h ago" },
              { e: "Claude", q: "is psfnetwork legitimate", u: "/reviews/arrived-homes", w: "2h ago" },
              { e: "Perplexity", q: "tax implications fractional real estate", u: "/learn/tax-1099-div", w: "3h ago" },
            ].map((r, i) => (
              <tr key={i}>
                <td><span style={{ font: "600 13px/1 var(--sans)" }}>{r.e}</span></td>
                <td><span style={{ font: "italic 400 13px/1.3 var(--serif)" }}>"{r.q}"</span></td>
                <td><span className="t__url" style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-2)" }}>{r.u}</span></td>
                <td className="num" style={{ color: "var(--muted)" }}>{r.w}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const CompetitorsPage = () => {
  const max = Math.max(...COMPETITORS.map(c => c.clicks));
  const youIdx = COMPETITORS.findIndex(c => c.you);
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">Competitors</h1>
          <div className="page__sub">Share of voice within the fractional real estate cluster</div>
        </div>
      </div>
      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head"><div><h3 className="panel__title">Organic clicks</h3></div></div>
          <div className="panel__body">
            <HBar accentIdx={youIdx} max={max}
              data={COMPETITORS.map(c => ({ label: c.name, value: c.clicks, display: c.clicks.toLocaleString() }))}/>
          </div>
        </div>
        <div className="panel">
          <div className="panel__head"><div><h3 className="panel__title">Domain rating</h3></div></div>
          <div className="panel__body">
            <HBar accentIdx={youIdx} max={100}
              data={COMPETITORS.map(c => ({ label: c.name, value: c.dr, display: c.dr.toString() }))}/>
          </div>
        </div>
      </div>
      <div className="panel">
        <div className="panel__head">
          <div><h3 className="panel__title">Keyword overlap</h3>
            <div className="panel__sub">Where competitors rank but you don't (top 200 by volume)</div>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Keyword</th><th className="num">Volume</th><th className="num">Arrived</th>
            <th className="num">Fundrise</th><th className="num">Lofty</th><th className="num">You</th>
          </tr></thead>
          <tbody>
            {[
              { k: "real estate crowdfunding", v: 8100, a: 4, f: 2, l: 22, y: 18 },
              { k: "passive real estate income", v: 5400, a: 6, f: 3, l: 28, y: "—" },
              { k: "fractional ownership platforms", v: 2900, a: 12, f: 8, l: 4, y: 9 },
              { k: "minimum real estate investment", v: 4400, a: 8, f: 4, l: 24, y: 12 },
              { k: "best real estate apps 2025", v: 12100, a: 3, f: 1, l: 18, y: "—" },
            ].map(r => (
              <tr key={r.k}>
                <td><span className="t__url">{r.k}</span></td>
                <td className="num">{r.v.toLocaleString()}</td>
                <td className="num">{r.a}</td>
                <td className="num">{r.f}</td>
                <td className="num">{r.l}</td>
                <td className="num"><strong style={{ color: r.y === "—" ? "var(--bad)" : "var(--ink)" }}>{r.y}</strong></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

Object.assign(window, { KeywordsPage, PagesPage, BacklinksPage, TechnicalPage, AIPage, CompetitorsPage });