import { Link } from "react-router-dom";
import { ArrowRight, TrendingUp, TrendingDown } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";

interface CurrencyBreakdown {
  value: number;
  gain: number;
  gainPct: number;
}

interface Props {
  name: string;
  icon: React.ReactNode;
  to: string;
  portfolioValue: number;
  totalGain: number;
  totalGainPct: number;
  holdingsCount: number;
  currency: string;
  connected: boolean;
  /** Optional action buttons rendered in the card header (e.g. rename/delete for manual accounts). */
  actions?: React.ReactNode;
  /**
   * When an account holds multiple currencies, pass a per-currency breakdown
   * so we avoid displaying a cross-currency sum. When present and length > 1,
   * the single-figure display is replaced with a stacked per-currency view.
   */
  currencyBreakdown?: Record<string, CurrencyBreakdown>;
}

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

export function SourceCard({ name, icon, to, portfolioValue, totalGain, totalGainPct, holdingsCount, currency, connected, actions, currencyBreakdown }: Props) {
  // Local formatter reads privacy mode; subscribe so toggling it re-renders.
  usePrivacy();
  const isPositive = totalGain >= 0;
  const breakdownEntries = currencyBreakdown ? Object.entries(currencyBreakdown) : [];
  const isMixed = breakdownEntries.length > 1;

  return (
    <Link to={to} className="block group">
      <Card className="bg-card/60 border-border/50 hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 overflow-hidden relative">
        <div className={cn(
          "absolute inset-x-0 bottom-0 h-0.5 transition-all duration-300 opacity-0 group-hover:opacity-100",
          isPositive ? "bg-gradient-to-r from-chart-green/50 to-chart-green" : "bg-gradient-to-r from-chart-red/50 to-chart-red"
        )} />
        <CardContent className="p-5">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                {icon}
              </div>
              <div>
                <h3 className="text-sm font-bold text-foreground">{name}</h3>
                <div className="flex items-center gap-1.5 mt-0.5">
                  <span className={cn("w-1.5 h-1.5 rounded-full", connected ? "bg-chart-green" : "bg-muted-foreground")} />
                  <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
                    {connected ? "Connected" : "Disconnected"}
                  </span>
                </div>
              </div>
            </div>
            <div className="flex items-center gap-1 mt-0.5">
              {actions}
              <ArrowRight size={16} className="text-muted-foreground/40 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200" />
            </div>
          </div>

          <div className="space-y-3">
            {isMixed ? (
              <>
                <div className="space-y-0.5">
                  {breakdownEntries.map(([c, bd]) => (
                    <p key={c} className="text-lg font-bold text-foreground tabular-nums tracking-tight leading-tight">
                      {fmt(bd.value, c)}
                    </p>
                  ))}
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    {breakdownEntries.map(([c, bd]) => (
                      <div key={c} className="flex items-center gap-1">
                        {bd.gain >= 0 ? <TrendingUp size={11} className="text-chart-green" /> : <TrendingDown size={11} className="text-chart-red" />}
                        <span className={cn("text-xs font-bold tabular-nums", bd.gain >= 0 ? "text-chart-green" : "text-chart-red")}>
                          {bd.gain >= 0 ? "+" : ""}{fmt(bd.gain, c)} ({bd.gainPct >= 0 ? "+" : ""}{bd.gainPct.toFixed(2)}%)
                        </span>
                      </div>
                    ))}
                  </div>
                  <span className="text-xs text-muted-foreground self-end">{holdingsCount} holdings</span>
                </div>
              </>
            ) : (
              <>
                <div>
                  <p className="text-2xl font-bold text-foreground tabular-nums tracking-tight">
                    {fmt(portfolioValue, currency)}
                  </p>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-1.5">
                    {isPositive ? <TrendingUp size={13} className="text-chart-green" /> : <TrendingDown size={13} className="text-chart-red" />}
                    <span className={cn("text-xs font-bold tabular-nums", isPositive ? "text-chart-green" : "text-chart-red")}>
                      {isPositive ? "+" : ""}{fmt(totalGain, currency)} ({isPositive ? "+" : ""}{totalGainPct.toFixed(2)}%)
                    </span>
                  </div>
                  <span className="text-xs text-muted-foreground">{holdingsCount} holdings</span>
                </div>
              </>
            )}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}