import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { exposureStats } from "@/lib/holdings";
import type { Holding } from "@/types/finance";

function Bar({ label, value, pct }: { label: string; value: string; pct: number }) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-baseline justify-between text-sm">
        <span className="text-foreground font-medium">{label}</span>
        <span className="text-muted-foreground tabular-nums">{value}</span>
      </div>
      <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
        <div className="h-full rounded-full bg-primary" style={{ width: `${Math.min(100, Math.max(0, pct))}%` }} />
      </div>
    </div>
  );
}

/**
 * How concentrated the portfolio is, not a recommendation, a read: the
 * single biggest position, the top three combined, and whichever currency
 * dominates. Same underlying holdings the Allocation panel groups, a
 * different question about them.
 */
export function ExposurePanel({ holdings }: { holdings: Holding[] }) {
  const stats = exposureStats(holdings);

  return (
    <Card className="border-border/50">
      <CardHeader className="pb-3">
        <CardTitle className="text-base font-semibold">Exposure</CardTitle>
        <CardDescription>Concentration across the portfolio</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {stats.total === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">No holdings yet.</p>
        ) : (
          <>
            {stats.topHolding && (
              <Bar label={`Top holding · ${stats.topHolding.symbol}`} value={`${stats.topHolding.pct.toFixed(1)}%`} pct={stats.topHolding.pct} />
            )}
            <Bar label="Top 3 holdings" value={`${stats.top3Pct.toFixed(1)}%`} pct={stats.top3Pct} />
            {stats.topCurrency && (
              <Bar label={`${stats.topCurrency.currency} exposure`} value={`${stats.topCurrency.pct.toFixed(1)}%`} pct={stats.topCurrency.pct} />
            )}
          </>
        )}
      </CardContent>
    </Card>
  );
}