{% extends "_panel.html" %}
{% block title %}seoGeo — Denetimler{% endblock %}
{% block content %}
<header class="top">
  <h1>SEO &amp; GEO denetimi</h1>
  <span class="muted">Siteyi tara · yapay zekâ cevap motorlarında görünürlüğünü ölç · önceliklendirilmiş aksiyon planı al</span>
</header>

{% if kpis.sites %}
<div class="grid kpis">
  <div class="kpi-card"><div class="v">{{ kpis.sites }}</div><div class="k">izlenen site</div></div>
  <div class="kpi-card"><div class="v">{{ kpis.audits }}</div><div class="k">toplam denetim</div></div>
  <div class="kpi-card"><div class="v">{{ kpis.seo_avg }}<span class="muted" style="font-size:14px">/100</span></div><div class="k">ort. SEO skoru</div></div>
  <div class="kpi-card"><div class="v">{{ kpis.geo_avg }}<span class="muted" style="font-size:14px">/100</span></div><div class="k">ort. GEO skoru</div></div>
  <div class="kpi-card"><div class="v" style="color: {{ 'var(--crit)' if kpis.criticals else 'var(--ok)' }}">{{ kpis.criticals }}</div><div class="k">açık kritik sorun</div></div>
</div>
{% endif %}

<div class="card" style="margin-top:14px">
  <form class="audit" method="post" action="/audits">
    <label style="grid-column: 1 / -1">Site adresi
      <input name="url" placeholder="ornek.com" required autofocus>
    </label>
    <label>Denetim profili
      <select name="preset" onchange="applyPreset(this)">
        <option value="10,2">Hızlı — 10 sayfa, ~1 dk</option>
        <option value="50,3" selected>Standart — 50 sayfa, ~3 dk</option>
        <option value="200,5">Derin — 200 sayfa, ~10 dk</option>
        <option value="ozel">Özel…</option>
      </select>
    </label>
    <label>En fazla sayfa <input id="max_pages" name="max_pages" type="number" value="50" min="1" max="2000"></label>
    <label>Link derinliği <input id="max_depth" name="max_depth" type="number" value="3" min="0" max="10"></label>
    <label>PageSpeed ölçülecek sayfa
      <input name="pagespeed_pages" type="number" value="{{ 3 if (defaults.pagespeed_api_key or lighthouse_ok) else 0 }}" min="0" max="20">
    </label>
    <label>PageSpeed cihazı
      <select name="strategy"><option value="mobile">Mobil</option><option value="desktop">Masaüstü</option></select>
    </label>
    <label>GA4 mülk kimliği
      <input name="ga4_property" value="{{ defaults.ga4_property or '' }}" placeholder="123456789">
    </label>
    <label style="display:flex;gap:8px;align-items:center">
      <input type="checkbox" name="use_gsc" value="true" {% if defaults.google_credentials %}checked{% endif %}>
      Search Console verisini ekle
    </label>
    <div><button type="submit">Denetimi başlat</button></div>
  </form>
  <p class="muted small" style="margin-bottom:0">
    Entegrasyonlar:
    PageSpeed {% if defaults.pagespeed_api_key %}<span class="chip ok">API anahtarı</span>{% elif lighthouse_ok %}<span class="chip info">yerel Lighthouse</span>{% else %}<span class="chip neutral">kapalı</span>{% endif %}
    · Google {% if defaults.google_credentials %}<span class="chip ok">tanımlı</span>{% else %}<span class="chip neutral">yok</span>{% endif %}
    · AI görünürlük {% if ai_key %}<span class="chip ok">anahtar var</span>{% else %}<span class="chip neutral">kapalı</span>{% endif %}
    · Bildirim {% if notify_ok %}<span class="chip ok">hazır</span>{% else %}<span class="chip neutral">kapalı</span>{% endif %}
    <span class="muted">(.env · <code>seogeo setup</code>)</span>
  </p>
</div>

{% if not audits %}
<div class="grid two" style="margin-top:16px">
  <div class="card">
    <h3>Üç adımda başlayın</h3>
    <ol style="margin:8px 0 0;padding-left:20px;line-height:1.9">
      <li><b>Siteyi denetle.</b> Yukarıya adresi yazın; tarama, kurallar ve skorlar otomatik çalışır.</li>
      <li><b>Raporu okuyun.</b> Skor halkaları, aksiyon planı (etki ÷ efor), AI bot erişim tablosu ve düzeltme önerileri çıkar.</li>
      <li><b>Takip et.</b> Site geçmiş sayfasından haftalık zamanlanmış denetim kurun; skor düşerse bildirim alın.</li>
    </ol>
  </div>
  <div class="card">
    <h3>Terminalden aynı işler</h3>
    <p class="muted small" style="margin-top:4px">Panel bunların arayüzü; hepsi CLI'da da var:</p>
    <ul class="issues" style="margin-bottom:0">
      <li><code>seogeo audit ornek.com -n 50 --save</code></li>
      <li><code>seogeo report -f denetim.json -o rapor.pdf</code></li>
      <li><code>seogeo compare sitem.com rakip.com</code></li>
      <li><code>seogeo fixes -f denetim.json -o fixes/</code></li>
    </ul>
  </div>
</div>
{% endif %}

{% if running %}
<h2>Devam eden denetimler</h2>
<div class="card"><ul class="issues">
  {% for j in running %}<li><a href="/jobs/{{ j.id }}">{{ j.url }}</a> <span class="muted">— {{ j.message }}</span></li>{% endfor %}
</ul></div>
{% endif %}

{% if site_cards %}
<h2>İzlenen siteler</h2>
<div class="site-grid">
  {% for card in site_cards %}
  <div class="site-card">
    <h3><a href="/sites/{{ card.host }}">{{ card.host }}</a>
      <span class="chip {{ score_class(card.latest.scores.get('seo')) }}" title="Son SEO skoru">{{ card.latest.scores.get('seo') if card.latest.scores.get('seo') is not none else '—' }}</span>
    </h3>
    <div class="spark-row">
      <span class="lbl">SEO</span>{{ card.spark_seo|safe if card.spark_seo else '<span class="muted small">tek denetim</span>' }}
    </div>
    <div class="spark-row">
      <span class="lbl">GEO</span>{{ card.spark_geo|safe if card.spark_geo else '' }}
    </div>
    <div class="meta">
      <span class="chip neutral">{{ card.count }} denetim</span>
      <span class="chip {{ 'critical' if card.latest.counts.critical else 'ok' }}">{{ card.latest.counts.critical }} kritik</span>
      <span class="chip {{ 'warning' if card.latest.counts.warning else 'neutral' }}">{{ card.latest.counts.warning }} uyarı</span>
    </div>
    <div class="muted small">{{ card.latest.created_at.replace("T", " ")[:16] }}</div>
    <div class="links">
      <a href="/audits/{{ card.latest.id }}">Son rapor</a>
      <a href="/sites/{{ card.host }}">Geçmiş</a>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{% if audits %}
<h2>Geçmiş denetimler</h2>
<div class="card table-wrap">
<table data-sort>
  <thead><tr><th>Site</th><th>Tarih</th><th class="num">Sayfa</th>{% for key, label in pillars.items() %}<th class="num">{{ label }}</th>{% endfor %}<th class="num">Kritik</th></tr></thead>
  <tbody>
  {% for a in audits %}
  <tr>
    <td><a href="/audits/{{ a.id }}">{{ a.host }}</a> <a class="small muted" href="/sites/{{ a.host }}">geçmiş</a></td>
    <td>{{ a.created_at.replace("T", " ")[:16] }}</td>
    <td class="num">{{ a.pages }}</td>
    {% for key in pillars %}
    {% set s = a.scores.get(key) %}
    <td class="num">{% if s is not none %}<span class="chip {{ score_class(s) }}">{{ s }}</span>{% else %}<span class="muted">—</span>{% endif %}</td>
    {% endfor %}
    <td class="num">{{ a.counts.critical }}</td>
  </tr>
  {% else %}
  <tr><td colspan="8" class="muted">Henüz denetim yok — ilk denetimi yukarıdan başlatın.</td></tr>
  {% endfor %}
  </tbody>
</table>
</div>
<p class="muted small">Tüm siteleri yan yana görmek için <a href="/compare">Site karşılaştır</a> sayfasına bakın.</p>
{% endif %}
<script>
function applyPreset(sel) {
  if (sel.value === "ozel") return;
  const [pages, depth] = sel.value.split(",");
  document.getElementById("max_pages").value = pages;
  document.getElementById("max_depth").value = depth;
}
</script>
{% endblock %}