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

  let { data, form }: { data: PageData; form: ActionData } = $props();
  let editing = $state<string | null>(null);
</script>

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

<header class="page-head">
  <p class="kicker">Recensioni</p>
  <h1>Testimonianze</h1>
  <p>Aggiungi, modifica o rimuovi le recensioni mostrate sulla landing page. Ogni testimonianza ha un avatar opzionale (max 4 MB, PNG/JPG/WebP).</p>
</header>

{#if form?.success}
  <div class="alert-row">
    {form.added ? 'Testimonianza aggiunta.' : form.deleted ? 'Testimonianza eliminata.' : 'Testimonianza aggiornata.'}
  </div>
{/if}
{#if form?.error}
  <div class="alert-row err">{form.error}</div>
{/if}

<div class="card">
  <h2>Aggiungi una nuova testimonianza</h2>
  <form method="POST" action="?/add" enctype="multipart/form-data" use:enhance>
    <div class="grid-2">
      <div class="field">
        <label for="new-name">Nome</label>
        <input id="new-name" name="name" type="text" required />
      </div>
      <div class="field">
        <label for="new-role">Ruolo / etichetta</label>
        <input id="new-role" name="role" type="text" placeholder="Es. Mamma di Max" />
      </div>
    </div>
    <div class="field">
      <label for="new-text">Testo della testimonianza</label>
      <textarea id="new-text" name="text" rows="3" required></textarea>
    </div>
    <div class="grid-2">
      <div class="field">
        <label for="new-avatar">Avatar (opzionale)</label>
        <input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/webp" />
      </div>
      <div class="field">
        <label for="new-alt">Alt text avatar</label>
        <input id="new-alt" name="avatarAlt" type="text" />
      </div>
    </div>
    <button type="submit" class="btn">
      <span class="material-symbols-outlined" aria-hidden="true">add</span>
      Aggiungi testimonianza
    </button>
  </form>
</div>

<div class="section-divider">
  <h2>Testimonianze esistenti</h2>
  <span class="count">{data.testimonials.length}</span>
</div>

{#if data.testimonials.length === 0}
  <div class="card">
    <p>Nessuna testimonianza salvata. Aggiungi la prima dal modulo qui sopra.</p>
  </div>
{:else}
  <div class="testi-grid">
    {#each data.testimonials as t (t.id)}
      <div class="testi-card">
        <div class="testi-head">
          <img src={t.avatarSrc} alt={t.avatarAlt} />
          <div>
            <strong>{t.name}</strong>
            <small>{t.role || '—'}</small>
          </div>
          <div class="testi-actions">
            <button
              type="button"
              class="btn btn-ghost btn-sm"
              onclick={() => (editing = editing === t.id ? null : t.id)}
            >
              <span class="material-symbols-outlined" aria-hidden="true">edit</span>
              {editing === t.id ? 'Annulla' : 'Modifica'}
            </button>
            <form method="POST" action="?/delete" use:enhance>
              <input type="hidden" name="id" value={t.id} />
              <button type="submit" class="btn btn-danger btn-sm">
                <span class="material-symbols-outlined" aria-hidden="true">delete</span>
              </button>
            </form>
          </div>
        </div>
        <blockquote>{t.text}</blockquote>
        {#if editing === t.id}
          <form
            method="POST"
            action="?/update"
            enctype="multipart/form-data"
            use:enhance={() => async ({ update, result }) => {
              await update();
              if (result.type === 'success') editing = null;
            }}
            class="testi-edit"
          >
            <input type="hidden" name="id" value={t.id} />
            <div class="grid-2">
              <div class="field">
                <label for="name-{t.id}">Nome</label>
                <input id="name-{t.id}" name="name" type="text" value={t.name} required />
              </div>
              <div class="field">
                <label for="role-{t.id}">Ruolo</label>
                <input id="role-{t.id}" name="role" type="text" value={t.role} />
              </div>
            </div>
            <div class="field">
              <label for="text-{t.id}">Testo</label>
              <textarea id="text-{t.id}" name="text" rows="3" required>{t.text}</textarea>
            </div>
            <div class="grid-2">
              <div class="field">
                <label for="avatar-{t.id}">Cambia avatar</label>
                <input id="avatar-{t.id}" name="avatar" type="file" accept="image/png,image/jpeg,image/webp" />
                <small>Lascia vuoto per mantenere quello attuale.</small>
              </div>
              <div class="field">
                <label for="alt-{t.id}">Alt text</label>
                <input id="alt-{t.id}" name="avatarAlt" type="text" value={t.avatarAlt} />
              </div>
            </div>
            <button type="submit" class="btn">
              <span class="material-symbols-outlined" aria-hidden="true">save</span>
              Salva modifiche
            </button>
          </form>
        {/if}
      </div>
    {/each}
  </div>
{/if}

<style>
  .testi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .testi-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
  }
  .testi-head {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .testi-head img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--panel-muted);
    border: 1px solid var(--border);
  }
  .testi-head strong { color: var(--accent-dark); font-size: 15px; display: block; }
  .testi-head small { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  .testi-actions { margin-left: auto; display: flex; gap: 8px; }
  .testi-card blockquote {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--panel-muted);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    font-style: italic;
  }
  .testi-edit {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
  }
</style>
