<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import { Card, CardContent } from "$lib/components/ui/card";
  import { Input } from "$lib/components/ui/input";

  let { data }: { data: { receipts: { id: string }[] } } = $props();
  let searchQuery = $state("");

  const receipts = $derived(data?.receipts ?? []);
  const filteredReceipts = $derived(
    (() => {
      const q = searchQuery.trim().toLowerCase();
      if (!q) return receipts;
      return receipts.filter((r) => r.id.toLowerCase().includes(q));
    })()
  );
</script>

<svelte:head>
  <title>Receipts – Stackq</title>
</svelte:head>

<main class="container mx-auto flex flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex items-center gap-3 min-w-0">
      <a href="/" class="text-muted-foreground hover:text-foreground shrink-0 text-sm" title="Back to main">Back</a>
      <h1 class="text-xl font-semibold truncate sm:text-2xl">Receipts</h1>
    </div>
    <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-2">
      <div class="w-full sm:w-64 sm:min-w-0">
        <Input
          type="search"
          placeholder="Search receipts…"
          bind:value={searchQuery}
          class="h-11 w-full sm:h-9"
        />
      </div>
      <span class="text-muted-foreground text-sm shrink-0">
        {filteredReceipts.length}{filteredReceipts.length !== receipts.length ? ` of ${receipts.length}` : ""} receipts
      </span>
      <a href="/receipts/new" class="block shrink-0">
        <Button class="w-full sm:w-auto min-h-11">New receipt</Button>
      </a>
    </div>
  </div>

  {#if filteredReceipts.length === 0}
    <Card>
      <CardContent class="flex flex-col items-center justify-center gap-4 py-12">
        <p class="text-muted-foreground text-center text-sm">
          {receipts.length === 0 ? "No receipts yet." : "No receipts match your search."}
        </p>
        <p class="text-muted-foreground text-center text-xs">
          {receipts.length === 0 ? "Create a receipt to get started." : "Try a different search."}
        </p>
        <a href="/receipts/new">
          <Button variant="outline">New receipt</Button>
        </a>
        <a href="/">
          <Button variant="ghost">Back to home</Button>
        </a>
      </CardContent>
    </Card>
  {:else}
    <div class="flex flex-col gap-2">
      {#each filteredReceipts as receipt (receipt.id)}
        <Card>
          <CardContent class="p-4">
            <a href="/receipts/{receipt.id}" class="font-medium hover:underline">Receipt {receipt.id}</a>
          </CardContent>
        </Card>
      {/each}
    </div>
  {/if}
</main>
