<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageData, ActionData } from './$types';

  let { data, form }: { data: PageData; form: ActionData } = $props();

  function fmt(iso: string) {
    const d = new Date(iso);
    return d.toLocaleString('it-IT', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  function icon(type: string) {
    if (type === 'submission') return 'inbox';
    if (type === 'seo_drop') return 'trending_down';
    if (type === 'geo_drop') return 'trending_down';
    return 'notifications';
  }

  function color(type: string) {
    if (type === 'submission') return 'var(--ok)';
    return 'var(--danger)';
  }

  const hasUnread = $derived(data.notifications.some((n) => !n.read));
</script>

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

<header class="page-head">
  <p class="kicker">Avvisi</p>
  <h1>Notifiche</h1>
  <p>Segnalazioni in tempo reale: nuove richieste dal form, cali di punteggio SEO o GEO dopo una modifica ai testi.</p>
</header>

{#if form?.allRead}
  <div class="alert-row">Tutte le notifiche segnate come lette.</div>
{:else if form?.success}
  <div class="alert-row">Notifica aggiornata.</div>
{/if}
{#if form?.error}
  <div class="alert-row err">{form.error}</div>
{/if}

<div style="display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px;">
  {#if hasUnread}
    <form method="POST" action="?/markAllRead" use:enhance>
      <button type="submit" class="btn btn-ghost btn-sm">
        <span class="material-symbols-outlined" aria-hidden="true">done_all</span>
        Segna tutte come lette
      </button>
    </form>
  {/if}
</div>

{#if data.notifications.length === 0}
  <div class="card">
    <h2>Nessuna notifica</h2>
    <p>Quando arriva una richiesta dal form o un punteggio SEO/GEO cala, comparirà qui.</p>
  </div>
{:else}
  <div class="notif-list">
    {#each data.notifications as n (n.id)}
      <div class="notif-row" class:unread={!n.read}>
        <div class="notif-icon" style="color:{color(n.type)};">
          <span class="material-symbols-outlined" aria-hidden="true">{icon(n.type)}</span>
        </div>
        <div class="notif-body">
          <header>
            <strong>{n.title}</strong>
            <time>{fmt(n.createdAt)}</time>
          </header>
          <p>{n.message}</p>
          {#if n.link}
            <a href={n.link} class="notif-link">
              Apri
              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
            </a>
          {/if}
        </div>
        <div class="notif-actions">
          {#if !n.read}
            <form method="POST" action="?/markRead" use:enhance>
              <input type="hidden" name="id" value={n.id} />
              <button type="submit" class="btn btn-ghost btn-sm" title="Segna come letta">
                <span class="material-symbols-outlined" aria-hidden="true">check</span>
              </button>
            </form>
          {/if}
          <form method="POST" action="?/delete" use:enhance>
            <input type="hidden" name="id" value={n.id} />
            <button type="submit" class="btn btn-danger btn-sm" title="Elimina">
              <span class="material-symbols-outlined" aria-hidden="true">delete</span>
            </button>
          </form>
        </div>
      </div>
    {/each}
  </div>
{/if}

<style>
  .notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .notif-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    align-items: flex-start;
  }
  .notif-row.unread {
    border-color: rgba(139, 115, 61, 0.45);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 29, 54, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notif-icon .material-symbols-outlined { font-size: 22px; }
  .notif-body header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 4px;
  }
  .notif-body strong { color: var(--accent-dark); font-size: 14px; }
  .notif-body time { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
  .notif-body p { color: var(--text); font-size: 13px; line-height: 1.55; margin: 0; }
  .notif-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 6px;
  }
  .notif-link .material-symbols-outlined { font-size: 14px; }
  .notif-actions { display: flex; gap: 6px; }
</style>
