import Link from 'next/link'
import { Camera, Sparkles } from 'lucide-react'
import { PageShell, PageHeader } from '@/components/page-shell'
import { SearchBar } from '@/components/search-bar'
import { ItemRow } from '@/components/item-row'
import { searchItems } from '@/lib/search'

export const dynamic = 'force-dynamic'

export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; location?: string; tag?: string; status?: string }>
}) {
  const sp = await searchParams
  const q = sp.q || ''
  const results = await searchItems({
    q,
    locationId: sp.location,
    tag: sp.tag,
    status: sp.status,
    limit: 100,
  })

  return (
    <PageShell>
      <div className="pt-2">
        <PageHeader
          title="eorganize"
          action={
            <Link
              href="/capture"
              className="inline-flex items-center gap-1 h-10 px-3 rounded-lg bg-primary text-primary-foreground text-sm font-medium"
            >
              <Camera className="size-4" />
              Capture
            </Link>
          }
        />
        <SearchBar initial={q} />
        <div className="mt-2 flex justify-end">
          <Link
            href="/search/ai"
            className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
          >
            <Sparkles className="size-3.5" />
            Describe it instead (AI search)
          </Link>
        </div>
      </div>

      <div className="mt-4 space-y-2">
        {results.length === 0 ? (
          <div className="text-center text-muted-foreground py-12">
            {q ? (
              <>
                No items match <span className="font-medium text-foreground">“{q}”</span>.
                <div className="mt-3">
                  <Link href={`/search/ai`} className="text-primary underline text-sm">
                    Try describing it with AI →
                  </Link>
                </div>
              </>
            ) : (
              <>No items yet. <Link href="/capture" className="text-primary underline">Capture your first one</Link>.</>
            )}
          </div>
        ) : (
          results.map(item => <ItemRow key={item.id} item={item} />)
        )}
      </div>
    </PageShell>
  )
}