import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { shareColor } from "@/components/dashboard/shareColors";
import { useAllInvestmentAccountTags } from "@/hooks/useTags";
import { tagColorValue } from "@/lib/tagColors";
import { usePrivacy } from "@/lib/privacy";
import { formatMoney } from "@/lib/format";
import { cn } from "@/lib/utils";
import type { TagDto } from "@/lib/api";

export interface ConnectedAccountRow {
  id: string;
  label: string;
  to: string;
  value: number;
  pct: number;
  currency: string;
  /** The account's own currency, when its value is shown converted into another. */
  nativeCurrency?: string;
  connected: boolean;
  isManual: boolean;
  actions?: React.ReactNode;
}

type SortMode = "value" | "name";
const SORT_OPTIONS: { value: SortMode; label: string }[] = [
  { value: "value", label: "Value" },
  { value: "name", label: "Name" },
];

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

function initials(label: string): string {
  const words = label.trim().split(/\s+/).filter(Boolean);
  if (words.length === 0) return "?";
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
  return (words[0][0] + words[1][0]).toUpperCase();
}

/**
 * Ranked, information-dense list of every connected/manual source, replacing
 * a grid of big cards: at a glance, which source is biggest and what share
 * of the total it is, the two things a card forces you to compare by eye.
 *
 * Sort (Value/Name) and an optional tag filter give two independent ways to
 * organize the list once it's got more than a handful of accounts in it.
 */
export function ConnectedAccountsList({ accounts, total, currency }: { accounts: ConnectedAccountRow[]; total: number; currency: string }) {
  usePrivacy();
  const [sortMode, setSortMode] = useState<SortMode>("value");
  const [activeTagId, setActiveTagId] = useState<string | null>(null);

  const accountIds = useMemo(() => accounts.map((a) => a.id), [accounts]);
  const tagsById = useAllInvestmentAccountTags(accountIds);

  const allTags = useMemo(() => {
    const seen = new Map<string, TagDto>();
    Object.values(tagsById).forEach((tags) => tags.forEach((t) => seen.set(t.id, t)));
    return [...seen.values()].sort((a, b) => a.name.localeCompare(b.name));
  }, [tagsById]);

  const filtered = activeTagId
    ? accounts.filter((a) => (tagsById[a.id] ?? []).some((t) => t.id === activeTagId))
    : accounts;

  const sorted = useMemo(() => {
    const rows = [...filtered];
    if (sortMode === "name") rows.sort((a, b) => a.label.localeCompare(b.label));
    else rows.sort((a, b) => b.value - a.value);
    return rows;
  }, [filtered, sortMode]);

  return (
    <Card className="border-border/50">
      <CardHeader className="pb-3 space-y-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-semibold">Connected accounts</CardTitle>
          <span className="text-2xl font-bold text-foreground tabular-nums">{accounts.length}</span>
        </div>
        {accounts.length > 1 && (
          <div className="flex items-center justify-between gap-2">
            <SegmentedControl label="Sort by" options={SORT_OPTIONS} value={sortMode} onChange={setSortMode} />
          </div>
        )}
        {allTags.length > 0 && (
          <div className="flex flex-wrap items-center gap-1.5">
            {allTags.map((t) => {
              const active = activeTagId === t.id;
              return (
                <button
                  key={t.id}
                  type="button"
                  onClick={() => setActiveTagId(active ? null : t.id)}
                  className={cn(
                    "inline-flex items-center gap-1 text-[11px] pl-1.5 pr-2 py-0.5 rounded-full border transition-colors",
                    active ? "border-foreground bg-muted" : "border-border bg-muted/40 hover:bg-muted/70"
                  )}
                >
                  <span aria-hidden className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: tagColorValue(t.color) }} />
                  {t.name}
                </button>
              );
            })}
          </div>
        )}
      </CardHeader>
      <CardContent className="p-0 divide-y divide-border/30">
        {sorted.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-8 px-6">
            {activeTagId ? "No accounts with that tag." : "No accounts yet."}
          </p>
        ) : (
          sorted.map((a, i) => {
            const tags = tagsById[a.id] ?? [];
            return (
              <Link
                key={a.id}
                to={a.to}
                className="flex items-center gap-3 px-6 py-3 hover:bg-muted/30 transition-colors group"
              >
                <div
                  className="h-9 w-9 rounded-full flex items-center justify-center text-xs font-bold text-white shrink-0"
                  style={{ backgroundColor: shareColor(i) }}
                >
                  {initials(a.label)}
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-foreground truncate">{a.label}</p>
                  <div className="flex items-center gap-1.5 mt-0.5 flex-wrap">
                    <span className={cn("w-1.5 h-1.5 rounded-full", a.connected || a.isManual ? "bg-chart-green" : "bg-muted-foreground")} />
                    <span className="text-[11px] text-muted-foreground">
                      {a.isManual ? "Manual" : a.connected ? "Connected" : "Disconnected"} · {a.nativeCurrency ?? a.currency}
                    </span>
                    {tags.map((t) => (
                      <span key={t.id} className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0 rounded-full bg-muted/60 text-muted-foreground">
                        <span aria-hidden className="h-1.5 w-1.5 rounded-full shrink-0" style={{ backgroundColor: tagColorValue(t.color) }} />
                        {t.name}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="text-right shrink-0">
                  <p className="text-sm font-bold text-foreground tabular-nums">{fmt(a.value, a.currency)}</p>
                  <p className="text-[11px] text-muted-foreground tabular-nums">
                    {total > 0 ? `${a.pct.toFixed(1)}%` : "—"}
                  </p>
                </div>
                {a.actions && <div className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">{a.actions}</div>}
              </Link>
            );
          })
        )}
      </CardContent>
    </Card>
  );
}