import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { listAlerts } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { deleteAlertAction, toggleAlertAction } from '@/lib/account/actions';
import { PageHeader, btnDanger, btnGhost } from '@/components/account/page-header';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';
import { AlertForm } from './alert-form';

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

const ALERT_LABELS: Record<string, string> = {
  price_below: 'RIV falls below',
  price_above: 'RIV rises above',
  new_listing: 'New listing',
  new_auction: 'New auction lot',
  auction_ending: 'Auction ending soon',
  auction_below_riv: 'Auction bid below RIV (all-in)',
  record_sale: 'New record sale',
  unusual_volume: 'Unusual volume',
  market_move: 'Market move',
  rare_item: 'Rare item appears',
  population_update: 'Population update',
};

export default async function AlertsPage() {
  const u = await requireUser('/alerts');
  const d = await getDisplay();
  const rows = await listAlerts(u.id);
  const prefs = (u.preferences ?? {}) as { emailAlerts?: boolean };
  return (
    <>
      <PageHeader title="Alerts" description="Evaluated continuously by the RareIndex worker against valuations, listings, sales, auctions, radar findings and population reports. Delivered to your inbox and, if enabled, by e-mail." />
      {prefs.emailAlerts === false ? (
        <p className="mb-4 text-xs text-alert">
          E-mail delivery is off in{' '}
          <Link href="/account/notifications" className="underline">
            notification settings
          </Link>
          ; alerts will only appear in your inbox.
        </p>
      ) : null}
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_360px]">
        <Card>
          <CardHeader title={`Your alerts · ${rows.length}`} />
          {rows.length === 0 ? (
            <EmptyState title="No alerts yet" description="Create one on the right — for example, be told when the RIV of a card you want drops below your budget, or when a new listing appears." />
          ) : (
            <Table>
              <thead>
                <tr>
                  <th className={th}>Target</th>
                  <th className={th}>Condition</th>
                  <th className={`${th} text-right`}>Threshold</th>
                  <th className={th}>Channel</th>
                  <th className={th}>Last triggered</th>
                  <th className={`${th} text-right`}>Count</th>
                  <th className={th}></th>
                </tr>
              </thead>
              <tbody>
                {rows.map(({ alert: a, asset }) => (
                  <tr key={a.id} className={a.active ? '' : 'opacity-50'}>
                    <td className={td}>
                      <div className="max-w-[240px]">
                        {asset ? (
                          <Link href={`/asset/${asset.slug}`} className="block truncate font-medium hover:underline">
                            {asset.title}
                          </Link>
                        ) : (
                          <span className="font-medium">{a.name ?? a.targetId}</span>
                        )}
                        <p className="text-[11px] text-subtle">{a.targetType}</p>
                      </div>
                    </td>
                    <td className={td}>{ALERT_LABELS[a.alertType] ?? a.alertType}</td>
                    <td className={tdNum}>{a.threshold !== null ? (a.alertType === 'market_move' || a.alertType === 'unusual_volume' ? `${a.threshold}%` : d.money(a.threshold)) : '—'}</td>
                    <td className={td}>
                      <Badge tone="neutral">{a.channel}</Badge>
                    </td>
                    <td className={`${td} text-xs text-muted`}>{a.lastTriggeredAt ? fmtRelative(a.lastTriggeredAt) : 'never'}</td>
                    <td className={tdNum}>{a.triggerCount}</td>
                    <td className={td}>
                      <div className="flex gap-1">
                        <form action={toggleAlertAction}>
                          <input type="hidden" name="alertId" value={a.id} />
                          <button className={btnGhost}>{a.active ? 'Pause' : 'Resume'}</button>
                        </form>
                        <form action={deleteAlertAction}>
                          <input type="hidden" name="alertId" value={a.id} />
                          <button className={btnDanger}>Delete</button>
                        </form>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </Card>
        <Card>
          <CardHeader title="New alert" />
          <div className="p-4">
            <AlertForm />
          </div>
        </Card>
      </div>
    </>
  );
}