import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { listSavedSearches } from '@/lib/account/queries';
import { deleteSavedSearchAction, toggleSavedSearchNotifyAction } from '@/lib/account/actions';
import { PageHeader, btnDanger, btnGhost } from '@/components/account/page-header';
import { Card, CardHeader, EmptyState, Badge } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';
import { SaveSearchForm } from './save-form';

export const metadata: Metadata = { title: 'Saved searches', robots: { index: false } };

export default async function SavedPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const sp = await searchParams;
  const u = await requireUser('/saved');
  const rows = await listSavedSearches(u.id);
  return (
    <>
      <PageHeader title="Saved searches" description="Keep your Explore and Search filters one click away. Searches with notifications on are re-run daily; new matches land in your inbox." />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
        <Card>
          <CardHeader title={`Saved · ${rows.length}`} />
          {rows.length === 0 ? (
            <EmptyState title="No saved searches" description="Run a search, then use “Save this search” — or paste a RareIndex search URL on the right." />
          ) : (
            <ul className="divide-y divide-border">
              {rows.map((s) => (
                <li key={s.id} className="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                  <div className="min-w-0">
                    <Link href={s.url} className="block truncate font-medium hover:underline">
                      {s.name}
                    </Link>
                    <p className="truncate text-[11px] text-subtle">
                      {s.url} · saved {fmtRelative(s.createdAt)}
                      {s.lastRunAt ? ` · last run ${fmtRelative(s.lastRunAt)} (${s.lastCount ?? 0} results)` : ''}
                    </p>
                  </div>
                  <div className="flex items-center gap-1">
                    {s.notify ? <Badge tone="index">notify</Badge> : null}
                    <form action={toggleSavedSearchNotifyAction}>
                      <input type="hidden" name="id" value={s.id} />
                      <button className={btnGhost}>{s.notify ? 'Mute' : 'Notify'}</button>
                    </form>
                    <form action={deleteSavedSearchAction}>
                      <input type="hidden" name="id" value={s.id} />
                      <button className={btnDanger}>Delete</button>
                    </form>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </Card>
        <Card>
          <CardHeader title="Save a search" />
          <div className="p-4">
            <SaveSearchForm initialUrl={sp.url ?? ''} initialName={sp.name ?? ''} />
          </div>
        </Card>
      </div>
    </>
  );
}