// 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>
    <DemoBanner what="Ahrefs/Majestic"/>
    <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</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 /isitme-cihazi-* sayfalarda", s: "medium", u: "/isitme-cihazi-turleri", f: "24 Nis" },
            { i: "404: yönlendirme yapılmamış eski sayfa", s: "medium", u: "/eski/sgk-istemleri.html", f: "20 Nis" },
            { i: "FAQPage schema eksik", s: "low", u: "/sikca-sorulan-sorular", f: "18 Nis" },
          ].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 D = window.AI_TEST_DATA;
  const tests = D.tests;
  const engines = D.engines;

  // Compute per-engine stats from done tests only
  const byEngine = {};
  engines.forEach((e) => { byEngine[e] = { cited: 0, doneCount: 0, pending: 0, total: tests.length }; });
  tests.forEach((t) => {
    engines.forEach((e) => {
      const r = t.results[e];
      if (!r || r.status === "pending") byEngine[e].pending += 1;
      else {
        byEngine[e].doneCount += 1;
        if (r.idis) byEngine[e].cited += 1;
      }
    });
  });
  const engineRows = engines.map((e) => ({ engine: e, ...byEngine[e] }));

  // Overall stats
  const totalQueries = tests.length;
  const totalDone = tests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done").length, 0);
  const totalCited = tests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done" && t.results[e]?.idis).length, 0);
  const aiVisibilityPct = totalDone > 0 ? Math.round((totalCited / totalDone) * 100) : 0;

  // Brand vs generic split
  const brandTests = tests.filter((t) => t.type === "brand");
  const genericTests = tests.filter((t) => t.type !== "brand");
  const brandDone = brandTests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done").length, 0);
  const brandCited = brandTests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done" && t.results[e]?.idis).length, 0);
  const brandPct = brandDone > 0 ? Math.round((brandCited / brandDone) * 100) : 0;
  const genericDone = genericTests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done").length, 0);
  const genericCited = genericTests.reduce((s, t) => s + engines.filter((e) => t.results[e]?.status === "done" && t.results[e]?.idis).length, 0);
  const genericPct = genericDone > 0 ? Math.round((genericCited / genericDone) * 100) : 0;

  // Source diversity in brand queries — hangi siteler kaynak gösteriliyor
  const brandSources = {};
  brandTests.forEach((t) => engines.forEach((e) => {
    const r = t.results[e];
    if (r?.status === "done" && Array.isArray(r.sources)) {
      r.sources.forEach((src) => {
        const isIdis = /idis\.com/i.test(src);
        const key = src.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
        brandSources[key] = brandSources[key] || { count: 0, isIdis };
        brandSources[key].count += 1;
      });
    }
  }));
  const sortedBrandSources = Object.entries(brandSources).sort((a, b) => b[1].count - a[1].count);

  // Most-mentioned rival across done tests
  const rivalCounts = {};
  tests.forEach((t) => engines.forEach((e) => {
    const r = t.results[e];
    if (r?.status === "done" && Array.isArray(r.rivals)) {
      r.rivals.forEach((rv) => { rivalCounts[rv] = (rivalCounts[rv] || 0) + 1; });
    }
  }));
  const topRival = Object.entries(rivalCounts).sort((a, b) => b[1] - a[1])[0] || ["—", 0];

  // Days until next test
  const today = new Date();
  const nextDue = new Date(D.nextTestDue);
  const daysToNext = Math.ceil((nextDue - today) / (1000 * 60 * 60 * 24));

  // Action tracker — fetch live metrics
  const [tracker, setTracker] = React.useState({ loading: true, data: null, error: null });
  React.useEffect(() => {
    fetch("/api/ai-tracker")
      .then((r) => r.json())
      .then((d) => setTracker({ loading: false, data: d, error: null }))
      .catch((e) => setTracker({ loading: false, data: null, error: e.message }));
  }, []);

  const computeActionValue = (key) => {
    if (!tracker.data) return null;
    if (key === "branch_pages") return tracker.data.branchPages?.count ?? 0;
    if (key === "content_breadth") return tracker.data.blogVelocity?.count ?? 0;
    if (key === "schema_coverage") return tracker.data.schema?.coveragePercent ?? 0;
    if (key === "ai_visibility_score") return aiVisibilityPct;
    return null;
  };

  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">AI mentions <em>manuel test snapshot</em></h1>
          <div className="page__sub">
            Son test: <strong>{D.lastTested}</strong> ({D.tester}) · Sonraki: <strong>{D.nextTestDue}</strong>
            {daysToNext >= 0 ? ` (${daysToNext} gün kaldı)` : ` (${Math.abs(daysToNext)} gün geçti)`}
            {" · "}{tests.length} sorgu × {engines.length} motor = {tests.length * engines.length} hücre, {totalDone} dolu / {tests.length * engines.length - totalDone} bekliyor
          </div>
        </div>
      </div>

      <div className="grid-3 row">
        <div className="kpi">
          <div className="kpi__l">AI görünürlük</div>
          <div className="kpi__v" style={{color: aiVisibilityPct === 0 ? "var(--bad)" : aiVisibilityPct < 30 ? "var(--ink)" : "var(--ok)"}}>
            {aiVisibilityPct}%
          </div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>{totalCited} / {totalDone} test edilen hücrede IDIS önerildi</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">Test ilerlemesi</div>
          <div className="kpi__v">{totalDone} / {tests.length * engines.length}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>{Math.round((totalDone / (tests.length * engines.length)) * 100)}% tamam · ChatGPT/Gemini/AIO bekliyor</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">Önde gelen rakip</div>
          <div className="kpi__v" style={{fontSize:24}}>{topRival[0]}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Test edilen cevaplarda {topRival[1]} kez geçti</div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Brand sorgularda görünürlük</h3>
              <div className="panel__sub">
                "İdis fiyatları", "İdis Kadıköy şubesi" gibi sorgularda IDIS'i AI nasıl temsil ediyor — brand reputation kontrolü
              </div>
            </div>
          </div>
          <div className="panel__body">
            <div className="grid-3 row" style={{ marginBottom: 18 }}>
              <div className="kpi">
                <div className="kpi__l">Brand sorgu görünürlüğü</div>
                <div className="kpi__v" style={{color: brandPct >= 60 ? "var(--ok)" : brandPct >= 30 ? "var(--warn)" : "var(--bad)"}}>{brandPct}%</div>
                <div className="kpi__d" style={{color:"var(--muted)"}}>{brandCited} / {brandDone} brand testi · {brandTests.length} sorgu</div>
              </div>
              <div className="kpi">
                <div className="kpi__l">Jenerik sorgu görünürlüğü</div>
                <div className="kpi__v" style={{color: genericPct === 0 ? "var(--bad)" : "var(--ink)"}}>{genericPct}%</div>
                <div className="kpi__d" style={{color:"var(--muted)"}}>{genericCited} / {genericDone} jenerik testi · {genericTests.length} sorgu</div>
              </div>
              <div className="kpi">
                <div className="kpi__l">Brand-jenerik açığı</div>
                <div className="kpi__v">{brandPct - genericPct} pp</div>
                <div className="kpi__d" style={{color:"var(--muted)"}}>Yüksek açık = isimimizi bilseler bile jeneriğe geçemiyoruz</div>
              </div>
            </div>

            <h4 style={{ font: "600 13px/1 var(--sans)", margin: "0 0 10px" }}>Brand sorgu detayı (her satır = 1 sorgu)</h4>
            <table className="t" style={{ marginBottom: 18 }}>
              <thead><tr>
                <th>Sorgu</th>
                <th style={{ textAlign: "center" }}>AI cevabı IDIS'i kapsıyor mu</th>
                <th>Kaynaklar (hangi siteden bilgi çekildi)</th>
                <th>Bulgu</th>
              </tr></thead>
              <tbody>
                {brandTests.map((t, i) => {
                  const done = engines.filter((e) => t.results[e]?.status === "done");
                  if (done.length === 0) return null;
                  const anyIdis = done.some((e) => t.results[e].idis);
                  const allSources = [...new Set(done.flatMap((e) => t.results[e].sources || []))];
                  const idisSource = allSources.some((s) => /idis\.com/i.test(s));
                  const note = done.map((e) => t.results[e].note).filter(Boolean)[0] || "";
                  return (
                    <tr key={i}>
                      <td><span style={{ font: "italic 400 13px/1.3 var(--serif)" }}>"{t.query}"</span></td>
                      <td style={{ textAlign: "center" }}>
                        <span className={`badge ${anyIdis ? "badge--ok" : "badge--rust"}`}>{anyIdis ? "Var" : "Yok"}</span>
                      </td>
                      <td>
                        {allSources.length === 0 ? <span style={{color:"var(--muted)", fontSize: 11}}>—</span> :
                          allSources.map((src, j) => (
                            <span key={j} style={{
                              display: "inline-block", padding: "2px 8px", marginRight: 4, marginBottom: 2,
                              fontSize: 11, fontFamily: "var(--mono)", borderRadius: 4,
                              background: /idis\.com/i.test(src) ? "var(--paper-2)" : "rgba(181,83,46,0.12)",
                              color: /idis\.com/i.test(src) ? "var(--ok)" : "var(--bad)",
                              border: `1px solid ${/idis\.com/i.test(src) ? "var(--ok)" : "var(--bad)"}`,
                            }}>{src}</span>
                          ))
                        }
                        {!idisSource && allSources.length > 0 && (
                          <div style={{ fontSize: 11, color: "var(--bad)", marginTop: 4 }}>idis.com kaynak değil</div>
                        )}
                      </td>
                      <td><span style={{ font: "400 12px/1.4 var(--sans)", color: "var(--ink-2)" }}>{note.slice(0, 140)}{note.length > 140 ? "…" : ""}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            <h4 style={{ font: "600 13px/1 var(--sans)", margin: "0 0 10px" }}>Brand sorgularda hangi siteler kaynak gösteriliyor</h4>
            <div style={{ display: "grid", gap: 6 }}>
              {sortedBrandSources.map(([src, info]) => {
                const isIdis = /idis\.com/i.test(src);
                const max = sortedBrandSources[0]?.[1]?.count || 1;
                const pct = (info.count / max) * 100;
                return (
                  <div key={src} style={{ display: "grid", gridTemplateColumns: "200px 1fr 50px", gap: 12, alignItems: "center" }}>
                    <div style={{ font: "500 12px/1.2 var(--mono)", color: isIdis ? "var(--ok)" : "var(--bad)" }}>
                      {src} {isIdis ? "(IDIS)" : "(rakip/3.parti)"}
                    </div>
                    <div style={{ height: 8, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden" }}>
                      <div style={{ width: `${Math.max(pct, 3)}%`, height: "100%", background: isIdis ? "var(--ok)" : "var(--bad)", borderRadius: 999, transition: "width 0.6s ease" }}/>
                    </div>
                    <div style={{ font: "500 12px/1 var(--mono)", color: "var(--muted)", textAlign: "right" }}>{info.count}×</div>
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 18, padding: 14, background: "var(--paper)", borderRadius: 8, border: "1px solid var(--rule)", font: "400 13px/1.55 var(--sans)", color: "var(--ink-2)" }}>
              <strong style={{ color: "var(--ink)", display: "block", marginBottom: 6 }}>Çıkarım</strong>
              Brand sorgularda <strong>{brandPct}%</strong> görünürlük var ama tablo şunu gösteriyor: <strong>şube sorguları (Kadıköy, Hoşdere) idis.com'u kaynak alıp doğru bilgi veriyor</strong>; <strong>bilgi sorguları (fiyat, SGK, yorum)</strong> ise ya boş geçiliyor ya da rakip/üçüncü parti sitelerden (uzmanseswidex, sikayetvar, sgk.gov) bilgi çekiyor. Şube sayfası formatı doğru çalıştığına göre, aynı yapılandırılmış bilgi (LocalBusiness + adres + telefon) <strong>SGK destegi, fiyatlar ve yorumlar sayfalarına</strong> da uygulanmalı.
            </div>
          </div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Eylem tracker · 14 Nisan planının ilerleyişi</h3>
              <div className="panel__sub">
                {tracker.loading ? "GSC + schema kontrolleri yapılıyor…" : tracker.error ? `Hata: ${tracker.error}` : "GSC verisinden + canlı schema fetch'ten ölçülüyor"}
              </div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 16 }}>
            {D.actions.map((a) => {
              const v = computeActionValue(a.key);
              const pct = v == null ? 0 : Math.min(100, Math.round((v / a.target) * 100));
              const tone = pct >= 80 ? "var(--ok)" : pct >= 40 ? "var(--warn)" : "var(--bad)";
              return (
                <div key={a.key} style={{ display: "grid", gridTemplateColumns: "1fr 100px 200px 80px", gap: 16, alignItems: "center", paddingBottom: 14, borderBottom: "1px solid var(--rule)" }}>
                  <div>
                    <div style={{ font: "600 14px/1.3 var(--sans)", color: "var(--ink)" }}>{a.title}</div>
                    <div style={{ font: "400 12px/1.4 var(--sans)", color: "var(--ink-2)", marginTop: 4 }}>{a.description}</div>
                    <div style={{ font: "400 11px/1.3 var(--mono)", color: "var(--muted)", marginTop: 6 }}>{a.sourceNote}</div>
                  </div>
                  <div style={{ font: "600 22px/1 var(--serif)", textAlign: "right", color: tone }}>
                    {v == null ? "…" : v}
                    <span style={{ font: "400 11px/1 var(--mono)", color: "var(--muted)", marginLeft: 4 }}>/ {a.target} {a.unit}</span>
                  </div>
                  <div style={{ height: 10, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{ width: `${Math.max(pct, 2)}%`, height: "100%", background: tone, borderRadius: 999, transition: "width 0.6s ease" }}/>
                  </div>
                  <div style={{ font: "500 13px/1 var(--mono)", color: "var(--muted)", textAlign: "right" }}>{pct}%</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Motor bazında IDIS görünürlüğü</h3>
              <div className="panel__sub">Tamamlanan testlerden hesaplanıyor · bekleyen test sayısı sağda</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 12 }}>
            {engineRows.map(r => {
              const pct = r.doneCount > 0 ? (r.cited / r.doneCount) * 100 : 0;
              return (
                <div key={r.engine} style={{ display: "grid", gridTemplateColumns: "120px 1fr 140px", gap: 12, alignItems: "center" }}>
                  <div style={{ font: "600 13px/1.2 var(--sans)" }}>{r.engine}</div>
                  <div style={{ height: 10, background: "var(--paper-2)", borderRadius: 999, overflow: "hidden", position: "relative" }}>
                    <div style={{
                      width: `${Math.max(pct, 2)}%`,
                      height: "100%",
                      background: pct === 0 ? "var(--bad)" : pct < 30 ? "var(--warn)" : "var(--ok)",
                      borderRadius: 999,
                      transition: "width 0.6s ease",
                    }}/>
                  </div>
                  <div style={{ font: "500 12px/1.3 var(--mono)", color: "var(--muted)", textAlign: "right" }}>
                    {r.cited} / {r.doneCount} cited{r.pending > 0 ? ` · ${r.pending} bekliyor` : ""}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Test matrisi</h3>
              <div className="panel__sub">Sorgu × motor — yeşil: önerildi · kırmızı: yok · sarı: bekliyor (manuel test gerek)</div>
            </div>
          </div>
          <table className="t">
            <thead><tr>
              <th>Sorgu</th>
              <th>Tip</th>
              {engines.map((e) => <th key={e} style={{ textAlign: "center" }}>{e}</th>)}
            </tr></thead>
            <tbody>
              {tests.map((t, i) => (
                <tr key={i}>
                  <td><span style={{ font: "italic 400 13px/1.3 var(--serif)" }}>"{t.query}"</span></td>
                  <td><span className="badge" style={{ background: "var(--paper-2)", color: "var(--ink-2)" }}>{t.type}</span></td>
                  {engines.map((e) => {
                    const r = t.results[e];
                    if (!r || r.status === "pending") {
                      return <td key={e} style={{ textAlign: "center" }}><span className="badge badge--warn">bekliyor</span></td>;
                    }
                    return (
                      <td key={e} style={{ textAlign: "center" }} title={r.note || ""}>
                        <span className={`badge ${r.idis ? "badge--ok" : "badge--rust"}`}>
                          {r.idis ? "Var" : "Yok"}
                        </span>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Detaylı test cevapları</h3>
              <div className="panel__sub">Hangi rakipler/kaynaklar geçti — AI'nın hangi sitelerden bilgi çektiğini gör</div>
            </div>
          </div>
          <div className="panel__body" style={{ display: "grid", gap: 14 }}>
            {tests.map((t, i) => {
              const done = engines.filter((e) => t.results[e]?.status === "done");
              if (done.length === 0) return null;
              return (
                <div key={i} style={{ padding: 14, background: "var(--paper)", borderRadius: 8, border: "1px solid var(--rule)" }}>
                  <div style={{ font: "600 14px/1.3 var(--sans)", color: "var(--ink)", marginBottom: 4 }}>
                    "{t.query}" <span style={{ font: "400 11px/1 var(--mono)", color: "var(--muted)" }}>· {t.type}</span>
                  </div>
                  <div style={{ display: "grid", gap: 6, marginTop: 8 }}>
                    {done.map((e) => {
                      const r = t.results[e];
                      return (
                        <div key={e} style={{ display: "grid", gridTemplateColumns: "100px 60px 1fr", gap: 10, alignItems: "start" }}>
                          <div style={{ font: "600 12px/1.4 var(--sans)" }}>{e}</div>
                          <div>
                            <span className={`badge ${r.idis ? "badge--ok" : "badge--rust"}`}>{r.idis ? "Var" : "Yok"}</span>
                          </div>
                          <div style={{ font: "400 12px/1.5 var(--sans)", color: "var(--ink-2)" }}>
                            {r.rivals?.length > 0 && (
                              <div><strong>Önerdiği:</strong> {r.rivals.join(", ")}</div>
                            )}
                            {r.sources?.length > 0 && (
                              <div style={{ marginTop: 2 }}><strong>Kaynaklar:</strong> {r.sources.join(", ")}</div>
                            )}
                            {r.note && <div style={{ marginTop: 4, fontStyle: "italic", color: "var(--muted)" }}>{r.note}</div>}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="row">
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Bekleyen manuel testler</h3>
              <div className="panel__sub">Aşağıdaki sorguları bu motorlarda elle test et, sonuçları src/ai-tests-data.jsx'e işle</div>
            </div>
          </div>
          <table className="t">
            <thead><tr><th>Sorgu</th><th>Bekleyen motorlar</th></tr></thead>
            <tbody>
              {tests.map((t, i) => {
                const pending = engines.filter((e) => !t.results[e] || t.results[e].status === "pending");
                if (pending.length === 0) return null;
                return (
                  <tr key={i}>
                    <td><span style={{ font: "italic 400 13px/1.3 var(--serif)" }}>"{t.query}"</span></td>
                    <td>{pending.map((e) => <span key={e} className="badge badge--warn" style={{ marginRight: 4 }}>{e}</span>)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const CompetitorsPage = () => {
  const max = Math.max(...COMPETITORS.map(c => c.clicks));
  const youIdx = COMPETITORS.findIndex(c => c.you);
  const fmtPos = (p) => p > 0 ? p : "—";
  const fmtPosLive = (p) => (p == null ? "—" : p);
  const posColor = (p, isYou) => {
    if (p <= 0 || p == null) return isYou ? "var(--bad)" : "var(--muted)";
    if (p < 10) return "var(--ok)";
    if (p < 30) return "var(--ink)";
    return "var(--ink-2)";
  };
  const [serp, setSerp] = React.useState({ loading: true, data: null, error: null });
  React.useEffect(() => {
    fetch("/api/serp-positions")
      .then((r) => r.json())
      .then((d) => setSerp({ loading: false, data: d, error: d.error || null }))
      .catch((e) => setSerp({ loading: false, data: null, error: e.message }));
  }, []);
  const serpResults = serp.data?.results || [];
  const serpBrands = serp.data?.brands || [];
  return (
    <div className="page">
      <div className="page__head">
        <div>
          <h1 className="page__h1">Competitors</h1>
          <div className="page__sub">Share of voice — işitme cihazı / odyoloji kümesi · Semrush TR + canlı SERP (SerpApi)</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" style={{ marginBottom: 16 }}>
        <div className="panel__head">
          <div>
            <h3 className="panel__title">Yüksek hacimli kelimelerde canlı SERP</h3>
            <div className="panel__sub">
              {serp.loading
                ? "SerpApi'dan canlı pozisyonlar çekiliyor (~30 sn)…"
                : serp.error
                ? `Hata: ${serp.error}`
                : `Google.com.tr · ${serpResults.length} keyword · son güncelleme ${serp.data?.fetchedAt ? new Date(serp.data.fetchedAt).toLocaleString("tr-TR") : "—"}`}
            </div>
          </div>
        </div>
        {!serp.loading && serpResults.length > 0 && (
          <table className="t">
            <thead><tr>
              <th>Keyword</th>
              <th className="num">Hacim</th>
              {serpBrands.map((b) => (
                <th key={b.domain} className="num">
                  {b.you ? <strong>{b.name}</strong> : b.name}
                </th>
              ))}
            </tr></thead>
            <tbody>
              {serpResults
                .slice()
                .sort((a, b) => b.volume - a.volume)
                .map((r) => (
                <tr key={r.keyword}>
                  <td><span className="t__url">{r.keyword}</span></td>
                  <td className="num">{r.volume.toLocaleString("tr-TR")}</td>
                  {serpBrands.map((b) => {
                    const found = (r.positions || []).find((p) => p.domain === b.domain);
                    const pos = found?.position;
                    return (
                      <td key={b.domain} className="num">
                        {b.you
                          ? <strong style={{ color: posColor(pos, true) }}>{fmtPosLive(pos)}</strong>
                          : <span style={{ color: posColor(pos, false) }}>{fmtPosLive(pos)}</span>}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <div className="panel">
        <div className="panel__head">
          <div><h3 className="panel__title">Keyword overlap (statik referans)</h3>
            <div className="panel__sub">Semrush TR, Nisan 2026 · haftalık manuel refresh</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 });