import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { activeListingsForAssets, loadWatchlist } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { toggleWatchAction } from '@/lib/account/actions';
import { PageHeader, btnDanger } from '@/components/account/page-header';
import { Card, CardHeader, Delta, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { fmtRelative, fmtPct, confidenceLabel } from '@/lib/format';
import { WatchAddForm, WatchNoteForm } from './forms';

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

export default async function WatchlistPage() {
  const u = await requireUser('/watchlist');
  const d = await getDisplay();
  const rows = await loadWatchlist(u.id);
  const assetRows = rows.filter((r) => r.item.targetType === 'asset');
  const otherRows = rows.filter((r) => r.item.targetType !== 'asset');
  const listingAgg = await activeListingsForAssets(assetRows.map((r) => r.item.targetId));
  const lMap = new Map(listingAgg.map((l) => [l.assetId, l]));

  return (
    <>
      <PageHeader title="Watchlist" description="Assets, categories, sets and sources you follow, with live RareIndex Valuation, change and the cheapest active ask." />
      <Card className="mb-5">
        <CardHeader title={`Assets · ${assetRows.length}`} subtitle="Change since watching uses the RIV at the time you added the asset." />
        {assetRows.length === 0 ? (
          <EmptyState title="No assets watched yet" description="Add an asset below, or use the watch button on any asset page." />
        ) : (
          <Table>
            <thead>
              <tr>
                <th className={th}>Asset</th>
                <th className={`${th} text-right`}>RIV</th>
                <th className={`${th} text-right`}>1d</th>
                <th className={`${th} text-right`}>30d</th>
                <th className={`${th} text-right`}>Since watch</th>
                <th className={`${th} text-right`}>Listings</th>
                <th className={`${th} text-right`}>Min ask</th>
                <th className={`${th} text-right`}>Target</th>
                <th className={th}>Note</th>
                <th className={th}></th>
              </tr>
            </thead>
            <tbody>
              {assetRows.map(({ item, asset, stats }) => {
                const l = lMap.get(item.targetId);
                const since = item.baselineUsd && stats?.rivUsd ? (stats.rivUsd - item.baselineUsd) / item.baselineUsd : null;
                const targetHit = item.targetPriceUsd && stats?.rivUsd ? stats.rivUsd <= item.targetPriceUsd : false;
                return (
                  <tr key={item.id} className="hover:bg-sunken">
                    <td className={td}>
                      {asset ? (
                        <div className="max-w-[280px]">
                          <Link href={`/asset/${asset.slug}`} className="block truncate font-medium hover:underline">
                            {asset.title}
                          </Link>
                          <p className="text-[11px] text-subtle">
                            {asset.categorySlug.replace(/_/g, ' ')} · added {fmtRelative(item.createdAt)}
                          </p>
                        </div>
                      ) : (
                        <span className="text-muted">Asset removed</span>
                      )}
                    </td>
                    <td className={tdNum}>{stats?.rivUsd ? <span title={`confidence ${confidenceLabel(stats.rivConfidence)} · ${stats.rivSampleSize} sales`}>{d.money(stats.rivUsd)}</span> : <span className="text-subtle">—</span>}</td>
                    <td className={tdNum}>
                      <Delta value={stats?.change1d} />
                    </td>
                    <td className={tdNum}>
                      <Delta value={stats?.change30d} />
                    </td>
                    <td className={tdNum}>
                      <Delta value={since} />
                    </td>
                    <td className={tdNum}>{l ? Number(l.n) : 0}</td>
                    <td className={tdNum}>{l?.minAsk ? d.money(Number(l.minAsk)) : <span className="text-subtle">—</span>}</td>
                    <td className={tdNum}>
                      {item.targetPriceUsd ? (
                        <span className={targetHit ? 'text-gain' : ''}>
                          {d.money(item.targetPriceUsd)}
                          {targetHit ? <Badge tone="gain" className="ml-1">hit</Badge> : null}
                        </span>
                      ) : (
                        <span className="text-subtle">—</span>
                      )}
                    </td>
                    <td className={`${td} max-w-[220px]`}>
                      <WatchNoteForm itemId={item.id} note={item.note} targetPriceUsd={item.targetPriceUsd} />
                    </td>
                    <td className={td}>
                      <form action={toggleWatchAction}>
                        <input type="hidden" name="targetType" value="asset" />
                        <input type="hidden" name="targetId" value={item.targetId} />
                        <button className={btnDanger}>Unwatch</button>
                      </form>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        )}
      </Card>
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title={`Markets, sets & sources · ${otherRows.length}`} subtitle="Category watches feed Deal Radar and market-move alerts." />
          {otherRows.length === 0 ? (
            <p className="px-4 py-6 text-xs text-muted">Nothing here yet. Watch a category from its market page, or add one below.</p>
          ) : (
            <ul className="divide-y divide-border">
              {otherRows.map(({ item, category }) => (
                <li key={item.id} className="flex items-center justify-between gap-3 px-4 py-2.5 text-sm">
                  <div>
                    <Badge tone="neutral" className="mr-2">
                      {item.targetType}
                    </Badge>
                    {item.targetType === 'category' ? (
                      <Link href={`/markets/${item.targetId}`} className="hover:underline">
                        {category?.name ?? item.targetId}
                      </Link>
                    ) : (
                      <span>{item.label ?? item.targetId}</span>
                    )}
                    {item.targetType === 'category' && category ? <span className="ml-2 text-xs text-subtle">{fmtPct(null)}</span> : null}
                  </div>
                  <form action={toggleWatchAction}>
                    <input type="hidden" name="targetType" value={item.targetType} />
                    <input type="hidden" name="targetId" value={item.targetId} />
                    <button className={btnDanger}>Unwatch</button>
                  </form>
                </li>
              ))}
            </ul>
          )}
        </Card>
        <Card>
          <CardHeader title="Add to watchlist" />
          <div className="p-4">
            <WatchAddForm />
          </div>
        </Card>
      </div>
    </>
  );
}