import { useMemo, useState } from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { WeightRing } from "@/components/charts/WeightRing";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import type { Holding } from "@/types/finance";
import { cn } from "@/lib/utils";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";
import { Search } from "lucide-react";

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

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

const TOP_N = 8;

/**
 * Consolidated holdings, ranked by weight - the same table + ring pattern
 * already used on the per-account holdings page, just rolled up across every
 * connected source. Replaces the portfolio heatmap: a treemap needs every
 * tile to size against the others, so a handful of holdings with a missing
 * or zero price (common for a freshly-added manual position, or a brokerage
 * quote that hasn't synced yet) rendered as an invisible zero-area tile with
 * nothing on screen to say why. A table row always shows its value, even
 * when that value is $0.
 */
export function PortfolioAllocation({ holdings, currency, investmentAccounts }: Props) {
  // Local formatter reads privacy mode; subscribe so toggling it re-renders.
  usePrivacy();
  const [query, setQuery] = useState("");

  const accountLabel = useMemo(
    () => new Map(investmentAccounts.map((a) => [a.id, a.label])),
    [investmentAccounts]
  );

  const { rows, top, restCount, restValue, restWeight } = useMemo(() => {
    const inCur = holdings.filter((h) => (h.currency ?? currency) === currency);
    const total = inCur.reduce((s, h) => s + h.shares * h.price, 0);
    const rows = inCur
      .map((h) => {
        const value = h.shares * h.price;
        return {
          ...h,
          value,
          returnVal: h.change * h.shares,
          weight: total > 0 ? (value / total) * 100 : 0,
          accountName: (h.investmentAccountId && accountLabel.get(h.investmentAccountId)) || "Manual",
        };
      })
      .sort((a, b) => b.value - a.value);

    const top = rows.slice(0, TOP_N);
    const rest = rows.slice(TOP_N);
    const restValue = rest.reduce((s, h) => s + h.value, 0);
    return { rows, top, restCount: rest.length, restValue, restWeight: total > 0 ? (restValue / total) * 100 : 0 };
  }, [holdings, currency, accountLabel]);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return null;
    return rows.filter((h) => h.symbol.toLowerCase().includes(q) || h.name.toLowerCase().includes(q));
  }, [rows, query]);

  const shown = filtered ?? top;

  if (rows.length === 0) return null;

  return (
    <div className="space-y-3">
      <div className="relative max-w-xs">
        <Search size={14} strokeWidth={1.5} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
        <Input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Filter holdings…"
          className="pl-8 h-8 text-sm bg-background"
        />
      </div>
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="border-border/30 hover:bg-transparent">
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9">Holding</TableHead>
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9">Account</TableHead>
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9">Type</TableHead>
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9 text-right w-24">Weight</TableHead>
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9 text-right">Value</TableHead>
              <TableHead className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider h-9 text-right pr-1">Return</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {shown.length === 0 ? (
              <TableRow className="border-border/20 hover:bg-transparent">
                <TableCell colSpan={6} className="py-8 text-center text-sm text-muted-foreground">
                  No holdings match "{query}".
                </TableCell>
              </TableRow>
            ) : (
              shown.map((h, i) => {
                const returnPct = Number.isFinite(h.changePercent) ? h.changePercent : null;
                const isPositive = h.changePercent >= 0;
                return (
                  <TableRow
                    key={h.id}
                    className="border-border/20 transition-colors hover:bg-muted/20 animate-fade-in"
                    style={{ animationDelay: `${i * 30}ms` }}
                  >
                    <TableCell className="py-2.5">
                      <p className="text-sm font-bold text-foreground">{h.symbol}</p>
                      <p className="text-xs text-muted-foreground truncate max-w-[180px]">{h.name}</p>
                    </TableCell>
                    <TableCell className="py-2.5">
                      <Badge variant="outline" className="font-normal text-[11px]">{h.accountName}</Badge>
                    </TableCell>
                    <TableCell className="py-2.5 text-xs text-muted-foreground">{h.category || "—"}</TableCell>
                    <TableCell className="text-right py-2.5">
                      <div className="flex items-center justify-end gap-1.5">
                        <WeightRing pct={h.weight} />
                        <span className="text-xs text-muted-foreground tabular-nums w-9 text-right">{h.weight.toFixed(1)}%</span>
                      </div>
                    </TableCell>
                    <TableCell className="text-sm text-foreground text-right py-2.5 font-bold tabular-nums">{fmt(h.value, h.currency ?? currency)}</TableCell>
                    <TableCell className="text-right py-2.5 pr-1">
                      <span className={cn("text-xs font-bold tabular-nums", isPositive ? "text-chart-green" : "text-chart-red")}>
                        {returnPct === null ? "—" : `${isPositive ? "+" : ""}${returnPct.toFixed(2)}%`}
                      </span>
                    </TableCell>
                  </TableRow>
                );
              })
            )}
            {!filtered && restCount > 0 && (
              <TableRow className="border-border/20">
                <TableCell colSpan={3} className="py-2.5 text-sm text-muted-foreground">{restCount} other holding{restCount === 1 ? "" : "s"}</TableCell>
                <TableCell className="text-right py-2.5">
                  <div className="flex items-center justify-end gap-1.5">
                    <WeightRing pct={restWeight} />
                    <span className="text-xs text-muted-foreground tabular-nums w-9 text-right">{restWeight.toFixed(1)}%</span>
                  </div>
                </TableCell>
                <TableCell className="text-sm text-muted-foreground text-right py-2.5 tabular-nums">{fmt(restValue, currency)}</TableCell>
                <TableCell className="text-right py-2.5 pr-1" />
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      {!filtered && restCount > 0 && (
        <p className="text-[11px] text-muted-foreground/70 px-1">
          Showing {top.length} of {rows.length} holdings.
        </p>
      )}
    </div>
  );
}