import { useMemo } from "react";
import { TrendingUp, TrendingDown } from "lucide-react";
import type { Holding } from "@/types/finance";
import { cn } from "@/lib/utils";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";

interface Props {
  holdings: Holding[];
  currency: string;
}

function fmt(v: number, c: string) {
  return formatMoney(v, c, { decimals: 2 });
}

export function TopMovers({ holdings, currency }: Props) {
  // Local formatter reads privacy mode; subscribe so toggling it re-renders.
  usePrivacy();
  // "Movers" means today's movement. Ranking by `changePercent` (total return
  // since purchase) just listed the oldest winners every day.
  const move = (h: Holding) => h.dayChangePercent ?? 0;

  const { gainers, losers } = useMemo(() => {
    const sorted = [...holdings].sort((a, b) => move(b) - move(a));
    return {
      gainers: sorted.filter((h) => move(h) > 0).slice(0, 3),
      losers: sorted.filter((h) => move(h) < 0).slice(-3).reverse(),
    };
  }, [holdings]);

  const renderList = (items: Holding[], isGainer: boolean) => (
    <div className="space-y-1">
      {items.length === 0 && (
        <p className="text-xs text-muted-foreground py-3 text-center">No {isGainer ? "gainers" : "losers"}</p>
      )}
      {items.map((h, i) => (
        <div
          key={h.id}
          className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-muted/40 transition-colors duration-150 animate-fade-in"
          style={{ animationDelay: `${i * 80}ms` }}
        >
          <div className="flex items-center gap-2.5 min-w-0">
            <div className={cn(
              "w-7 h-7 rounded-md flex items-center justify-center text-xs font-bold shrink-0",
              isGainer ? "bg-chart-green/10 text-chart-green" : "bg-chart-red/10 text-chart-red"
            )}>
              {isGainer ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
            </div>
            <div className="min-w-0">
              <p className="text-sm font-semibold text-foreground truncate">{h.symbol}</p>
              <p className="text-xs text-muted-foreground tabular-nums">{fmt(h.price, h.currency ?? currency)}</p>
            </div>
          </div>
          <span className={cn(
            "text-sm font-bold tabular-nums",
            isGainer ? "text-chart-green" : "text-chart-red"
          )}>
            {move(h) >= 0 ? "+" : ""}{move(h).toFixed(2)}%
          </span>
        </div>
      ))}
    </div>
  );

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <h3 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground/60 px-3 mb-2">Top gainers today</h3>
        {renderList(gainers, true)}
      </div>
      <div>
        <h3 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground/60 px-3 mb-2">Top losers today</h3>
        {renderList(losers, false)}
      </div>
    </div>
  );
}