import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { dealRadar } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { PageHeader, btnSecondary } from '@/components/account/page-header';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { fmtPct, fmtRelative, confidenceLabel } from '@/lib/format';

export const metadata: Metadata = { title: 'Deal Radar', robots: { index: false } };

export default async function DealsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  const sp = await searchParams;
  const u = await requireUser('/deals');
  const d = await getDisplay();
  const min = Math.min(0.9, Math.max(0.05, Number(sp.min ?? 15) / 100));
  const rows = await dealRadar(u.id, { minDiscount: min, limit: 100 });
  return (
    <>
      <PageHeader
        title="Deal Radar"
        description="Active listings priced materially below the RareIndex Valuation, restricted to the categories in your collections and watchlist. Analytical data, not investment advice — a discount can also mean a misidentified or damaged item."
        actions={
          <div className="flex gap-1 text-xs">
            {[10, 15, 25, 40].map((p) => (
              <Link key={p} href={`?min=${p}`} className={`rounded-full border px-3 py-1.5 ${Math.round(min * 100) === p ? 'border-fg bg-accent text-accent-fg' : 'border-border text-muted'}`}>
                ≥ {p}% below RIV
              </Link>
            ))}
          </div>
        }
      />
      <Card>
        <CardHeader title={`${rows.length} listing${rows.length === 1 ? '' : 's'}`} subtitle="Only assets with RIV confidence ≥ 50% and at least 5 sales qualify. Watched assets first." />
        {rows.length === 0 ? (
          <EmptyState title="No deals in your universe right now" description="Deal Radar looks at the categories of your collections and watchlist. Add items or watch a category to widen the net, or lower the discount threshold." action={<Link href="/watchlist" className={btnSecondary}>Manage watchlist</Link>} />
        ) : (
          <Table>
            <thead>
              <tr>
                <th className={th}>Listing</th>
                <th className={`${th} text-right`}>Ask</th>
                <th className={`${th} text-right`}>RIV</th>
                <th className={`${th} text-right`}>Discount</th>
                <th className={th}>Confidence</th>
                <th className={th}>Grade</th>
                <th className={th}>Source</th>
                <th className={th}>Seen</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={String(r.id)} className="hover:bg-sunken">
                  <td className={td}>
                    <div className="flex items-center gap-2.5">
                      {r.hero_image_url ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img src={String(r.hero_image_url)} alt="" className="h-9 w-9 rounded-sm object-cover" />
                      ) : (
                        <span className="h-9 w-9 rounded-sm bg-inset" />
                      )}
                      <div className="max-w-[280px]">
                        <Link href={`/asset/${String(r.slug)}`} className="block truncate font-medium hover:underline">
                          {String(r.title)}
                        </Link>
                        <p className="text-[11px] text-subtle">
                          {String(r.category_slug).replace(/_/g, ' ')}
                          {r.watched ? (
                            <Badge tone="index" className="ml-1">
                              watched
                            </Badge>
                          ) : null}
                        </p>
                      </div>
                    </div>
                  </td>
                  <td className={tdNum}>{d.money(Number(r.price_usd))}</td>
                  <td className={tdNum}>{d.money(Number(r.riv_usd))}</td>
                  <td className={`${tdNum} text-gain`}>{fmtPct(Number(r.discount_to_riv))}</td>
                  <td className={`${td} text-xs`}>
                    {confidenceLabel(Number(r.riv_confidence))} · {Number(r.riv_sample_size)} sales
                  </td>
                  <td className={`${td} text-xs`}>{r.grader ? `${String(r.grader).toUpperCase()} ${r.grade ?? ''}` : (r.condition as string | null) ?? '—'}</td>
                  <td className={td}>
                    <a href={String(r.source_url)} target="_blank" rel="noopener nofollow" className="text-xs underline-offset-4 hover:underline">
                      {String(r.source_id)} ↗
                    </a>
                  </td>
                  <td className={`${td} text-xs text-muted`}>{fmtRelative(new Date(String(r.last_seen_at)))}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        )}
      </Card>
    </>
  );
}