import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { TimeSeriesChart } from "@/components/charts/TimeSeriesChart";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { ChartTypeToggle } from "@/components/charts/ChartTypeToggle";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMemo, useState } from "react";
import { cn } from "@/lib/utils";
import { useMoney } from "@/hooks/useMoney";
import { periodChange } from "@/lib/balanceSheet";
import { cashBalanceSeries } from "@/lib/balanceHistory";
import { useParentSize } from "@visx/responsive";
import { TrendingDown, TrendingUp, LineChart as LineChartIcon, BarChart3 } from "lucide-react";

const CHART_TYPES = [
  { value: "line", icon: LineChartIcon, label: "Line" },
  { value: "bar", icon: BarChart3, label: "Bar" },
] as const;

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 BalanceChartProps {
  inline?: boolean;
}

export function BalanceChart({ inline }: BalanceChartProps) {
  const { transactions, accounts } = useFinanceData({ summary: true });
  const [period, setPeriod] = useState("3 months");
  const [chartType, setChartType] = useState<"line" | "bar">("line");
  const { compact, money, date: fmtDate } = useMoney();

  // Spendable cash (checking + savings) over time: see cashBalanceSeries for
  // why cars, loans and brokerage accounts are left out and how the line is
  // smoothed into a trend instead of a heartbeat.
  const days = periods.find((p) => p.label === period)?.days ?? 90;
  const data = useMemo(
    () => cashBalanceSeries(transactions, accounts, days >= 999 ? null : days),
    [transactions, accounts, days]
  );

  const change = useMemo(() => periodChange(data.map((d) => d.value)), [data]);
  const { parentRef: fillRef, height: fillHeight } = useParentSize({ debounceTime: 30 });

  const chart = (
    <div className={cn(inline && "flex flex-col h-full")}>
      <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
        {change ? (
          <p className="flex items-center gap-1 text-xs tabular-nums">
            {change.amount > 0 ? (
              <TrendingUp size={14} strokeWidth={1.75} className="text-chart-green" aria-hidden />
            ) : change.amount < 0 ? (
              <TrendingDown size={14} strokeWidth={1.75} className="text-chart-red" aria-hidden />
            ) : null}
            <span className={cn("font-medium", change.amount > 0 ? "text-chart-green" : change.amount < 0 ? "text-chart-red" : "text-foreground")}>
              {change.amount > 0 ? "+" : change.amount < 0 ? "-" : ""}{money(Math.abs(change.amount))}
              {change.pct !== null && ` (${change.pct > 0 ? "+" : ""}${change.pct.toFixed(1)}%)`}
            </span>
            <span className="sr-only">{period === "All time" ? "all time" : `over ${period}`}</span>
          </p>
        ) : (
          <span />
        )}
        <div className="flex items-center gap-2 ml-auto">
          <ChartTypeToggle options={CHART_TYPES} value={chartType} onChange={setChartType} label="Chart type" />
          <SegmentedControl label="Chart period" options={periodOptions} value={period} onChange={setPeriod} />
        </div>
      </div>
      {/* Inline, the plot grows to fill its card when the card beside it is
          taller, instead of leaving a blank band under the chart. */}
      <div ref={inline ? fillRef : undefined} className={cn(inline && "flex-1 min-h-[260px]")}>
        {data.length ? <TimeSeriesChart
          data={data}
          height={inline ? Math.max(260, Math.floor(fillHeight)) : 280}
          label="Balance"
          formatValue={money}
          formatAxisValue={compact}
          formatDate={(d) => fmtDate(d)}
          chartType={chartType}
        /> : <p className="py-12 text-center text-sm text-muted-foreground">No transactions to chart for checking and savings.</p>}
      </div>
    </div>
  );

  if (inline) return chart;

  return (
    <Card className="border-border/50">
      <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pb-2">
        <div className="space-y-1">
          <CardTitle className="text-base font-semibold">Balance Over Time</CardTitle>
          <CardDescription>Your total balance over time</CardDescription>
        </div>
      </CardHeader>
      <CardContent>{chart}</CardContent>
    </Card>
  );
}