<script lang="ts">
  import { onMount } from 'svelte';

  interface Template { id: string; name: string; calories: number; items: number; meal: string; }

  let templates = $state<Template[]>([]);
  let loading = $state(true);

  function mealIcon(meal: string): string {
    if (meal === 'breakfast') return '🥣';
    if (meal === 'lunch') return '🍗';
    if (meal === 'dinner') return '🍽️';
    return '🥤';
  }

  onMount(async () => {
    try {
      const res = await fetch('/api/fitness/templates', { credentials: 'include' });
      if (res.ok) {
        const raw = await res.json();
        templates = (Array.isArray(raw) ? raw : []).map((t: any) => {
          const items = t.items || [];
          const totalCal = items.reduce((s: number, i: any) => s + (i.snapshot_calories || 0) * (i.quantity || 1), 0);
          return { id: t.id, name: t.name, calories: Math.round(totalCal), items: items.length, meal: t.meal_type || 'snack' };
        });
      }
    } catch { /* silent */ }
    loading = false;
  });
</script>

<div class="page">
  <div class="app-surface">
    <div class="page-header">
      <div class="header-row">
        <div>
          <div class="page-title">FITNESS</div>
          <div class="page-subtitle">Meal Templates</div>
        </div>
        <button class="btn-primary">+ New Template</button>
      </div>
    </div>

    <div class="template-list">
      {#if loading}
        <div class="template-empty">Loading...</div>
      {:else if templates.length === 0}
        <div class="template-empty">No meal templates yet</div>
      {:else}
        {#each templates as tpl}
          <div class="template-row">
            <div class="template-icon">{mealIcon(tpl.meal)}</div>
            <div class="template-info">
              <div class="template-name">{tpl.name}</div>
              <div class="template-meta">{tpl.calories} cal &middot; {tpl.items} items</div>
            </div>
            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
          </div>
        {/each}
      {/if}
    </div>
  </div>
</div>

<style>
  .header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
  }
  .page-subtitle {
    font-size: var(--text-2xl);
    font-weight: 300;
    color: var(--text-1);
    line-height: 1.2;
  }

  .template-list {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
  }
  .template-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--sp-4) var(--sp-5);
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow-sm);
    cursor: pointer;
    transition: all var(--transition);
  }
  .template-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow);
  }
  .template-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
  }
  .template-info {
    flex: 1;
    min-width: 0;
  }
  .template-name {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-1);
  }
  .template-meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    margin-top: var(--sp-0.5);
  }
  .template-empty { padding: var(--sp-8); text-align: center; color: var(--text-3); font-size: var(--text-base); }
  .chevron {
    width: 16px;
    height: 16px;
    color: var(--text-3);
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .page-subtitle { font-size: var(--text-xl); }
  }
</style>
