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

const KeywordsPage = ({ openDrawer }) => {
  const { data, fetching, error } = useDashData();
  if (!data) {
    if (error) return <div className="page"><div className="page__head"><h1 className="page__h1">Hata</h1><div className="page__sub">{error}</div></div></div>;
    return <div className="page"><div className="page__head"><h1 className="page__h1">Yükleniyor…</h1></div></div>;
  }
  const { KEYWORDS, period } = data;
  const top3 = KEYWORDS.filter(k => k.pos <= 3).length;
  const top10 = KEYWORDS.filter(k => k.pos <= 10).length;
  const totalImp = KEYWORDS.reduce((s, k) => s + (k.vol || 0), 0);
  return (
    <div className={`page ${fetching ? "is-fetching" : ""}`}>
      <div className="page__head">
        <div>
          <h1 className="page__h1">Keywords <em>son {period.days} gün</em></h1>
          <div className="page__sub">Top {KEYWORDS.length} sorgu · canlı GSC verisi</div>
        </div>
      </div>

      <div className="grid-3 row">
        <div className="kpi"><div className="kpi__l">Top 3 sıralama</div><div className="kpi__v">{top3}</div><div className="kpi__d" style={{color:"var(--muted)"}}>{KEYWORDS.length} sorgu içinden</div></div>
        <div className="kpi"><div className="kpi__l">Top 10 sıralama</div><div className="kpi__v">{top10}</div><div className="kpi__d" style={{color:"var(--muted)"}}>{KEYWORDS.length} sorgu içinden</div></div>
        <div className="kpi"><div className="kpi__l">Toplam gösterim</div><div className="kpi__v">{totalImp.toLocaleString("tr-TR")}</div><div className="kpi__d" style={{color:"var(--muted)"}}>son {period.days} gün</div></div>
      </div>

      <div className="panel">
        <div className="panel__head">
          <div>
            <h3 className="panel__title">Sorgular</h3>
            <div className="panel__sub">Tıklamaya göre sıralı · canlı GSC verisi</div>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Sorgu</th>
            <th className="num">Pozisyon</th>
            <th className="num">Gösterim</th>
            <th className="num">CTR</th>
            <th>Landing</th>
          </tr></thead>
          <tbody>
            {KEYWORDS.map(k => (
              <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">{k.vol.toLocaleString("tr-TR")}</td>
                <td className="num">{k.ctr}%</td>
                <td><span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-2)" }}>{k.url}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const PagesPage = ({ openDrawer }) => {
  const { data, fetching, error } = useDashData();
  if (!data) {
    if (error) return <div className="page"><div className="page__head"><h1 className="page__h1">Hata</h1><div className="page__sub">{error}</div></div></div>;
    return <div className="page"><div className="page__head"><h1 className="page__h1">Yükleniyor…</h1></div></div>;
  }
  const { TOP_PAGES, period } = data;
  return (
  <div className={`page ${fetching ? "is-fetching" : ""}`}>
    <div className="page__head">
      <div>
        <h1 className="page__h1">Pages</h1>
        <div className="page__sub">Top {TOP_PAGES.length} sayfa · son {period.days} gün · GSC tıklamaya göre sıralı</div>
      </div>
    </div>
    <div className="panel">
      <table className="t">
        <thead><tr>
          <th>URL</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.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>
  );
};

const DemoBanner = ({ what }) => (
  <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)" }}>İllüstrasyon</strong> · {what} entegrasyonu sonraki fazda. Aşağıdaki sayılar örnek değerlerdir.
  </div>
);

const BacklinksPage = () => (
  <div className="page">
    <div className="page__head">
      <div>
        <h1 className="page__h1">Backlinks</h1>
        <div className="page__sub">Yetkili kaynaklardan gelen referans linkler</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)" }}>Semrush TR</strong> · Authority Score, refdomain ve top backlink listesi Semrush'tan canlı. Toxic link analizi sonraki fazda eklenecek.
    </div>
    <div className="grid-3 row">
      <div className="kpi"><div className="kpi__l">Authority Score</div><div className="kpi__v">{SEMRUSH_OVERVIEW.authorityScore}</div><div className="kpi__d up">Semrush AS</div></div>
      <div className="kpi"><div className="kpi__l">Referring domains</div><div className="kpi__v">{SEMRUSH_OVERVIEW.refDomains.toLocaleString("tr-TR")}</div><div className="kpi__d up">Toplam {SEMRUSH_OVERVIEW.totalBacklinks.toLocaleString("tr-TR")} link</div></div>
      <div className="kpi"><div className="kpi__l">Dofollow oranı</div><div className="kpi__v">%{SEMRUSH_OVERVIEW.dofollowPct.toFixed(1)}</div><div className="kpi__d up">Sağlıklı profil</div></div>
    </div>
    <div className="panel">
      <div className="panel__head">
        <div>
          <h3 className="panel__title">Top referring domains</h3>
          <div className="panel__sub">Authority Score sırasıyla · Semrush TR, 2026-05-05</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</h1>
        <div className="page__sub">İndekslenebilirlik, CWV, schema, crawl hataları</div>
      </div>
    </div>
    <DemoBanner what="Screaming Frog + PageSpeed Insights"/>

    <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 /collections/* sayfalarda", s: "medium", u: "/collections/cilt-bakimi", f: "—" },
            { i: "404: yönlendirme yapılmamış eski ürün sayfası", s: "medium", u: "/products/eski-urun", f: "—" },
            { i: "Product schema eksik", s: "low", u: "/products/...", f: "—" },
          ].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</h1>
          <div className="page__sub">ChatGPT, Perplexity, Google AIO, Claude citation tracking</div>
        </div>
      </div>
      <DemoBanner what="AI citation crawler"/>
      <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">AI görünürlük durumu</h3>
              <div className="panel__sub">Faz 2 — entegrasyon beklemede</div>
            </div>
          </div>
          <div className="panel__body">
            <div style={{ padding: 12, background: "var(--paper)", borderRadius: 8, font: "400 13px/1.5 var(--sans)", color: "var(--ink-2)" }}>
              Justinbeauty'nin "en iyi kozmetik markaları", "online makyaj alışverişi", "cilt bakımı önerisi" gibi yüksek niyetli sorgularda AI motorlarındaki (ChatGPT, Perplexity, Google AIO, Claude) önerilme sıklığı henüz ölçülmüyor.
              <br/><br/>
              Plan: AI mention crawler entegrasyonu ile haftalık snapshot — kategori sayfaları + ürün karşılaştırma + uzun kuyruk content ile AI kaynak havuzunda yer tutmak.
            </div>
          </div>
        </div>
      </div>

      <div className="panel" style={{ marginTop: 16 }}>
        <div className="panel__head">
          <div>
            <h3 className="panel__title">Hedef sorgular ve mevcut durum</h3>
            <div className="panel__sub">Lansman sonrası tracking</div>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Engine</th><th>Sorgu</th><th>Justinbeauty önerildi mi?</th>
          </tr></thead>
          <tbody>
            {[
              { e: "ChatGPT", q: "En iyi kozmetik markaları", u: "Henüz ölçülmüyor" },
              { e: "ChatGPT", q: "Online makyaj alışverişi", u: "Henüz ölçülmüyor" },
              { e: "Perplexity", q: "Cilt bakımı önerisi", u: "Henüz ölçülmüyor" },
              { e: "Google AIO", q: "Justinbeauty güvenilir mi", u: "Henüz ölçülmüyor" },
              { e: "Claude", q: "Türkiye'nin en iyi online kozmetik siteleri", u: "Henüz ölçülmüyor" },
            ].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 style={{ fontFamily: "var(--sans)", fontSize: 12, color: "var(--ink-2)" }}>{r.u}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const CompetitorsPage = () => {
  const max = Math.max(1, ...COMPETITORS.map(c => c.clicks));
  const youIdx = COMPETITORS.findIndex(c => c.you);
  const fmtPos = (p) => p > 0 ? p : "—";
  const posColor = (p, isYou) => {
    if (p <= 0) return isYou ? "var(--bad)" : "var(--muted)";
    if (p < 10) return "var(--ok)";
    if (p < 30) return "var(--ink)";
    return "var(--ink-2)";
  };
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">Competitors</h1>
          <div className="page__sub">Share of voice — kozmetik / güzellik kümesi · Semrush TR</div>
        </div>
      </div>
      <div className="grid-2 row">
        <div className="panel">
          <div className="panel__head"><div><h3 className="panel__title">Organic clicks (aylık)</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">Authority Score</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">Justinbeauty'nin en yüksek organik trafiği getiren sorgular · Semrush TR, 2026-05-05</div>
          </div>
        </div>
        <table className="t">
          <thead><tr>
            <th>Keyword</th>
            <th className="num">Volume</th>
            {BRANDS.map((b, i) => (
              <th key={b.id} className="num">
                {i === 0 ? <strong>{b.name}</strong> : b.name}
              </th>
            ))}
          </tr></thead>
          <tbody>
            {KEYWORD_OVERLAP.map(r => (
              <tr key={r.kw}>
                <td><span className="t__url">{r.kw}</span></td>
                <td className="num">{r.vol.toLocaleString()}</td>
                {r.pos.map((p, i) => (
                  <td key={i} className="num">
                    {i === 0
                      ? <strong style={{ color: posColor(p, true) }}>{fmtPos(p)}</strong>
                      : <span style={{ color: posColor(p, false) }}>{fmtPos(p)}</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

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