<script lang="ts">
  import { enhance } from '$app/forms';
  import type { SubmitFunction } from '@sveltejs/kit';
  import { plurale } from '$lib/labels';
  let { data, form }: { data: import('./$types').PageData; form: import('./$types').ActionData } = $props();

  let inCorso = $state<string | null>(null);
  const conAttesa =
    (id: string): SubmitFunction =>
    () => {
      inCorso = id;
      return async ({ update }) => {
        await update();
        inCorso = null;
      };
    };

  const campo = 'w-full rounded border px-3 py-1.5 text-sm';
  const campoStile = 'border-color:color-mix(in srgb, var(--color-sepia) 40%, transparent);background:var(--color-carta)';
  const card = 'p-5 rounded-[var(--radius-card)] mb-6';
  const cardStyle = 'background:var(--color-carta);box-shadow:var(--shadow-soft)';
</script>

<svelte:head>
  <title>Squadre del Palio · Gestione tornei</title>
</svelte:head>

{#snippet esito(sezione: string)}
  <div aria-live="polite">
    {#if form?.sezione === sezione && form?.msg}
      <p class="mt-3 text-sm p-3 rounded" role="status" style="background:color-mix(in srgb, var(--color-verderame) 12%, transparent);color:var(--color-verderame)">{form.msg}</p>
    {/if}
    {#if form?.sezione === sezione && form?.error}
      <p class="mt-3 text-sm p-3 rounded" role="alert" style="background:color-mix(in srgb, var(--color-oxblood) 10%, transparent);color:var(--color-oxblood)">{form.error}</p>
    {/if}
  </div>
{/snippet}

<div class="mb-4">
  <h1 class="text-2xl font-[var(--font-display)]" style="color:var(--color-inchiostro)">Squadre del Palio ({data.squadre.length})</h1>
  <p class="text-sm" style="color:var(--color-sepia)">
    Compaiono nella pagina pubblica <a href="/palio" style="color:var(--color-bronzo)">Palio</a>. I giocatori scelgono la loro squadra dal profilo.
  </p>
</div>

<section class={card} style={cardStyle}>
  <h2 class="text-lg font-[var(--font-display)] mb-3" style="color:var(--color-bronzo)">Nuova squadra</h2>
  <form method="POST" action="?/crea" enctype="multipart/form-data" use:enhance={conAttesa('nuova')} class="grid gap-3 sm:grid-cols-2">
    <label class="text-sm" style="color:var(--color-inchiostro)">
      Nome
      <input name="nome" required minlength="2" maxlength="60" class={campo} style={campoStile} value={form?.sezione === 'nuova' && 'nome' in form ? form.nome : ''} />
    </label>
    <label class="text-sm" style="color:var(--color-inchiostro)">
      Zona geografica <span style="color:var(--color-sepia)">(facoltativa)</span>
      <input name="zona" maxlength="80" placeholder="es. Liguria e basso Piemonte" class={campo} style={campoStile} value={form?.sezione === 'nuova' && 'zona' in form ? form.zona : ''} />
    </label>
    <label class="text-sm sm:col-span-2" style="color:var(--color-inchiostro)">
      Gonfalone <span style="color:var(--color-sepia)">(facoltativo: PNG, JPEG o WebP, al massimo 1 MB)</span>
      <input type="file" name="gonfalone" accept="image/png,image/jpeg,image/webp" class="block mt-1 text-sm" />
    </label>
    <div class="sm:col-span-2">
      <button class="px-4 py-2 rounded text-white text-sm disabled:opacity-50" style="background:var(--color-verderame)" disabled={inCorso !== null}>{inCorso === 'nuova' ? 'Aggiungo…' : 'Aggiungi squadra'}</button>
    </div>
  </form>
  {@render esito('nuova')}
</section>

{#each data.squadre as s (s.id)}
  <section class={card} style={cardStyle} id={`squadra-${s.id}`}>
    <div class="flex flex-wrap items-start gap-4">
      <div class="flex h-20 w-20 shrink-0 items-center justify-center rounded" style="background:color-mix(in srgb, var(--color-pergamena) 70%, transparent)">
        {#if s.gonfalone}
          <img src={s.gonfalone} alt={`Gonfalone di ${s.nome}`} class="max-h-full max-w-full object-contain" />
        {:else}
          <span class="text-xs text-center" style="color:var(--color-sepia)">senza gonfalone</span>
        {/if}
      </div>
      <div class="flex-1 min-w-[12rem]">
        <h2 class="text-lg font-[var(--font-display)]" style="color:var(--color-inchiostro)">{s.nome}</h2>
        {#if s.zona}<p class="text-sm" style="color:var(--color-bronzo)">{s.zona}</p>{/if}
        <p class="text-sm mt-1" style="color:var(--color-sepia)">
          {s.iscritti.length ? `${plurale(s.iscritti.length, 'iscritto', 'iscritti')}: ${s.iscritti.join(', ')}` : 'Nessun iscritto'}
        </p>
      </div>
    </div>

    <details class="mt-4" open={form?.sezione === `squadra-${s.id}` && !!form?.error}>
      <summary class="text-sm cursor-pointer" style="color:var(--color-bronzo)">Modifica o elimina</summary>
      <form method="POST" action="?/modifica" enctype="multipart/form-data" use:enhance={conAttesa(`m-${s.id}`)} class="grid gap-3 sm:grid-cols-2 mt-3">
        <input type="hidden" name="id" value={s.id} />
        <label class="text-sm" style="color:var(--color-inchiostro)">
          Nome
          <input name="nome" required minlength="2" maxlength="60" class={campo} style={campoStile} value={s.nome} />
        </label>
        <label class="text-sm" style="color:var(--color-inchiostro)">
          Zona geografica
          <input name="zona" maxlength="80" class={campo} style={campoStile} value={s.zona ?? ''} />
        </label>
        <label class="text-sm sm:col-span-2" style="color:var(--color-inchiostro)">
          {s.gonfalone ? 'Nuovo gonfalone (sostituisce quello attuale)' : 'Gonfalone'}
          <input type="file" name="gonfalone" accept="image/png,image/jpeg,image/webp" class="block mt-1 text-sm" />
        </label>
        {#if s.gonfalone}
          <label class="flex items-center gap-1.5 text-sm sm:col-span-2" style="color:var(--color-inchiostro)">
            <input type="checkbox" name="togliGonfalone" /> Togli il gonfalone
          </label>
        {/if}
        <div class="sm:col-span-2">
          <button class="px-4 py-2 rounded text-white text-sm disabled:opacity-50" style="background:var(--color-bronzo)" disabled={inCorso !== null}>{inCorso === `m-${s.id}` ? 'Salvo…' : 'Salva'}</button>
        </div>
      </form>

      <form method="POST" action="?/elimina" use:enhance={conAttesa(`e-${s.id}`)} class="mt-4 pt-4 flex flex-wrap items-center gap-3" style="border-top:1px solid color-mix(in srgb, var(--color-sepia) 15%, transparent)">
        <input type="hidden" name="id" value={s.id} />
        <label class="flex items-center gap-1.5 text-sm" style="color:var(--color-inchiostro)">
          <input type="checkbox" name="conferma" required />
          Elimina la squadra{s.iscritti.length ? `: ${plurale(s.iscritti.length, 'giocatore resterà', 'giocatori resteranno')} senza squadra` : ''}
        </label>
        <button class="px-3 py-1.5 rounded text-sm border disabled:opacity-50" style="border-color:var(--color-oxblood);color:var(--color-oxblood)" disabled={inCorso !== null}>{inCorso === `e-${s.id}` ? 'Elimino…' : 'Elimina'}</button>
      </form>
    </details>
    {@render esito(`squadra-${s.id}`)}
  </section>
{/each}
