import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { listCollections, portfolioHistory, indexSeries } from '@/lib/account/queries';
import { summarizePortfolio, rebase } from '@/lib/account/portfolio';
import { loadItems } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { PageHeader, btnPrimary, btnSecondary } from '@/components/account/page-header';
import { SummaryStats, AllocationCards } from '@/components/account/portfolio-widgets';
import { LineChart } from '@/components/account/charts';
import { Card, CardHeader, Delta, EmptyState, Badge } from '@/components/ui/primitives';
import { fmtRelative } from '@/lib/format';
import { CreateCollectionForm } from './create-form';

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

export default async function CollectionsPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const sp = await searchParams;
  const u = await requireUser('/collections');
  const d = await getDisplay();
  const cols = await listCollections(u.id);
  const allItems = await loadItems(cols.map((c) => c.collection.id));
  const total = summarizePortfolio(allItems);
  const history = await portfolioHistory(u.id);
  const rare = history.length ? await indexSeries('RARE', history[0]!.date) : [];
  const mine = rebase(history.map((h) => ({ date: h.date, value: h.valueUsd })));
  const bench = rebase(rare);

  return (
    <>
      {sp.welcome ? (
        <div className="mb-5 rounded-md border border-index/30 bg-index-bg px-4 py-3 text-sm">
          <p className="font-medium">Welcome to RareIndex{u.name ? `, ${u.name}` : ''}.</p>
          <p className="mt-0.5 text-muted">Start by creating a collection and adding what you own. Every item is valued with the RareIndex Valuation (RIV) when enough market evidence exists — and marked honestly when it does not.</p>
        </div>
      ) : null}
      <PageHeader
        title="Collections"
        description="Your portfolio across every collection, valued with RIV and your cost basis at acquisition-date exchange rates."
        actions={
          <>
            <Link href="/deals" className={btnSecondary}>
              Deal Radar
            </Link>
            <a href="#new" className={btnPrimary}>
              New collection
            </a>
          </>
        }
      />
      {d.fallback ? <p className="mb-3 text-xs text-alert">No exchange rate loaded for your display currency yet — values are shown in USD.</p> : null}
      <SummaryStats s={total} d={d} className="mb-5" />

      <div className="mb-5 grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <Card>
          <CardHeader title="Portfolio value" subtitle={history.length ? `${history.length} daily snapshots · vs RARE index (rebased to 1000)` : 'Daily snapshots begin after your first valued item'} action={<Link href="/my-index" className="text-muted hover:text-fg">My Index →</Link>} />
          <div className="p-4">
            <LineChart series={[{ name: 'My portfolio', points: mine }, ...(bench.length > 1 ? [{ name: 'RARE', points: bench, color: 'var(--ri-fg-subtle)', dashed: true }] : [])]} height={200} />
            {history.length ? (
              <div className="mt-2 flex flex-wrap gap-4 text-xs text-muted">
                <span>
                  <span className="mr-1 inline-block h-2 w-3 rounded-sm bg-index align-middle" /> My portfolio
                </span>
                {bench.length > 1 ? (
                  <span>
                    <span className="mr-1 inline-block h-0.5 w-3 border-t border-dashed border-subtle align-middle" /> RARE Global Collectibles Index
                  </span>
                ) : (
                  <span className="text-subtle">RARE index history is not available yet for this period.</span>
                )}
              </div>
            ) : null}
          </div>
        </Card>
        <Card>
          <CardHeader title="At a glance" />
          <dl className="grid grid-cols-2 gap-y-2 p-4 text-xs">
            <dt className="text-subtle">Collections</dt>
            <dd className="num text-right">{cols.length}</dd>
            <dt className="text-subtle">Items · units</dt>
            <dd className="num text-right">
              {total.itemCount} · {total.unitCount}
            </dd>
            <dt className="text-subtle">Categories</dt>
            <dd className="num text-right">{total.allocationByCategory.length}</dd>
            <dt className="text-subtle">Awaiting valuation</dt>
            <dd className="num text-right">{total.unvaluedCount}</dd>
            <dt className="text-subtle">Display currency</dt>
            <dd className="text-right">{d.currency}</dd>
          </dl>
          <div className="border-t border-border p-4 text-xs text-muted">
            RIV = RareIndex Valuation. Each item shows whether its value comes from a graded-variant RIV, the asset-level RIV, or a manual value you entered. Nothing is invented: items without market evidence stay unvalued.
          </div>
        </Card>
      </div>

      {total.valuedCount > 0 ? <div className="mb-5"><AllocationCards s={total} d={d} /></div> : null}

      <section className="mb-6">
        <h2 className="mb-3 text-base font-semibold tracking-tight">Your collections</h2>
        {cols.length === 0 ? (
          <Card>
            <EmptyState title="No collections yet" description="Create your first collection below. You can keep separate collections per category, per vault, or a wishlist with a budget." />
          </Card>
        ) : (
          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
            {cols.map(({ collection: c, summary: s }) => (
              <Link key={c.id} href={`/collections/${c.id}`} className="card block p-4 transition hover:border-border-strong">
                <div className="flex items-start justify-between gap-2">
                  <div className="min-w-0">
                    <p className="flex items-center gap-2 truncate text-sm font-semibold">
                      {c.color ? <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: c.color }} /> : null}
                      {c.name}
                    </p>
                    <p className="mt-0.5 text-xs text-muted">
                      {s.itemCount} item{s.itemCount === 1 ? '' : 's'} · updated {fmtRelative(c.updatedAt)}
                    </p>
                  </div>
                  <div className="flex gap-1">
                    {c.kind !== 'collection' ? <Badge tone="neutral">{c.kind}</Badge> : null}
                    {c.isPublic ? <Badge tone="index">public</Badge> : null}
                  </div>
                </div>
                <div className="mt-3 flex items-end justify-between">
                  <div>
                    <p className="num text-lg font-semibold">{s.valuedCount ? d.money(s.valueUsd) : '—'}</p>
                    <p className="text-[11px] text-subtle">{s.valuedCount ? `${s.valuedCount}/${s.itemCount} valued` : 'no valuation yet'}</p>
                  </div>
                  <Delta value={s.returnPct} />
                </div>
                {c.kind === 'wishlist' && c.budgetUsd ? (
                  <p className="mt-2 text-[11px] text-muted">
                    Budget {d.money(c.budgetUsd)} · wishlist value {d.money(s.valueUsd)}
                  </p>
                ) : null}
              </Link>
            ))}
          </div>
        )}
      </section>

      <div id="new"><Card>
        <CardHeader title="New collection" subtitle="Private by default. You can share it publicly later from its page." />
        <div className="p-4">
          <CreateCollectionForm />
        </div>
      </Card></div>
    </>
  );
}