import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { TimeSeriesChart } from "@/components/charts/TimeSeriesChart";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { ChartTypeToggle } from "@/components/charts/ChartTypeToggle";
import { CalendarDays, LineChart } from "lucide-react";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";
import { toDateString } from "@/lib/format";
import { useMoney } from "@/hooks/useMoney";
import { AnimatedMoney } from "@/components/elements/AnimatedMoney";
import { accountDisplayName } from "@/lib/accounts";

const periods = [
  { label: "30 days", days: 30 },
  { label: "3 months", days: 90 },
  { label: "6 months", days: 180 },
  { label: "All time", days: 999 },
];
const periodOptions = periods.map((p) => ({ value: p.label, label: p.label }));

interface AccountBalanceChartProps {
  /** Accounts whose balances are summed into the chart. Empty = nothing selected. */
  accountIds: string[];
  /** Optional control rendered in the header (e.g. an account multi-select). */
  control?: React.ReactNode;
  /** Transactions supplies the linked heatmap; account detail retains its line-only view. */
  heatmap?: React.ReactNode;
  lineChart?: React.ReactNode;
  chartControls?: React.ReactNode;
  /** Optional companion chart, taking one fifth of the card on wide screens. */
  sideChart?: React.ReactNode;
  chartType?: "line" | "heatmap";
  onChartTypeChange?: (type: "line" | "heatmap") => void;
  /** True when every selected account's balance represents money owed
   * (credit cards, loans): plots the debt magnitude instead of the raw
   * (negative) balance, so the line rises as debt grows, in red — more debt
   * is unfavorable, the same convention Sure's credit card detail uses. */
  debt?: boolean;
}

/**
 * Balance-over-time for a chosen set of accounts. Mirrors the dashboard
 * BalanceChart math (anchor the curve to today's real balance, back-compute
 * history from signed daily flow) but scoped to the selected accounts so each
 * bank account shows "how much money is in it" rather than just transactions.
 */
export function AccountBalanceChart({ accountIds, control, debt, heatmap, lineChart, chartControls, sideChart, chartType = "line", onChartTypeChange }: AccountBalanceChartProps) {
  const { transactions, accounts } = useFinanceData();
  const [period, setPeriod] = useState("3 months");
  const { compact, money, date: fmtDate } = useMoney();

  const idSet = useMemo(() => new Set(accountIds), [accountIds]);
  const selectedAccounts = useMemo(() => accounts.filter((a) => idSet.has(a.id)), [accounts, idSet]);

  // Today's balance for the selected accounts = the number the chart ends on.
  const currentBalance = useMemo(
    () => selectedAccounts.reduce((s, a) => s + a.balance, 0),
    [selectedAccounts]
  );

  const allData = useMemo(() => {
    if (accountIds.length === 0) return [];
    // A transaction with no date (a malformed import/sync row) can't be
    // placed on a timeline; keeping it would crash the sort below.
    const txns = transactions.filter((t) => idSet.has(t.accountId) && t.date);
    if (txns.length === 0) return [];
    const sorted = [...txns].sort((a, b) => a.date.localeCompare(b.date));
    const dailyMap: Record<string, number> = {};
    sorted.forEach((t) => {
      const delta = t.type === "income" ? Math.abs(t.amount) : -Math.abs(t.amount);
      dailyMap[t.date] = (dailyMap[t.date] || 0) + delta;
    });
    const days = Object.keys(dailyMap).sort();
    let cumulative = 0;
    const flow = days.map((date) => {
      cumulative += dailyMap[date];
      return { date, cumulative };
    });
    // Shift the running flow so its final point equals today's real balance.
    const offset = currentBalance - (flow.length ? flow[flow.length - 1].cumulative : 0);
    return flow.map(({ date, cumulative }) => ({ date, value: Math.round((cumulative + offset) * 100) / 100 }));
  }, [transactions, idSet, accountIds, currentBalance]);

  const data = useMemo(() => {
    const days = periods.find((p) => p.label === period)?.days;
    // Filter by a real date window. Slicing the array by `days` counted data
    // points, so "30 days" over sparse data silently showed several months.
    if (!days || days >= 999) return allData;
    const cutoff = new Date();
    cutoff.setDate(cutoff.getDate() - days);
    const cutoffStr = toDateString(cutoff);
    return allData.filter((d) => d.date >= cutoffStr);
  }, [allData, period]);

  const subtitle =
    selectedAccounts.length === 0
      ? "No accounts selected"
      : selectedAccounts.length === 1
        ? accountDisplayName(selectedAccounts[0])
        : `${selectedAccounts.length} accounts combined`;

  const displayBalance = debt ? -currentBalance : currentBalance;
  const chartData = useMemo(() => (debt ? data.map((d) => ({ ...d, value: -d.value })) : data), [data, debt]);
  const calendarView = !!heatmap && chartType === "heatmap";

  return (
    <Card className={cn("border-border/50", sideChart && "xl:grid xl:grid-cols-[minmax(0,4fr)_minmax(0,1fr)]")} role="region" aria-label={debt ? "Balance owed" : "Current balance"}>
      <div className="min-w-0">
        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between pb-2">
          <div className="space-y-1">
            <CardDescription className="text-[10px] uppercase tracking-wider font-semibold">
              {debt ? "Balance owed" : "Current balance"}
            </CardDescription>
            <CardTitle className={cn("text-3xl font-bold tabular-nums tracking-tight", debt || currentBalance < 0 ? "text-chart-red" : "text-foreground")}>
              <AnimatedMoney value={displayBalance} />
            </CardTitle>
            <p className="text-xs text-muted-foreground">{subtitle}</p>
          </div>
          <div className="flex flex-col items-end gap-2">
            {control}
            <div className="flex flex-wrap justify-end gap-2">
              {heatmap && onChartTypeChange && <ChartTypeToggle label="Current balance chart type" options={[{ value: "line", label: "Line", icon: LineChart }, { value: "heatmap", label: "Calendar heatmap", icon: CalendarDays }]} value={chartType} onChange={onChartTypeChange} />}
              {chartControls ?? (!calendarView && <SegmentedControl label="Chart period" options={periodOptions} value={period} onChange={setPeriod} />)}
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {calendarView ? heatmap : lineChart ?? (chartData.length === 0 ? (
            <p className="text-sm text-muted-foreground py-12 text-center">
              {accountIds.length === 0
                ? "Select at least one account to see its balance trend."
                : "No transactions for the selected account(s) to chart."}
            </p>
          ) : (
            <TimeSeriesChart
              data={chartData}
              height={240}
              label={debt ? "Owed" : "Balance"}
              formatValue={money}
              formatAxisValue={compact}
              formatDate={(d) => fmtDate(d)}
              yAxisWidth={44}
              colorVar={debt ? "--chart-red" : undefined}
            />
          ))}
        </CardContent>
      </div>
      {sideChart && <div className="flex min-w-0 items-center border-t border-border/50 p-5 xl:border-l xl:border-t-0">{sideChart}</div>}
    </Card>
  );
}