<script lang="ts">
  // v0.2 Phase 5 — primitives showcase. Gated by +page.ts; if you can
  // see this you started Vite with VITE_LUMOTIA_DESIGN_SYSTEM_V2=1.
  //
  // Each section renders a Lumotia primitive in the variants it ships
  // with so the Phase 7 page-migration sweep has a visual reference
  // for "what should this look like in the new grammar".
  import LumotiaButton from "$lib/ui/LumotiaButton.svelte";
  import LumotiaIconButton from "$lib/ui/LumotiaIconButton.svelte";
  import LumotiaNotice from "$lib/ui/LumotiaNotice.svelte";
  import LumotiaProgress from "$lib/ui/LumotiaProgress.svelte";
  import LumotiaField from "$lib/ui/LumotiaField.svelte";
  import LumotiaSelect from "$lib/ui/LumotiaSelect.svelte";
  import LumotiaCombobox from "$lib/ui/LumotiaCombobox.svelte";
  import LumotiaDialog from "$lib/ui/LumotiaDialog.svelte";
  import LumotiaTabs from "$lib/ui/LumotiaTabs.svelte";
  import LumotiaTooltip from "$lib/ui/LumotiaTooltip.svelte";
  import LumotiaMenu from "$lib/ui/LumotiaMenu.svelte";
  import LumotiaCard from "$lib/ui/LumotiaCard.svelte";
  import LumotiaStatusPill from "$lib/ui/LumotiaStatusPill.svelte";
  import LumotiaToggle from "$lib/ui/LumotiaToggle.svelte";
  import LumotiaEmptyState from "$lib/ui/LumotiaEmptyState.svelte";
  import { Save, Settings, Trash2, FileText, Edit3 } from "lucide-svelte";

  let dialogOpen = $state(false);
  let toggleOn = $state(true);
  let toggleOff = $state(false);
  let selectValue = $state("base");
  let comboboxValue = $state("");
  let comboboxInput = $state("");
  let tabValue = $state("input");
  let textValue = $state("");
  let progressValue = $state(40);

  const modelOptions = [
    { value: "tiny", label: "Tiny" },
    { value: "base", label: "Base" },
    { value: "small", label: "Small" },
    { value: "medium", label: "Medium" },
  ];

  const tabs = [
    { value: "input", label: "Input" },
    { value: "output", label: "Output" },
    { value: "device", label: "Device" },
  ];
</script>

<svelte:head><title>Lumotia design system v0.2 preview</title></svelte:head>

<div class="p-8 max-w-5xl mx-auto space-y-12">
  <header>
    <h1 class="text-[28px] font-display italic text-text">v0.2 primitives</h1>
    <p class="text-[14px] text-text-secondary mt-1">
      Warm brutalist notebook cockpit. Calm, local, tactile, low-noise. Not SaaS.
    </p>
  </header>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaButton</h2>
    <div class="flex flex-wrap gap-3 items-center">
      <LumotiaButton variant="primary">Record</LumotiaButton>
      <LumotiaButton variant="secondary">Cancel</LumotiaButton>
      <LumotiaButton variant="tertiary">Skip</LumotiaButton>
      <LumotiaButton variant="destructive">Delete</LumotiaButton>
      <LumotiaButton variant="primary" size="sm">Small</LumotiaButton>
      <LumotiaButton variant="primary" size="lg">Large</LumotiaButton>
      <LumotiaButton variant="primary" loading>Loading</LumotiaButton>
      <LumotiaButton variant="secondary" disabled>Disabled</LumotiaButton>
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaIconButton</h2>
    <div class="flex flex-wrap gap-3 items-center">
      <LumotiaIconButton icon={Save} label="Save" />
      <LumotiaIconButton icon={Settings} label="Settings" variant="filled" />
      <LumotiaIconButton icon={Trash2} label="Delete" variant="destructive" />
      <LumotiaIconButton icon={Edit3} label="Edit" size="sm" />
      <LumotiaIconButton icon={Edit3} label="Edit" size="lg" />
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaNotice</h2>
    <div class="space-y-3 max-w-2xl">
      <LumotiaNotice tone="info" title="Audio source">Using default input device.</LumotiaNotice>
      <LumotiaNotice tone="caution" title="Model not downloaded">Download the Whisper-Base model before recording.</LumotiaNotice>
      <LumotiaNotice tone="danger" title="Recording failed">Check the input group permissions on /dev/input/event*.</LumotiaNotice>
      <LumotiaNotice tone="success" title="Saved">Transcript copied to clipboard.</LumotiaNotice>
      <LumotiaNotice tone="info" dismissible onDismiss={() => {}}>Dismissible variant.</LumotiaNotice>
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaProgress</h2>
    <div class="space-y-3 max-w-md">
      <LumotiaProgress value={progressValue} max={100} label="Downloading" showValue />
      <LumotiaProgress value={80} max={100} label="Transcribing" tone="success" />
      <LumotiaProgress value={15} max={100} label="Disk space" tone="caution" />
      <div class="flex gap-2">
        <LumotiaButton size="sm" onclick={() => progressValue = Math.max(0, progressValue - 10)}>-10</LumotiaButton>
        <LumotiaButton size="sm" onclick={() => progressValue = Math.min(100, progressValue + 10)}>+10</LumotiaButton>
      </div>
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaField</h2>
    <div class="space-y-4 max-w-md">
      <LumotiaField label="Display name" placeholder="Jake" bind:value={textValue} />
      <LumotiaField label="Notes" type="textarea" placeholder="…" bind:value={textValue} rows={3} />
      <LumotiaField label="Required field" required placeholder="…" error="This field is required" />
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaSelect</h2>
    <div class="flex items-center gap-3">
      <LumotiaSelect bind:value={selectValue} options={modelOptions} label="Model" />
      <span class="text-[13px] text-text-tertiary">selected: <code class="text-text">{selectValue}</code></span>
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaCombobox</h2>
    <div class="max-w-md">
      <LumotiaCombobox
        bind:value={comboboxValue}
        inputValue={comboboxInput}
        options={modelOptions}
        label="Model search"
        oninput={(e) => comboboxInput = e.currentTarget.value}
      />
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaTabs</h2>
    <LumotiaTabs bind:value={tabValue} {tabs}>
      {#snippet panel({ value })}
        <LumotiaCard classes="p-4 mt-3">
          <p class="text-[13px] text-text">Panel: <code class="text-accent">{value}</code></p>
        </LumotiaCard>
      {/snippet}
    </LumotiaTabs>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaTooltip</h2>
    <div class="flex items-center gap-3">
      <LumotiaTooltip text="Save the current dictation">
        {#snippet trigger()}
          <LumotiaButton variant="secondary" size="sm">Hover me</LumotiaButton>
        {/snippet}
      </LumotiaTooltip>
    </div>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaMenu</h2>
    <LumotiaMenu
      items={[
        { value: "rename", label: "Rename", icon: Edit3, onSelect: () => {} },
        { value: "export", label: "Export", icon: FileText, onSelect: () => {} },
        { kind: "separator" as const },
        { value: "delete", label: "Delete", icon: Trash2, destructive: true, onSelect: () => {} },
      ]}
    >
      {#snippet trigger()}
        <LumotiaButton variant="secondary" size="sm">More actions ⌄</LumotiaButton>
      {/snippet}
    </LumotiaMenu>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">LumotiaDialog</h2>
    <LumotiaButton variant="secondary" onclick={() => dialogOpen = true}>Open dialog</LumotiaButton>
    <LumotiaDialog bind:open={dialogOpen} title="Confirm deletion" description="This will permanently remove the transcript and its tasks.">
      <p class="text-[13px] text-text-secondary">Last opened five minutes ago.</p>
      {#snippet footer()}
        <LumotiaButton variant="tertiary" onclick={() => dialogOpen = false}>Cancel</LumotiaButton>
        <LumotiaButton variant="destructive" onclick={() => dialogOpen = false}>Delete</LumotiaButton>
      {/snippet}
    </LumotiaDialog>
  </section>

  <section class="space-y-3">
    <h2 class="text-[14px] text-text-secondary uppercase tracking-wider">Wrappers — Card / StatusPill / Toggle / EmptyState</h2>
    <div class="flex flex-wrap items-center gap-4">
      <LumotiaCard classes="p-4 max-w-xs"><p class="text-[13px] text-text">Card body</p></LumotiaCard>
      <LumotiaStatusPill status="recording" />
      <LumotiaStatusPill status="cleaning" />
      <LumotiaStatusPill status="saved" />
    </div>
    <div class="max-w-md space-y-1">
      <LumotiaToggle label="Enable cleanup" bind:checked={toggleOn} />
      <LumotiaToggle label="Save raw audio" bind:checked={toggleOff} description="Doubles storage usage." />
    </div>
    <LumotiaEmptyState
      icon={FileText}
      headline="No transcripts yet"
      message="Hit Ctrl+Shift+R to start your first recording."
    />
  </section>
</div>
