---
import MainLayout from '../layouts/MainLayout.astro';
import SearchBar from '../components/SearchBar.astro';
import FilteredPromptList from '../components/FilteredPromptList.astro';
import { supabase } from '../lib/supabase';

const { data: prompts, error } = await supabase
  .from('prompts')
  .select('*')
  .order('title', { ascending: true });

const allTags = Array.from(
  new Set(
    prompts?.flatMap((p) => p.tags ?? [])
  )
).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
---

<MainLayout page="Home">
  <header class="border-b p-4">
    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog</a></h1>
    <p class="text-sm mt-1">Save and explore AI prompts</p>
  </header>

  <main class="flex flex-col lg:flex-row">
    <SearchBar allTags={allTags} />

    <div class="border-b lg:border-l flex-1 flex flex-col overflow-hidden">
      <div class="flex-1 overflow-y-auto px-4 lg:px-6 pt-2 pb-4">
        {error
        ? <p class="text-red-500">Supabase error: {error.message}</p>
        : <FilteredPromptList prompts={prompts} />}
      </div>
    </div>
  </main>

  <footer class="border-t p-4 text-center text-sm">
    &copy; {new Date().getFullYear()} Prompt Catalog
  </footer>
</MainLayout>