import type { Metadata } from 'next';
import Link from 'next/link';
import { requireUser } from '@/lib/auth/session';
import { indexSeries, listCollections, loadItems, portfolioHistory } from '@/lib/account/queries';
import { rebase, summarizePortfolio } from '@/lib/account/portfolio';
import { getDisplay } from '@/lib/account/display';
import { INDICES, indexForCategory } from '@rareindex/taxonomy';
import { PageHeader, btnSecondary } from '@/components/account/page-header';
import { LineChart } from '@/components/account/charts';
import { Card, CardHeader, Delta, Stat } from '@/components/ui/primitives';
import { pctChange, volatility, maxDrawdown } from '@rareindex/shared';
import { fmtPct } from '@/lib/format';

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

/** Personal index: the member's portfolio value rebased to 1000, against RARE and the relevant subindices. */
export default async function MyIndexPage() {
  const u = await requireUser('/my-index');
  const d = await getDisplay();
  const cols = await listCollections(u.id);
  const items = await loadItems(cols.map((c) => c.collection.id));
  const summary = summarizePortfolio(items);
  const history = await portfolioHistory(u.id);
  const since = history[0]?.date;
  const mine = rebase(history.map((h) => ({ date: h.date, value: h.valueUsd })));
  const tickers = ['RARE', ...new Set(summary.allocationByCategory.map((b) => indexForCategory(b.key)?.ticker).filter((t): t is string => Boolean(t)))].slice(0, 5);
  const bench = await Promise.all(tickers.map(async (t) => ({ ticker: t, points: rebase(await indexSeries(t, since)) })));
  const values = history.map((h) => h.valueUsd);
  const last = values[values.length - 1] ?? null;
  const nowMs = new Date().getTime();
  const at = (days: number) => {
    if (!history.length) return null;
    const target = new Date(nowMs - days * 86_400_000).toISOString().slice(0, 10);
    const p = [...history].reverse().find((h) => h.date <= target);
    return p ? pctChange(p.valueUsd, last) : null;
  };
  const vol = volatility(values, 365);
  const dd = maxDrawdown(values);

  return (
    <>
      <PageHeader title="My Index" description="Your portfolio as an index: rebased to 1,000 on your first snapshot and compared with RARE and the subindices of the categories you hold." actions={<Link href="/collections" className={btnSecondary}>Collections</Link>} />
      <div className="mb-5 grid grid-cols-2 gap-4 sm:grid-cols-5">
        <Stat label="My index" value={mine.length ? mine[mine.length - 1]!.value.toFixed(1) : '—'} sub={history.length ? `${history.length} snapshots since ${since}` : 'no snapshots yet'} />
        <Stat label="7d" value={<Delta value={at(7)} className="text-lg" />} />
        <Stat label="30d" value={<Delta value={at(30)} className="text-lg" />} />
        <Stat label="Volatility (ann.)" value={vol === null ? '—' : fmtPct(vol, 1, false)} sub={values.length < 30 ? 'needs 30+ days' : 'from daily snapshots'} />
        <Stat label="Max drawdown" value={dd === null ? '—' : fmtPct(-dd, 1)} />
      </div>
      <Card>
        <CardHeader title="Rebased performance" subtitle={`Portfolio value in ${d.currency} vs indices · both rebased to 1,000`} />
        <div className="p-4">
          <LineChart series={[{ name: 'My index', points: mine }, ...bench.filter((b) => b.points.length > 1).map((b, i) => ({ name: b.ticker, points: b.points, color: INDICES.find((x) => x.ticker === b.ticker)?.color ?? `var(--ri-fg-subtle)`, dashed: i > 0 }))]} height={260} formatY={(v) => v.toFixed(0)} />
          <div className="mt-3 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 index
            </span>
            {bench.map((b) => (
              <span key={b.ticker}>
                <span className="mr-1 inline-block h-2 w-3 rounded-sm align-middle" style={{ background: INDICES.find((x) => x.ticker === b.ticker)?.color ?? 'var(--ri-fg-subtle)' }} /> {b.ticker}
                {b.points.length <= 1 ? <span className="text-subtle"> (no history yet)</span> : null}
              </span>
            ))}
          </div>
          <p className="mt-3 text-[11px] text-subtle">Your index reflects valuation changes and additions/removals; it is not a time-weighted return. Index values are published only when enough constituents are priced.</p>
        </div>
      </Card>
    </>
  );
}