import Link from 'next/link';
import type { PortfolioSummary, ValuedItem } from '@/lib/account/portfolio';
import type { Display } from '@/lib/account/display';
import { Badge, Card, CardHeader, Delta, Stat } from '@/components/ui/primitives';
import { Donut, Bars } from './charts';
import { cn, confidenceLabel, fmtPct } from '@/lib/format';

export function SummaryStats({ s, d, className }: { s: PortfolioSummary; d: Display; className?: string }) {
  return (
    <div className={cn('grid grid-cols-2 gap-4 sm:grid-cols-4', className)}>
      <Stat label="Collection value" value={s.valuedCount ? d.money(s.valueUsd) : '—'} sub={s.valuedCount ? <>{s.valuedCount}/{s.itemCount} items valued · confidence {confidenceLabel(s.confidence)}</> : `${s.itemCount} item${s.itemCount === 1 ? '' : 's'} · no valuation yet`} />
      <Stat label="Cost basis" value={s.costBasisUsd > 0 ? d.money(s.costBasisUsd) : '—'} sub={s.costBasisUsd > 0 ? 'purchase prices at acquisition-date FX' : 'add purchase prices to track returns'} />
      <Stat label="Unrealized gain" value={s.gainUsd === null ? '—' : <span className={s.gainUsd >= 0 ? 'text-gain' : 'text-loss'}>{d.money(s.gainUsd)}</span>} sub={s.gainUsd === null ? 'needs value + cost' : 'items with both value and cost'} />
      <Stat label="Return" value={<Delta value={s.returnPct} className="text-lg" />} sub={s.manualValueUsd > 0 ? `${d.money(s.manualValueUsd)} from manual values` : 'vs cost basis'} />
    </div>
  );
}

export function AllocationCards({ s, d }: { s: PortfolioSummary; d: Display }) {
  return (
    <div className="grid gap-4 lg:grid-cols-3">
      <Card>
        <CardHeader title="Allocation by category" subtitle="Share of valued items" />
        <div className="p-4">
          <Donut data={s.allocationByCategory.map((b) => ({ label: b.label, value: b.valueUsd }))} centerValue={s.allocationByCategory.length ? String(s.allocationByCategory.length) : undefined} centerLabel="categories" />
        </div>
      </Card>
      <Card>
        <CardHeader title="Concentration & mix" subtitle="Where the risk sits" />
        <dl className="grid grid-cols-2 gap-y-2 p-4 text-xs">
          <dt className="text-subtle">Largest position</dt>
          <dd className="num text-right">{fmtPct(s.concentration.topItemShare, 0, false)}</dd>
          <dt className="text-subtle">Top 5 positions</dt>
          <dd className="num text-right">{fmtPct(s.concentration.top5Share, 0, false)}</dd>
          <dt className="text-subtle">HHI (0–1)</dt>
          <dd className="num text-right">{s.concentration.hhi === null ? '—' : s.concentration.hhi.toFixed(2)}</dd>
          <dt className="text-subtle">Graded share</dt>
          <dd className="num text-right">{fmtPct(s.gradingMix.filter((b) => b.key !== 'raw').reduce((a, b) => a + b.share, 0), 0, false)}</dd>
          <dt className="text-subtle">High-liquidity share</dt>
          <dd className="num text-right">{fmtPct(s.liquidityMix.find((b) => b.key === 'high')?.share ?? 0, 0, false)}</dd>
          <dt className="text-subtle">High-rarity share</dt>
          <dd className="num text-right">{fmtPct(s.rarityMix.find((b) => b.key === 'high')?.share ?? 0, 0, false)}</dd>
        </dl>
      </Card>
      <Card>
        <CardHeader title="Best & worst" subtitle="By return on cost" />
        <div className="p-4">
          {s.best.length ? (
            <Bars data={[...s.best.slice(0, 3).map((i) => ({ label: i.title, value: (i.gainPct ?? 0) * 100, tone: 'gain' as const })), ...s.worst.slice(0, 3).map((i) => ({ label: i.title, value: (i.gainPct ?? 0) * 100, tone: 'loss' as const }))]} format={(v) => `${v > 0 ? '+' : ''}${v.toFixed(0)}%`} />
          ) : (
            <p className="text-xs text-subtle">Add purchase prices to see performers.</p>
          )}
          <p className="mt-3 text-[11px] text-subtle">Values in {d.currency}; RIV estimates carry a confidence level.</p>
        </div>
      </Card>
    </div>
  );
}

export function ValueSourceBadge({ item }: { item: ValuedItem }) {
  if (item.valueSource === 'variant_riv') return <Badge tone="index">RIV · {item.grader ? `${item.grader.toUpperCase()} ${item.grade ?? ''}`.trim() : 'variant'}</Badge>;
  if (item.valueSource === 'asset_riv') return <Badge tone="neutral">RIV · asset</Badge>;
  if (item.valueSource === 'manual') return <Badge tone="alert">manual</Badge>;
  return <Badge tone="neutral">no valuation</Badge>;
}

export function AssetLink({ slug, title, className }: { slug: string; title: string; className?: string }) {
  return (
    <Link href={`/asset/${slug}`} className={cn('hover:underline', className)}>
      {title}
    </Link>
  );
}