import { BankReconnectButton } from "@/components/plaid/BankReconnectButton";
import { ConnectBankButton } from "@/components/plaid/ConnectBankButton";
import { formatMoney } from "@/lib/format";
import { useState, useMemo } from "react";
import { Layout } from "@/components/Layout";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { useFinanceData } from "@/context/FinanceDataContext";
import { cn } from "@/lib/utils";
import { api } from "@/lib/api";
import { Plus, Landmark, CreditCard, PiggyBank, TrendingUp, Banknote, RefreshCw, Building2, Pencil, Car, Home, Wallet, NotebookPen } from "lucide-react";
import { useNavigate, Link } from "react-router-dom";
import { toast } from "sonner";
import { formatDistanceToNow } from "date-fns";
import { useDocumentTitle } from "@/hooks/useDocumentTitle";
import type { Account } from "@/types/finance";
import { useMoney } from "@/hooks/useMoney";
import { AnimatedMoney } from "@/components/elements/AnimatedMoney";
import { AccountDialog } from "@/components/accounts/AccountDialog";
import { PageSkeleton } from "@/components/skeletons/LoadingSkeletons";
import { isDebtAccount, isBankAccount, isAssetAccount, accountDisplayName, accountSubtitle, isIlliquidAsset } from "@/lib/accounts";
import { ACCOUNT_TINTS } from "@/components/accounts/accountTints";
import { WeightBar } from "@/components/dashboard/WeightBar";
import { shareColor } from "@/components/dashboard/shareColors";
import { Progress } from "@/components/ui/progress";
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from "@/components/ui/alert-dialog";

const typeIcons: Record<string, typeof Landmark> = {
  checking: Landmark,
  savings: PiggyBank,
  credit: CreditCard,
  investment: TrendingUp,
  loan: Banknote,
  vehicle: Car,
  property: Home,
  cash: Wallet,
};

const typeBorderColors: Record<string, string> = {
  checking: "border-l-chart-blue",
  savings: "border-l-chart-green",
  credit: "border-l-chart-orange",
  investment: "border-l-chart-purple",
  loan: "border-l-chart-red",
  vehicle: "border-l-chart-yellow",
  property: "border-l-chart-yellow",
  cash: "border-l-chart-green",
};


export type AccountsScope = "bank" | "assets";

const BANK_TYPES: Account["type"][] = ["checking", "savings", "credit"];
const ASSET_TYPES: Account["type"][] = ["cash", "investment", "property", "vehicle", "loan"];

/**
 * The account list, shared by two pages: Accounts (checking, savings, credit
 * cards: the everyday money) and Assets (cash on hand, investments, property,
 * vehicles and loans: what you own and owe beyond that).
 */
export const AccountsView = ({ scope }: { scope: AccountsScope }) => {
  const isBank = scope === "bank";
  const pageTitle = isBank ? "Accounts" : "Assets";
  const scopeTypes = isBank ? BANK_TYPES : ASSET_TYPES;
  const navigate = useNavigate();
  const {
    accounts, summaryAccounts, hasData, isLoading, plaidItems, syncPlaid, refreshData,
    addAccount, updateAccount, deleteAccount,
  } = useFinanceData();
  const { moneyAbs: fmtCurrency } = useMoney();
  const [editAccount, setEditAccount] = useState<Account | null>(null);
  const [nickInput, setNickInput] = useState("");
  const [savingNick, setSavingNick] = useState(false);
  const [editorOpen, setEditorOpen] = useState(false);
  const [editorAccount, setEditorAccount] = useState<Account | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<Account | null>(null);
  useDocumentTitle(pageTitle);

  // Real sync time comes from the Plaid item (a true timestamp updated every
  // sync), keyed by `plaid-<account_id>`.
  const syncedAtById = useMemo(() => {
    const m: Record<string, string> = {};
    plaidItems.forEach((item) => {
      if (!item?.last_synced) return;
      (item.accounts || []).forEach((a: { account_id: string }) => {
        m[`plaid-${a.account_id}`] = item.last_synced;
      });
    });
    return m;
  }, [plaidItems]);

  const scoped = useMemo(
    () => accounts.filter((a) => (isBank ? isBankAccount(a.type) : isAssetAccount(a.type))),
    [accounts, isBank]
  );
  const ofType = (...types: Account["type"][]) => scoped.filter((a) => types.includes(a.type));
  const sections = isBank
    ? [
        { title: "Bank accounts", list: ofType("checking", "savings") },
        { title: "Credit cards", list: ofType("credit") },
      ]
    : [
        { title: "Cash", list: ofType("cash") },
        { title: "Investments", list: ofType("investment") },
        { title: "Property & vehicles", list: ofType("property", "vehicle") },
        { title: "Loans", list: ofType("loan") },
      ];
  const sum = (list: Account[]) => list.filter(a => summaryAccounts.some(s => s.id === a.id)).reduce((t, a) => t + a.balance, 0);
  const owedTotal = ofType("loan").filter(a => summaryAccounts.some(s => s.id === a.id)).reduce((t, a) => t + Math.abs(a.balance), 0);
  const ownedTotal = sum(ofType("cash", "investment", "property", "vehicle"));

  const syncLabel = (account: Account) => {
    const iso = syncedAtById[account.id] || account.lastSynced;
    const d = iso ? new Date(iso) : null;
    const item = plaidItems.find(item => item.accounts?.some(a => `plaid-${a.account_id}` === account.id));
    const stamp = d && !isNaN(d.getTime()) ? `Synced ${formatDistanceToNow(d, { addSuffix: true })}` : "Not synced yet";
    return item?.requires_reconnect ? `${stamp} · Sign-in required` : item?.sync_error ? `${stamp} · Sync needs attention` : stamp;
  };

  /** Only Plaid-backed accounts have anything to sync. */
  const isPlaid = (a: Account) => a.id.startsWith("plaid-");

  const openRename = (account: Account) => {
    setEditAccount(account);
    setNickInput(account.nickname?.trim() || account.name);
  };

  const saveNickname = async () => {
    if (!editAccount) return;
    setSavingNick(true);
    try {
      // Empty input clears the nickname (falls back to the bank-given name).
      const next = nickInput.trim() === editAccount.name ? "" : nickInput.trim();
      await api.put<Account>("accounts", editAccount.id, { nickname: next });
      refreshData();
      toast.success("Account name updated");
      setEditAccount(null);
    } catch {
      toast.error("Couldn't update the name");
    } finally {
      setSavingNick(false);
    }
  };

  if (isLoading) {
    return (
      <Layout>
        <PageSkeleton />
      </Layout>
    );
  }

  if (!hasData || scoped.length === 0) {
    return (
      <Layout>
        <div className="space-y-6">
          <div>
            <h1 className="text-2xl font-bold text-foreground tracking-tight">{pageTitle}</h1>
            <p className="text-sm text-muted-foreground mt-1">
              {isBank ? "Manage your connected accounts" : "Cash, investments, property, vehicles and loans"}
            </p>
          </div>
          <div className="flex flex-col items-center justify-center py-16 gap-6">
            <div className="h-24 w-24 rounded-full bg-gradient-to-tr from-primary/10 to-primary/30 flex items-center justify-center border border-primary/20 shadow-inner">
              <Building2 size={38} strokeWidth={1.5} className="text-primary/70" />
            </div>
            <div className="text-center space-y-2 max-w-md">
              <h2 className="text-lg font-semibold text-foreground">{isBank ? "No accounts connected" : "No assets or loans yet"}</h2>
              <p className="text-sm text-muted-foreground">
                {isBank
                  ? "Connect your bank securely to see your balances and transactions here."
                  : "Add an investment account, a car, a home or a loan to count it toward your net worth."}
              </p>
            </div>
            <div className="flex flex-wrap justify-center gap-3">
              {isBank ? (
                <ConnectBankButton />
              ) : (
                <Link to="/investments">
                  <Button variant="outline" className="gap-2">
                    <TrendingUp size={16} strokeWidth={1.5} /> Brokerage portfolios
                  </Button>
                </Link>
              )}
              {!isBank && <Button className="gap-2" onClick={() => { setEditorAccount(null); setEditorOpen(true); }}>
                <Plus size={16} strokeWidth={1.5} /> Add asset, cash or loan
              </Button>}
            </div>
          </div>
        </div>

      <AccountDialog
        open={editorOpen}
        onOpenChange={(o) => { setEditorOpen(o); if (!o) setEditorAccount(null); }}
        account={editorAccount}
        types={scopeTypes}
        onAdd={addAccount}
        onUpdate={updateAccount}
      />

      <AlertDialog open={!!confirmDelete} onOpenChange={(o) => !o && setConfirmDelete(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remove "{confirmDelete && accountDisplayName(confirmDelete)}"?</AlertDialogTitle>
            <AlertDialogDescription>
              The account is removed from your list. Transactions recorded against
              it stay in your history, so your totals do not change.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              onClick={async () => {
                const target = confirmDelete;
                setConfirmDelete(null);
                if (!target) return;
                try {
                  await deleteAccount(target.id);
                  toast.success(`${accountDisplayName(target)} removed`);
                } catch {
                  toast.error("Couldn't remove the account");
                }
              }}
            >
              Remove
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      </Layout>
    );
  }

  const renderCard = (account: Account) => {
    const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || "USD");
    const Icon = typeIcons[account.type] || Landmark;
    const borderColor = typeBorderColors[account.type] || "border-l-primary";
    const isDebt = isDebtAccount(account.type);
    const owed = Math.abs(Math.min(account.balance, 0));
    const availableCredit = account.available ?? null;
    const plaidItem = plaidItems.find(item => item.accounts?.some(a => `plaid-${a.account_id}` === account.id));

    return (
      <Card
        key={account.id}
        className={cn("bg-gradient-to-br from-card to-card/50 border-border/60 border-l-4 cursor-pointer hover:bg-muted/30 transition-colors shadow-sm overflow-hidden relative group", borderColor)}
        onClick={() => navigate(`/accounts/${account.id}`)}
      >
        <div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-primary/50 to-primary opacity-0 group-hover:opacity-100 transition-opacity" />
        <CardContent className="p-5">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3 min-w-0">
              <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center shrink-0">
                <Icon size={18} strokeWidth={1.5} className="text-muted-foreground" />
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-1.5">
                  <p className="text-sm font-semibold text-foreground truncate">{accountDisplayName(account)}</p>
                  <button
                    className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-primary shrink-0"
                    aria-label="Rename account"
                    onClick={(e) => { e.stopPropagation(); openRename(account); }}
                  >
                    <Pencil size={12} strokeWidth={1.5} />
                  </button>
                </div>
                <p className="text-xs text-muted-foreground truncate">{accountSubtitle(account)}</p>
              </div>
            </div>
            <div className="text-right shrink-0 ml-2">
              {isDebt ? (
                availableCredit !== null ? (
                  <>
                    <p className="text-lg font-bold tabular-nums text-foreground"><AnimatedMoney currency={account.currency} value={availableCredit} signDisplay="never" /></p>
                    <p className="text-xs text-muted-foreground">Available credit</p>
                  </>
                ) : (
                  <>
                    <p className="text-lg font-bold tabular-nums text-foreground"><AnimatedMoney currency={account.currency} value={owed} signDisplay="never" /></p>
                    <p className="text-xs text-muted-foreground">Balance owed</p>
                  </>
                )
              ) : (
                <>
                  <p className={cn("text-lg font-bold tabular-nums", account.balance >= 0 ? "text-foreground" : "text-chart-red")}>
                    {account.balance < 0 ? "-" : ""}<AnimatedMoney currency={account.currency} value={Math.abs(account.balance)} signDisplay="never" />
                  </p>
                  <p className="text-xs text-muted-foreground capitalize">{account.type}</p>
                </>
              )}
            </div>
          </div>

          {/* Credit card secondary line: what you owe + limit, with a utilization bar */}
          {isDebt && availableCredit !== null && (
            <div className="mt-3 space-y-1.5">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span className="tabular-nums">{fmtCurrency(owed)} owed</span>
                {account.creditLimit != null ? (
                  <span className="tabular-nums">Limit {fmtCurrency(account.creditLimit)}</span>
                ) : account.type === "credit" ? (
                  <span>Limit not set</span>
                ) : null}
              </div>
              {account.type === "credit" && account.creditLimit != null && account.creditLimit > 0 && (
                <Progress
                  value={Math.min(100, (owed / account.creditLimit) * 100)}
                  className={cn("h-1.5", (owed / account.creditLimit) * 100 < 60 ? "[&>div]:bg-chart-green" : "[&>div]:bg-chart-orange")}
                />
              )}
            </div>
          )}

          <div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-border/40 pt-3">
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
              {isPlaid(account) ? (
                <>
                  <RefreshCw size={12} strokeWidth={1.5} />
                  <span>{syncLabel(account)}</span>
                </>
              ) : (
                <span>Added manually</span>
              )}
            </div>
            {/* Linked banks sync on their own, so there is no manual sync button. */}
            {isPlaid(account) && plaidItem?.requires_reconnect ? (
              <div onClick={event => event.stopPropagation()}>
                <BankReconnectButton itemId={plaidItem.item_id} institution={plaidItem.institution_name || account.institution || "Linked bank"} onReconnected={syncPlaid} />
              </div>
            ) : isPlaid(account) ? null : (
              <div className="flex items-center gap-1">
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 px-2 text-[10px] uppercase font-semibold text-muted-foreground hover:text-primary tracking-wide"
                  onClick={(e) => { e.stopPropagation(); setEditorAccount(account); setEditorOpen(true); }}
                >
                  Edit
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 px-2 text-[10px] uppercase font-semibold text-muted-foreground hover:text-chart-red tracking-wide"
                  onClick={(e) => { e.stopPropagation(); setConfirmDelete(account); }}
                >
                  Remove
                </Button>
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    );
  };

  /** What sits under an asset's big number: progress on a loan, gain/loss on a car or home. */
  const assetDetail = (account: Account) => {
    const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || "USD");
    if (account.type === "loan") {
      const paid =
        account.originalPrincipal && account.originalPrincipal > 0
          ? Math.min(100, Math.max(0, ((account.originalPrincipal - Math.abs(account.balance)) / account.originalPrincipal) * 100))
          : null;
      const terms = [
        account.monthlyPayment != null ? `${fmtCurrency(account.monthlyPayment)}/mo` : null,
        account.interestRate != null ? `${account.interestRate}% APR` : null,
      ].filter(Boolean).join(" · ");
      if (paid == null && !terms) return null;
      return (
        <div className="space-y-1.5">
          {paid != null && (
            <>
              <Progress value={paid} className="h-1.5 [&>div]:bg-chart-green" />
              <p className="text-xs text-muted-foreground tabular-nums">{paid.toFixed(0)}% paid off{terms ? ` · ${terms}` : ""}</p>
            </>
          )}
          {paid == null && <p className="text-xs text-muted-foreground tabular-nums">{terms}</p>}
        </div>
      );
    }
    if (isIlliquidAsset(account.type)) {
      if (account.purchasePrice != null) {
        const gain = account.balance - account.purchasePrice;
        return (
          <p className="text-xs tabular-nums text-muted-foreground">
            <span className={gain >= 0 ? "text-chart-green font-medium" : "text-chart-red font-medium"}>
              {gain >= 0 ? "+" : "-"}{fmtCurrency(gain)}
            </span>{" "}since purchase ({fmtCurrency(account.purchasePrice)})
          </p>
        );
      }
      if (account.purchaseDate) return <p className="text-xs text-muted-foreground">Purchased {account.purchaseDate}</p>;
    }
    return null;
  };

  const renderAssetCard = (account: Account) => {
    const fmtCurrency = (n: number) => formatMoney(Math.abs(n), account.currency || "USD");
    const Icon = typeIcons[account.type] || Landmark;
    const isDebt = isDebtAccount(account.type);
    const value = isDebt ? Math.abs(account.balance) : account.balance;
    const caption = isDebt ? "Owed" : account.type === "cash" ? "In cash" : "Current value";
    const detail = assetDetail(account);
    const note = account.notes?.trim();
    return (
      <Card
        key={account.id}
        className="group cursor-pointer border-border/60 bg-gradient-to-br from-card to-card/50 hover:border-primary/40 hover:shadow-sm transition-all"
        onClick={() => navigate(`/accounts/${account.id}`)}
      >
        <CardContent className="p-5 flex h-full flex-col gap-4">
          <div className="flex items-start gap-3">
            <div className={cn("h-11 w-11 rounded-xl flex items-center justify-center shrink-0", ACCOUNT_TINTS[account.type])}>
              <Icon size={20} strokeWidth={1.5} />
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1.5">
                <p className="text-sm font-semibold text-foreground truncate">{accountDisplayName(account)}</p>
                <button
                  className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity text-muted-foreground hover:text-primary shrink-0"
                  aria-label="Rename"
                  onClick={(e) => { e.stopPropagation(); openRename(account); }}
                >
                  <Pencil size={12} strokeWidth={1.5} />
                </button>
              </div>
              <p className="text-xs text-muted-foreground truncate">{accountSubtitle(account)}</p>
            </div>
          </div>

          <div>
            <p className={cn("text-2xl font-bold tabular-nums tracking-tight", value < 0 ? "text-chart-red" : "text-foreground")}>
              {value < 0 ? "-" : ""}{formatMoney(Math.abs(value), account.currency || "USD")}
            </p>
            <p className="text-xs text-muted-foreground mt-0.5">{caption}</p>
          </div>

          {detail}

          {note && (
            <p className="flex gap-1.5 text-xs text-muted-foreground border-t border-border/40 pt-3">
              <NotebookPen size={12} strokeWidth={1.5} className="mt-0.5 shrink-0" />
              <span className="line-clamp-2 whitespace-pre-line">{note}</span>
            </p>
          )}

          <div className="mt-auto flex items-center justify-between pt-1 text-xs text-muted-foreground">
            <span>{isPlaid(account) ? syncLabel(account) : "Added manually"}</span>
            {!isPlaid(account) && (
              <span className="flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
                <button
                  className="px-1.5 py-0.5 rounded hover:text-primary hover:bg-primary/10"
                  onClick={(e) => { e.stopPropagation(); setEditorAccount(account); setEditorOpen(true); }}
                >
                  Edit
                </button>
                <button
                  className="px-1.5 py-0.5 rounded hover:text-chart-red hover:bg-chart-red/10"
                  onClick={(e) => { e.stopPropagation(); setConfirmDelete(account); }}
                >
                  Remove
                </button>
              </span>
            )}
          </div>
        </CardContent>
      </Card>
    );
  };

  // What you own, split for the composition bar (largest first), against what you owe.
  const composition = [
    { key: "cash", label: "Cash", value: sum(ofType("cash")) },
    { key: "investment", label: "Investments", value: sum(ofType("investment")) },
    { key: "property", label: "Property & vehicles", value: sum(ofType("property", "vehicle")) },
  ].filter((g) => g.value > 0).sort((a, b) => b.value - a.value);
  const ownedPositive = composition.reduce((t, g) => t + g.value, 0);
  const netAssets = ownedTotal - owedTotal;

  return (
    <Layout>
      <div className="space-y-8">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
          <div>
            <h1 className="text-2xl font-bold text-foreground tracking-tight">{pageTitle}</h1>
            <p className="text-sm text-muted-foreground mt-0.5">
              {scoped.length} {isBank ? "connected account" : "asset and loan"}{scoped.length === 1 ? "" : "s"}
            </p>
          </div>
          <div className="flex items-center gap-2">
            {isBank ? (
              <ConnectBankButton />
            ) : (
              <Button variant="outline" className="gap-2" onClick={() => navigate("/investments")}>
                <TrendingUp size={16} strokeWidth={1.5} /> Brokerage portfolios
              </Button>
            )}
            {!isBank && <Button
              className="gap-2"
              onClick={() => { setEditorAccount(null); setEditorOpen(true); }}
            >
              <Plus size={16} strokeWidth={1.5} /> Add asset, cash or loan
            </Button>}
          </div>
        </div>

        {!isBank && (
          <Card className="border-border/60 bg-gradient-to-br from-card to-card/40 overflow-hidden">
            <CardContent className="p-6 space-y-5">
              <div className="flex flex-wrap items-end justify-between gap-x-10 gap-y-4">
                <div>
                  <p className="text-xs uppercase tracking-wider text-muted-foreground font-medium">Net assets</p>
                  <p className={cn("mt-1.5 text-4xl font-bold tabular-nums tracking-tight", netAssets < 0 ? "text-chart-red" : "text-foreground")}>
                    {netAssets < 0 ? "-" : ""}{fmtCurrency(netAssets)}
                  </p>
                </div>
                <dl className="flex gap-8 text-sm">
                  <div>
                    <dt className="text-xs text-muted-foreground">You own</dt>
                    <dd className="mt-0.5 font-semibold tabular-nums">{fmtCurrency(ownedTotal)}</dd>
                  </div>
                  <div>
                    <dt className="text-xs text-muted-foreground">You owe</dt>
                    <dd className={cn("mt-0.5 font-semibold tabular-nums", owedTotal > 0 && "text-chart-red")}>{fmtCurrency(owedTotal)}</dd>
                  </div>
                </dl>
              </div>
              {composition.length > 0 && (
                <div className="space-y-3">
                  <WeightBar
                    label={`What you own: ${composition.map((g) => `${g.label} ${((g.value / ownedPositive) * 100).toFixed(0)}%`).join(", ")}`}
                    shares={composition.map((g) => ({ key: g.key, share: (g.value / ownedPositive) * 100 }))}
                    className="h-2"
                  />
                  <ul className="flex flex-wrap gap-x-6 gap-y-1.5 text-xs">
                    {composition.map((g, i) => (
                      <li key={g.key} className="flex items-center gap-2">
                        <span aria-hidden className="h-2 w-2 rounded-full" style={{ backgroundColor: shareColor(i) }} />
                        <span className="text-muted-foreground">{g.label}</span>
                        <span className="font-semibold tabular-nums text-foreground">{fmtCurrency(g.value)}</span>
                        <span className="text-muted-foreground tabular-nums">{((g.value / ownedPositive) * 100).toFixed(0)}%</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {sections.filter((sec) => sec.list.length > 0).map((sec) => (
          <section key={sec.title} className="space-y-3">
            <div className="flex items-baseline justify-between px-1">
              <h2 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground/60">
                {sec.title} <span className="ml-1 normal-case tracking-normal font-normal">· {sec.list.length}</span>
              </h2>
              {!isBank && (
                <span className={cn("text-xs font-semibold tabular-nums", sec.title === "Loans" ? "text-chart-red" : "text-foreground")}>
                  {sec.title === "Loans" ? `${fmtCurrency(owedTotal)} owed` : fmtCurrency(sum(sec.list))}
                </span>
              )}
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
              {sec.list.map(isBank ? renderCard : renderAssetCard)}
            </div>
          </section>
        ))}
      </div>

      {/* Rename / nickname dialog */}
      <Dialog open={!!editAccount} onOpenChange={(o) => !o && setEditAccount(null)}>
        <DialogContent className="sm:max-w-[400px]">
          <DialogHeader>
            <DialogTitle>Rename account</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label>Display name</Label>
              <Input
                value={nickInput}
                onChange={(e) => setNickInput(e.target.value)}
                placeholder={editAccount?.name}
                autoFocus
                onKeyDown={(e) => { if (e.key === "Enter") void saveNickname(); }}
              />
              <p className="text-xs text-muted-foreground">
                A nickname just for you, it won't change anything at your bank. Clear it to use the original name ({editAccount?.name}).
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditAccount(null)}>Cancel</Button>
            <Button onClick={() => void saveNickname()} disabled={savingNick}>{savingNick ? "Saving..." : "Save"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AccountDialog
        open={editorOpen}
        onOpenChange={(o) => { setEditorOpen(o); if (!o) setEditorAccount(null); }}
        account={editorAccount}
        types={scopeTypes}
        onAdd={addAccount}
        onUpdate={updateAccount}
      />

      <AlertDialog open={!!confirmDelete} onOpenChange={(o) => !o && setConfirmDelete(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Remove "{confirmDelete && accountDisplayName(confirmDelete)}"?</AlertDialogTitle>
            <AlertDialogDescription>
              The account is removed from your list. Transactions recorded against
              it stay in your history, so your totals do not change.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              onClick={async () => {
                const target = confirmDelete;
                setConfirmDelete(null);
                if (!target) return;
                try {
                  await deleteAccount(target.id);
                  toast.success(`${accountDisplayName(target)} removed`);
                } catch {
                  toast.error("Couldn't remove the account");
                }
              }}
            >
              Remove
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Layout>
  );
};