<script lang="ts">
  import Card from '$lib/ui/layout/Card.svelte';
  import Badge from '$lib/ui/atoms/Badge.svelte';
  import { success, error as toastError } from '$lib/stores/toasts';

  export type Counts = { open: number; unassigned: number };
  export type TaskPreview = { id: number; description: string; due_date: string | null; display_code: number | null };

  export let id: string;
  export let name: string | null = null;
  export let counts: Counts = { open: 0, unassigned: 0 };
  export let previews: TaskPreview[] = [];

  let busyTaskId: number | null = null;

  async function claim(taskId: number) {
    if (busyTaskId) return;
    busyTaskId = taskId;
    try {
      const res = await fetch(`/api/tasks/${taskId}/claim`, { method: 'POST' });
      if (res.ok) {
        success('Tarea reclamada');
        // Actualizar estado local sin recargar
        previews = previews.filter((t) => t.id !== taskId);
        counts = { ...counts, unassigned: Math.max(0, (counts?.unassigned ?? 0) - 1) };
      } else {
        const txt = await res.text();
        toastError(txt || 'No se pudo reclamar');
      }
    } catch {
      toastError('Error de red');
    } finally {
      busyTaskId = null;
    }
  }
</script>

<Card>
  <div class="header">
    <strong class="name">{name ?? id}</strong>
    <div class="badges">
      <Badge>abiertas: {counts.open}</Badge>
      <Badge tone="warning">sin responsable: {counts.unassigned}</Badge>
    </div>
  </div>

  {#if previews?.length}
    <div class="previews">
      <em class="title">Sin responsable:</em>
      <ul class="list">
        {#each previews as t}
          <li class="row">
            <div class="info">
              <span>#{t.display_code ?? t.id} — {t.description}</span>
              {#if t.due_date}<small class="muted"> (vence: {t.due_date})</small>{/if}
            </div>
            <div class="actions">
              <button class="btn" on:click|preventDefault={() => claim(t.id)} disabled={busyTaskId === t.id}>Reclamar</button>
            </div>
          </li>
        {/each}
      </ul>
    </div>
  {/if}
</Card>

<style>
  .header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: space-between;
  }
  .name { font-size: 1rem; }
  .badges { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
  .previews { margin-top: var(--space-3); }
  .title { color: var(--color-text); }
  .list { margin: 6px 0 0 18px; padding: 0; }
  .list li { margin: 4px 0; }
  .muted { color: var(--color-text-muted); }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .info {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .actions {
    display: inline-flex;
    gap: 6px;
  }
  .btn {
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
  }
  .btn[disabled] { opacity: .6; cursor: not-allowed; }
</style>
