<script lang="ts">
  type GroupItem = {
    id: string;
    name: string | null;
    counts: { open: number; unassigned: number };
  };
  type TaskItem = {
    id: number;
    description: string;
    due_date: string | null;
    display_code: number | null;
  };

  export let data: { groups: GroupItem[]; previews?: Record<string, TaskItem[]> };
  const groups = data.groups || [];
  const previews = data.previews || {};
</script>

<svelte:head>
  <title>Grupos</title>
  <meta name="robots" content="noindex,nofollow" />
</svelte:head>

{#if groups.length === 0}
  <p>No perteneces a ningún grupo permitido.</p>
{:else}
  <h1>Grupos</h1>
  <ul>
    {#each groups as g}
      <li>
        <strong>{g.name ?? g.id}</strong>
        <small style="margin-left:8px;color:#555">(abiertas: {g.counts.open}, sin responsable: {g.counts.unassigned})</small>

        {#if previews[g.id]?.length}
          <div style="margin-top:6px; padding:6px 8px; background:#f6f6f6; border-radius:6px;">
            <em style="color:#333;">Sin responsable (hasta 3):</em>
            <ul style="margin:6px 0 0 16px;">
              {#each previews[g.id] as t}
                <li>
                  <span>#{t.display_code ?? t.id} — {t.description}</span>
                  {#if t.due_date}
                    <small> (vence: {t.due_date})</small>
                  {/if}
                </li>
              {/each}
            </ul>
          </div>
        {/if}
      </li>
    {/each}
  </ul>
{/if}
