<script lang="ts">
  import type { PageData } from './$types';
  let { data }: { data: PageData } = $props();

  function scoreClass(prefix: 'seo' | 'geo', n: number) {
    if (n >= 75) return `${prefix}-good`;
    if (n >= 50) return `${prefix}-warn`;
    return `${prefix}-bad`;
  }
</script>

<svelte:head><title>Dashboard — Admin</title></svelte:head>

<header class="page-head">
  <p class="kicker">Dashboard</p>
  <h1>Panoramica</h1>
  <p>Contenuti, richieste e salute SEO/GEO della landing page in un colpo d'occhio.</p>
</header>

<div class="grid-4">
  <div class="stat">
    <div class="stat-label">Copy slot</div>
    <div class="stat-value">{data.totalSlots}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Immagini</div>
    <div class="stat-value">{data.totalImages}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Richieste totali</div>
    <div class="stat-value">{data.totalSubmissions}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Regione GEO</div>
    <div class="stat-value" style="font-size:22px;">{data.seo.geoRegion}</div>
  </div>
</div>

<div class="grid-2" style="margin-top:18px;">
  <div class="card">
    <h2>Salute SEO</h2>
    <p>Media dei punteggi SEO sui testi principali: lunghezza, leggibilità, keyword primarie.</p>
    <div class="score-row">
      <span class="score-chip {scoreClass('seo', data.scores.seo)}">SEO {data.scores.seo}/100</span>
      <a class="btn btn-ghost btn-sm" href="/admin/copy">Modifica testi</a>
    </div>
  </div>
  <div class="card">
    <h2>Salute GEO</h2>
    <p>Media dei punteggi GEO (Generative Engine Optimization): citabilità, entità, dati concreti.</p>
    <div class="score-row">
      <span class="score-chip {scoreClass('geo', data.scores.geo)}">GEO {data.scores.geo}/100</span>
      <a class="btn btn-ghost btn-sm" href="/admin/copy">Analizza e migliora</a>
    </div>
  </div>
</div>

<div class="card" style="margin-top:18px;">
  <h2>Ultime richieste</h2>
  {#if data.recentSubmissions.length === 0}
    <p>Nessuna richiesta ricevuta al momento.</p>
  {:else}
    <div style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
      {#each data.recentSubmissions as s}
        <div style="display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);">
          <div>
            <strong style="color:var(--accent-dark);">{s.name}</strong>
            <span style="color:var(--accent);font-size:11px;margin-left:8px;text-transform:uppercase;letter-spacing:0.1em;">{s.dog || '—'}</span>
            <p style="color:var(--text-muted);font-size:13px;margin-top:4px;">{s.message.slice(0, 140)}{s.message.length > 140 ? '…' : ''}</p>
          </div>
          <time style="color:var(--text-muted);font-size:11px;letter-spacing:0.06em;">{new Date(s.createdAt).toLocaleDateString('it-IT')}</time>
        </div>
      {/each}
    </div>
    <div style="margin-top:12px;">
      <a class="btn btn-ghost btn-sm" href="/admin/submissions">Vedi tutte</a>
    </div>
  {/if}
</div>
