// Opportunities, Site Health, GA4 Detail pages
// Each fetches its own endpoint (separate from /api/dashboard) so heavier
// MCP queries don't block the main load.

const useEndpoint = (path, range) => {
  const [state, setState] = React.useState({ loading: true, fetching: true, data: null, error: null });
  React.useEffect(() => {
    let cancelled = false;
    setState((s) => ({ ...s, fetching: true, error: null }));
    fetch(`${path}?range=${range}`)
      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); })
      .then((raw) => { if (!cancelled) setState({ loading: false, fetching: false, data: raw, error: null }); })
      .catch((err) => { if (!cancelled) setState((s) => ({ ...s, loading: !s.data, fetching: false, error: err.message })); });
    return () => { cancelled = true; };
  }, [path, range]);
  return state;
};

const PageHeader = ({ title, sub, days }) => (
  <div className="page__head">
    <div>
      <h1 className="page__h1">{title}{days ? <em> son {days} gün</em> : null}</h1>
      <div className="page__sub">{sub}</div>
    </div>
  </div>
);

const StatePanel = ({ loading, error, empty, children }) => {
  if (loading) return <div className="panel" style={{ padding: 24, color: "var(--muted)" }}>Yükleniyor…</div>;
  if (error) return <div className="panel" style={{ padding: 24, color: "var(--bad)" }}>Hata: {error}</div>;
  if (empty) return <div className="panel" style={{ padding: 24, color: "var(--muted)" }}>{empty}</div>;
  return children;
};

// ─── Opportunities ──────────────────────────────────────────────────────
const OpportunitiesPage = () => {
  const range = React.useContext(RangeContext);
  const { loading, error, data } = useEndpoint("/api/opportunities", range);
  const days = data?.days || 28;
  const quickWins = data?.quickWins || [];
  const ctrOpps = data?.ctrOpps || [];
  const contentGaps = data?.contentGaps || [];
  const ctrBenchmark = data?.ctrBenchmark || [];

  const totalOpportunity = quickWins.reduce((s, q) => s + (q.opportunity || 0), 0);
  const totalExtraClicks = ctrOpps.reduce((s, p) => s + (p.potentialExtraClicks || 0), 0);

  return (
    <div className={`page ${data ? "" : "is-fetching"}`}>
      <PageHeader title="Opportunities" sub="Quick wins, CTR optimizasyonu, içerik açıkları — canlı GSC verisi" days={days}/>

      <div className="grid-3 row">
        <div className="kpi">
          <div className="kpi__l">Quick wins (4-15 pos)</div>
          <div className="kpi__v">{quickWins.length}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Toplam fırsat skoru {totalOpportunity}</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">CTR potansiyeli</div>
          <div className="kpi__v">{totalExtraClicks.toLocaleString("tr-TR")}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Title/meta optimize edilirse ek tıklama</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">İçerik açıkları</div>
          <div className="kpi__v">{contentGaps.length}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Pos 20+ ama gösterim alıyor</div>
        </div>
      </div>

      <StatePanel loading={loading} error={error} empty={!quickWins.length ? "Quick wins bulunamadı" : null}>
        <div className="panel" style={{ marginBottom: 16 }}>
          <div className="panel__head">
            <div>
              <h3 className="panel__title">Quick wins — sayfa 1'e yakın sorgular</h3>
              <div className="panel__sub">Pozisyon 4-15 + 100+ gösterim · fırsat skoruna göre sıralı</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">Tıklama</th>
              <th className="num">CTR</th>
              <th className="num">Fırsat</th>
            </tr></thead>
            <tbody>
              {quickWins.map((q) => (
                <tr key={q.query}>
                  <td><span className="t__url">{q.query}</span></td>
                  <td className="num"><span className={`pos ${q.position<5?"t1":q.position<10?"t2":"t3"}`}>{q.position}</span></td>
                  <td className="num">{q.impressions.toLocaleString("tr-TR")}</td>
                  <td className="num">{q.clicks}</td>
                  <td className="num">{q.ctr}%</td>
                  <td className="num"><strong style={{color:"var(--rust)"}}>{q.opportunity}</strong></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </StatePanel>

      {ctrOpps.length > 0 && (
        <div className="panel" style={{ marginBottom: 16 }}>
          <div className="panel__head">
            <div>
              <h3 className="panel__title">CTR optimizasyon adayları</h3>
              <div className="panel__sub">Yüksek gösterim, beklentinin altında CTR — title/meta yenilenmeli</div>
            </div>
          </div>
          <table className="t">
            <thead><tr>
              <th>Sayfa</th>
              <th className="num">Pozisyon</th>
              <th className="num">Gösterim</th>
              <th className="num">CTR</th>
              <th className="num">Beklenen</th>
              <th className="num">Potansiyel +tıklama</th>
            </tr></thead>
            <tbody>
              {ctrOpps.slice(0, 20).map((p) => (
                <tr key={p.page}>
                  <td><span className="t__url" style={{fontFamily:"var(--mono)",fontSize:12}}>{(p.page||"").replace(/^https?:\/\/[^/]+/, "") || "/"}</span></td>
                  <td className="num">{p.position}</td>
                  <td className="num">{p.impressions.toLocaleString("tr-TR")}</td>
                  <td className="num">{p.ctr}%</td>
                  <td className="num">{p.expectedCtr}%</td>
                  <td className="num"><strong style={{color:"var(--ok)"}}>+{p.potentialExtraClicks.toLocaleString("tr-TR")}</strong></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {contentGaps.length > 0 && (
        <div className="panel" style={{ marginBottom: 16 }}>
          <div className="panel__head">
            <div>
              <h3 className="panel__title">İçerik açıkları</h3>
              <div className="panel__sub">Talep var, sayfa yetersiz — yeni içerik üretilmeli</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">Tıklama</th>
            </tr></thead>
            <tbody>
              {contentGaps.map((g) => (
                <tr key={g.query}>
                  <td><span className="t__url">{g.query}</span></td>
                  <td className="num"><span className="pos t4">{g.position}</span></td>
                  <td className="num">{g.impressions.toLocaleString("tr-TR")}</td>
                  <td className="num">{g.clicks}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {ctrBenchmark.length > 0 && (
        <div className="panel">
          <div className="panel__head">
            <div>
              <h3 className="panel__title">CTR benchmark karşılaştırması</h3>
              <div className="panel__sub">Sektör ortalamasının altında performans gösteren sayfalar</div>
            </div>
          </div>
          <table className="t">
            <thead><tr>
              <th>Sayfa</th>
              <th className="num">Pozisyon</th>
              <th className="num">Gerçek CTR</th>
              <th className="num">Benchmark</th>
              <th className="num">Fark</th>
            </tr></thead>
            <tbody>
              {ctrBenchmark.slice(0, 15).map((p, i) => (
                <tr key={(p.page||"") + i}>
                  <td><span className="t__url" style={{fontFamily:"var(--mono)",fontSize:12}}>{(p.page||"").replace(/^https?:\/\/[^/]+/, "") || "/"}</span></td>
                  <td className="num">{p.position}</td>
                  <td className="num">{p.ctr}%</td>
                  <td className="num">{p.expectedCtr}%</td>
                  <td className="num"><span className={`badge ${p.ctrGap > 5 ? "badge--rust" : "badge--warn"}`}>−{p.ctrGap}%</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

// ─── Site Health ────────────────────────────────────────────────────────
const SiteHealthPage = () => {
  const range = React.useContext(RangeContext);
  const { loading, error, data } = useEndpoint("/api/health", range);
  const days = data?.days || 28;
  const drops = data?.trafficDrops || [];
  const cannibal = data?.cannibalization || [];
  const sitemaps = (data?.sitemaps?.sitemaps) || [];
  const decay = data?.contentDecay || [];

  const totalLost = drops.reduce((s, d) => s + Math.abs(d.clickChange || 0), 0);
  const rankingLossCount = drops.filter(d => /Ranking loss/i.test(d.diagnosis || "")).length;
  const ctrCollapseCount = drops.filter(d => /CTR collapse/i.test(d.diagnosis || "")).length;

  return (
    <div className={`page ${data ? "" : "is-fetching"}`}>
      <PageHeader title="Site Health" sub="Trafik düşüşleri, kanibalizasyon, sitemap durumu — canlı GSC verisi" days={days}/>

      <div className="grid-3 row">
        <div className="kpi">
          <div className="kpi__l">Düşüş yaşayan sayfa</div>
          <div className="kpi__v" style={{color: drops.length > 0 ? "var(--bad)" : "var(--ok)"}}>{drops.length}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>{totalLost} tıklama kayıp</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">Sıralama kaybı</div>
          <div className="kpi__v">{rankingLossCount}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Pozisyon düşmüş sayfalar</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">CTR çöküşü</div>
          <div className="kpi__v">{ctrCollapseCount}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>Sıra aynı, tıklama düştü</div>
        </div>
      </div>

      <StatePanel loading={loading} error={error}>
        {sitemaps.length > 0 && (
          <div className="panel" style={{ marginBottom: 16 }}>
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Sitemap durumu</h3>
                <div className="panel__sub">Search Console'a gönderilmiş sitemap'ler</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Sitemap</th>
                <th className="num">Gönderildi</th>
                <th className="num">İndekslenmiş</th>
                <th className="num">Uyarı</th>
                <th className="num">Hata</th>
                <th>Son indirme</th>
              </tr></thead>
              <tbody>
                {sitemaps.map((s) => (
                  <tr key={s.path}>
                    <td><span className="t__url" style={{fontFamily:"var(--mono)",fontSize:12}}>{s.path}</span></td>
                    <td className="num">{s.contents?.[0]?.submitted ?? "—"}</td>
                    <td className="num">{s.contents?.[0]?.indexed ?? 0}</td>
                    <td className="num">{s.warnings > 0 ? <span className="badge badge--warn">{s.warnings}</span> : 0}</td>
                    <td className="num">{s.errors > 0 ? <span className="badge badge--rust">{s.errors}</span> : 0}</td>
                    <td><span style={{fontFamily:"var(--mono)",fontSize:12,color:"var(--ink-2)"}}>{s.lastDownloaded ? s.lastDownloaded.slice(0,10) : "—"}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {drops.length > 0 && (
          <div className="panel" style={{ marginBottom: 16 }}>
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Trafik düşüşleri</h3>
                <div className="panel__sub">Önceki döneme göre tıklama kaybı yaşayan sayfalar + tanı</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Sayfa</th>
                <th className="num">Şimdi</th>
                <th className="num">Önceki</th>
                <th className="num">Δ tıklama</th>
                <th className="num">Pozisyon Δ</th>
                <th>Tanı</th>
              </tr></thead>
              <tbody>
                {drops.slice(0, 25).map((d) => (
                  <tr key={d.page}>
                    <td><span className="t__url" style={{fontFamily:"var(--mono)",fontSize:12}}>{(d.page||"").replace(/^https?:\/\/[^/]+/, "") || "/"}</span></td>
                    <td className="num">{d.currentClicks}</td>
                    <td className="num">{d.priorClicks}</td>
                    <td className="num"><strong style={{color:"var(--bad)"}}>{d.clickChange}</strong></td>
                    <td className="num">{d.positionChange > 0 ? "+" : ""}{d.positionChange}</td>
                    <td>
                      <span className={`badge ${/Ranking loss/i.test(d.diagnosis) ? "badge--rust" : /CTR collapse/i.test(d.diagnosis) ? "badge--warn" : ""}`}>
                        {d.diagnosis}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {cannibal.length > 0 && (
          <div className="panel" style={{ marginBottom: 16 }}>
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Keyword kanibalizasyonu</h3>
                <div className="panel__sub">Aynı sorguda yarışan birden fazla sayfa</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Sorgu</th>
                <th>En iyi sayfa</th>
                <th className="num">Pos</th>
                <th>Yarışan sayfa</th>
                <th className="num">Pos</th>
                <th className="num">Toplam gösterim</th>
              </tr></thead>
              <tbody>
                {cannibal.slice(0, 15).map((c, i) => (
                  <tr key={(c.query||"") + i}>
                    <td><span className="t__url">{c.query}</span></td>
                    <td><span style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--ink-2)"}}>{(c.winner_page||c.bestPage||"").replace(/^https?:\/\/[^/]+/, "") || "—"}</span></td>
                    <td className="num">{c.winner_position ?? c.bestPosition ?? "—"}</td>
                    <td><span style={{fontFamily:"var(--mono)",fontSize:11,color:"var(--ink-2)"}}>{(c.loser_page||c.competingPage||"").replace(/^https?:\/\/[^/]+/, "") || "—"}</span></td>
                    <td className="num">{c.loser_position ?? c.competingPosition ?? "—"}</td>
                    <td className="num">{(c.total_impressions ?? c.totalImpressions ?? 0).toLocaleString("tr-TR")}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {decay.length > 0 && (
          <div className="panel">
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Yavaş ölen içerikler</h3>
                <div className="panel__sub">3 ay üst üste düşüş — yenilenmeli</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Sayfa</th>
                <th className="num">Şimdi</th>
                <th className="num">3 ay önce</th>
                <th className="num">Toplam Δ</th>
              </tr></thead>
              <tbody>
                {decay.slice(0, 15).map((d, i) => (
                  <tr key={(d.page||"") + i}>
                    <td><span className="t__url" style={{fontFamily:"var(--mono)",fontSize:12}}>{(d.page||"").replace(/^https?:\/\/[^/]+/, "") || "/"}</span></td>
                    <td className="num">{d.current_clicks ?? d.currentClicks ?? "—"}</td>
                    <td className="num">{d.oldest_clicks ?? d.oldestClicks ?? "—"}</td>
                    <td className="num"><strong style={{color:"var(--bad)"}}>{d.total_change ?? d.totalChange ?? "—"}</strong></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </StatePanel>
    </div>
  );
};

// ─── GA4 Detail ─────────────────────────────────────────────────────────
const GA4Page = () => {
  const range = React.useContext(RangeContext);
  const { loading, error, data } = useEndpoint("/api/ga4-detail", range);
  const days = data?.days || 28;
  const sources = data?.trafficSources?.rows || [];
  const events = data?.topEvents?.rows || [];
  const pages = data?.topPages?.rows || [];
  const overview = data?.overview?.rows?.[0] || {};

  const totalSessions = sources.reduce((s, r) => s + (r.sessions || 0), 0);
  const totalConversions = sources.reduce((s, r) => s + (r.conversions || 0), 0);

  return (
    <div className={`page ${data ? "" : "is-fetching"}`}>
      <PageHeader title="GA4 Analytics" sub="Trafik kaynakları, etkinlikler, dönüşümler — canlı GA4 verisi" days={days}/>

      <div className="grid-3 row">
        <div className="kpi">
          <div className="kpi__l">Aktif kullanıcı</div>
          <div className="kpi__v">{(overview.activeUsers || 0).toLocaleString("tr-TR")}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>son {days} gün</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">Oturum</div>
          <div className="kpi__v">{(overview.sessions || totalSessions).toLocaleString("tr-TR")}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>{sources.length} farklı kaynak</div>
        </div>
        <div className="kpi">
          <div className="kpi__l">Dönüşüm</div>
          <div className="kpi__v">{(overview.conversions || totalConversions).toLocaleString("tr-TR")}</div>
          <div className="kpi__d" style={{color:"var(--muted)"}}>tüm kanallar</div>
        </div>
      </div>

      <StatePanel loading={loading} error={error}>
        {sources.length > 0 && (
          <div className="panel" style={{ marginBottom: 16 }}>
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Trafik kaynakları (kaynak / kanal)</h3>
                <div className="panel__sub">Oturum sayısına göre sıralı</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Kaynak</th>
                <th>Kanal</th>
                <th className="num">Oturum</th>
                <th className="num">Aktif kullanıcı</th>
                <th className="num">Dönüşüm</th>
                <th className="num">Pay</th>
              </tr></thead>
              <tbody>
                {sources.slice(0, 20).map((r, i) => {
                  const share = totalSessions > 0 ? (r.sessions / totalSessions) * 100 : 0;
                  return (
                    <tr key={i}>
                      <td><span className="t__url">{r.sessionSource || "—"}</span></td>
                      <td><span style={{fontFamily:"var(--mono)",fontSize:12,color:"var(--ink-2)"}}>{r.sessionMedium || "—"}</span></td>
                      <td className="num">{r.sessions.toLocaleString("tr-TR")}</td>
                      <td className="num">{r.activeUsers.toLocaleString("tr-TR")}</td>
                      <td className="num">{r.conversions.toLocaleString("tr-TR")}</td>
                      <td className="num">{share.toFixed(1)}%</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {events.length > 0 && (
          <div className="panel" style={{ marginBottom: 16 }}>
            <div className="panel__head">
              <div>
                <h3 className="panel__title">Top etkinlikler</h3>
                <div className="panel__sub">Etkinlik sayısına göre sıralı</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Etkinlik adı</th>
                <th className="num">Sayı</th>
                <th className="num">Kullanıcı başına</th>
              </tr></thead>
              <tbody>
                {events.slice(0, 15).map((r, i) => (
                  <tr key={i}>
                    <td><span className="t__url">{r.eventName}</span></td>
                    <td className="num">{(r.eventCount || 0).toLocaleString("tr-TR")}</td>
                    <td className="num">{r.eventCountPerUser ? r.eventCountPerUser.toFixed(2) : "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {pages.length > 0 && (
          <div className="panel">
            <div className="panel__head">
              <div>
                <h3 className="panel__title">GA4 Top sayfalar</h3>
                <div className="panel__sub">Sayfa görüntüleme + ortalama oturum süresi</div>
              </div>
            </div>
            <table className="t">
              <thead><tr>
                <th>Yol</th>
                <th>Başlık</th>
                <th className="num">Görüntüleme</th>
                <th className="num">Aktif kullanıcı</th>
              </tr></thead>
              <tbody>
                {pages.slice(0, 15).map((r, i) => (
                  <tr key={i}>
                    <td><span style={{fontFamily:"var(--mono)",fontSize:12}}>{r.pagePath || "—"}</span></td>
                    <td><span style={{fontSize:12,color:"var(--ink-2)"}}>{(r.pageTitle || "").slice(0, 60)}</span></td>
                    <td className="num">{(r.screenPageViews || r.views || 0).toLocaleString("tr-TR")}</td>
                    <td className="num">{(r.activeUsers || 0).toLocaleString("tr-TR")}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </StatePanel>
    </div>
  );
};

const RangeContext = React.createContext("30d");

Object.assign(window, { OpportunitiesPage, SiteHealthPage, GA4Page, RangeContext });