import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { listNotifications } from '@/lib/account/queries';
import { clearNotificationsAction, markReadAction } from '@/lib/account/actions';
import { PageHeader, btnSecondary, btnGhost } from '@/components/account/page-header';
import { Card, EmptyState, Badge } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';

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

const TONE: Record<string, 'index' | 'alert' | 'gain' | 'neutral' | 'rarity'> = { alert: 'alert', security: 'loss' as never, system: 'neutral', digest: 'index', target_hit: 'gain', radar: 'rarity' };

export default async function InboxPage() {
  const u = await requireUser('/notifications');
  const rows = await listNotifications(u.id, 100);
  const unread = rows.filter((r) => !r.readAt).length;
  return (
    <>
      <PageHeader
        title="Inbox"
        description={`${unread} unread · alerts, price targets, security events and digests.`}
        actions={
          <>
            <form action={markReadAction}>
              <input type="hidden" name="id" value="all" />
              <button className={btnSecondary}>Mark all read</button>
            </form>
            <form action={clearNotificationsAction}>
              <button className={btnGhost}>Clear read</button>
            </form>
          </>
        }
      />
      <Card>
        {rows.length === 0 ? (
          <EmptyState title="Nothing here yet" description="When an alert triggers or a price target is hit, it lands here first." action={<Link href="/alerts" className={btnSecondary}>Create an alert</Link>} />
        ) : (
          <ul className="divide-y divide-border">
            {rows.map((n) => (
              <li key={n.id} className={`flex items-start gap-3 px-4 py-3 ${n.readAt ? '' : 'bg-sunken'}`}>
                <span className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${n.readAt ? 'bg-transparent' : 'bg-index'}`} />
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <Badge tone={TONE[n.kind] ?? 'neutral'}>{n.kind.replace(/_/g, ' ')}</Badge>
                    <p className="text-sm font-medium">{n.href ? <Link href={n.href} className="hover:underline">{n.title}</Link> : n.title}</p>
                    <span className="text-[11px] text-subtle">{fmtRelative(n.createdAt)}</span>
                  </div>
                  {n.body ? <p className="mt-0.5 text-xs text-muted">{n.body}</p> : null}
                </div>
                {!n.readAt ? (
                  <form action={markReadAction}>
                    <input type="hidden" name="id" value={n.id} />
                    <button className={btnGhost}>Read</button>
                  </form>
                ) : null}
              </li>
            ))}
          </ul>
        )}
      </Card>
    </>
  );
}