// 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>
      {k.spark && <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");
  const [monthlyMetric, setMonthlyMetric] = React.useState("clicks");
  const { data, fetching, error } = useDashData();
  if (!data) {
    if (error) {
      const s = window.SEMRUSH_OVERVIEW || {};
      const fmt = (n) => (n || 0).toLocaleString("tr-TR");
      return (
        <div className="page">
          <div className="page__head">
            <div>
              <h1 className="page__h1">Özgürzaman — Semrush snapshot</h1>
              <div className="page__sub">GSC bağlantısı henüz kurulmadı · Semrush TR DB, {s.refreshedAt}</div>
            </div>
          </div>
          <div style={{ margin: "0 0 16px", padding: "10px 14px", borderRadius: 8, background: "var(--paper-2)", border: "1px dashed var(--rule)", font: "500 12px/1.4 var(--sans)", color: "var(--ink-2)" }}>
            <strong style={{ color: "var(--ink)" }}>Bilgi</strong> · Canlı GSC + GA4 verisi için seo-ozgurzaman Railway MCP'sinin OAuth flow'u tamamlanmalı (https://seo-ozgurzaman.up.railway.app/auth). Bu arada Semrush TR DB'den çekilen aylık snapshot gösteriliyor.
          </div>
          <div className="kpis">
            <div className="kpi"><div className="kpi__l">Authority Score</div><div className="kpi__v">{s.authorityScore}</div><div className="kpi__d up">Semrush TR</div></div>
            <div className="kpi"><div className="kpi__l">Organik trafik (aylık)</div><div className="kpi__v">{fmt(s.organicTraffic)}</div><div className="kpi__d up">Tahmini ziyaret</div></div>
            <div className="kpi"><div className="kpi__l">Sıralanan keyword</div><div className="kpi__v">{fmt(s.organicKeywords)}</div><div className="kpi__d up">Top 100 organik</div></div>
            <div className="kpi"><div className="kpi__l">Trafik değeri</div><div className="kpi__v">${fmt(s.organicTrafficCost)}</div><div className="kpi__d up">CPC × klik</div></div>
            <div className="kpi"><div className="kpi__l">Paid keyword</div><div className="kpi__v">{fmt(s.paidKeywords)}</div><div className="kpi__d up">Ads kapsamı</div></div>
            <div className="kpi"><div className="kpi__l">Paid trafik</div><div className="kpi__v">{fmt(s.paidTraffic)}</div><div className="kpi__d up">Ads ziyaret</div></div>
            <div className="kpi"><div className="kpi__l">Referring domains</div><div className="kpi__v">{fmt(s.refDomains)}</div><div className="kpi__d up">Toplam {fmt(s.totalBacklinks)} link</div></div>
            <div className="kpi"><div className="kpi__l">Dofollow oranı</div><div className="kpi__v">%{(s.dofollowPct || 0).toFixed(1)}</div><div className="kpi__d up">Sağlıklı profil</div></div>
          </div>
        </div>
      );
    }
    return <div className="page"><div className="page__head"><h1 className="page__h1">Yükleniyor…</h1></div></div>;
  }
  const { KPIS, TRAFFIC, TOP_PAGES, MONTHLY_TRAFFIC, period } = data;
  const subText = `Son ${period.days} gün · önceki ${period.days} gün ile karşılaştırma`;
  return (
    <div className={`page ${fetching ? "is-fetching" : ""}`}>
      <div className="page__head">
        <div>
          <h1 className="page__h1">SEO performance, <em>at a glance</em>.</h1>
          <div className="page__sub">{subText}</div>
        </div>
      </div>

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

      {MONTHLY_TRAFFIC && MONTHLY_TRAFFIC.length > 0 && (
        <div className="row">
          <div className="panel">
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Aylık organik trafik</h3>
                <div className="panel__sub">Son 12 ay · GSC · <span style={{ opacity: 0.7 }}>* kısmi ay (window başı / içinde bulunulan ay)</span></div>
              </div>
              <div className="tabs">
                <button className={monthlyMetric==="clicks" ? "is-active" : ""} onClick={() => setMonthlyMetric("clicks")}>Tıklama</button>
                <button className={monthlyMetric==="imp" ? "is-active" : ""} onClick={() => setMonthlyMetric("imp")}>Gösterim</button>
              </div>
            </div>
            <div className="panel__body">
              <MonthlyBars data={MONTHLY_TRAFFIC} metric={monthlyMetric}/>
            </div>
          </div>
        </div>
      )}

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Organik trafik</h3>
              <div className="panel__sub">Günlük {metric === "clicks" ? "tıklama" : "gösterim"} · son {period.days} gün</div>
            </div>
            <div className="tabs">
              <button className={metric==="clicks" ? "is-active" : ""} onClick={() => setMetric("clicks")}>Tıklama</button>
              <button className={metric==="imp" ? "is-active" : ""} onClick={() => setMetric("imp")}>Gösterim</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 }}/>Bu dönem
              </span>
              {compare && (
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <i style={{ width: 14, height: 0, borderTop: "1px dashed var(--muted)" }}/>Önceki dönem
                </span>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Top sayfalar</h3>
              <div className="panel__sub">Organik tıklamaya göre · son {period.days} gün</div>
            </div>
          </div>
          <table className="t">
            <thead><tr>
              <th>Sayfa</th>
              <th className="num">Tıklama</th>
              <th className="num">Gösterim</th>
              <th className="num">CTR</th>
              <th className="num">Pozisyon</th>
            </tr></thead>
            <tbody>
              {TOP_PAGES.slice(0, 8).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("tr-TR")}</td>
                  <td className="num">{p.imp >= 1000 ? (p.imp/1000).toFixed(1) + "k" : p.imp}</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>
    </div>
  );
};

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