import { useEffect, useMemo, useState, type ReactNode } from "react";
import { SegmentedControl } from "@/components/charts/SegmentedControl";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import type { TransactionFilters } from "@/hooks/useTransactionSearch";
import { calendarDate, type CalendarSelection, type FlowDirection } from "@/lib/calendarActivity";
import { toDateString } from "@/lib/format";
import type { Account, Transaction } from "@/types/finance";
import { AccountBalanceChart } from "./AccountBalanceChart";
import { TransactionsActivityChart } from "./TransactionsActivityChart";

const DIRECTIONS = [{ value: "outflow", label: "Outflow" }, { value: "inflow", label: "Inflow" }] as const;
const PERIODS = [{ days: 30, label: "30 days" }, { days: 90, label: "3 months" }, { days: 180, label: "6 months" }, { days: 0, label: "All time" }];

interface Props {
  accountIds: string[];
  accounts: Account[];
  transactions: Transaction[];
  filters: TransactionFilters;
  chartType: "line" | "heatmap";
  onChartTypeChange: (type: "line" | "heatmap") => void;
  onSelect: (selection: CalendarSelection | null) => void;
  control: ReactNode;
  sideChart?: ReactNode;
}

/** One set of header controls for both daily-flow views; balance stays live. */
export function TransactionsBalanceChart({ accountIds, accounts, transactions, filters, chartType, onChartTypeChange, onSelect, control, sideChart }: Props) {
  const [direction, setDirection] = useState<FlowDirection>("outflow");
  const [periodDays, setPeriodDays] = useState(90);
  const [year, setYear] = useState(() => (filters.dateFrom ?? filters.dateTo ?? new Date()).getFullYear());
  const from = filters.dateFrom ? toDateString(filters.dateFrom) : undefined;
  const to = filters.dateTo ? toDateString(filters.dateTo) : undefined;
  useEffect(() => {
    const date = from ?? to;
    if (date) setYear(Number(date.slice(0, 4)));
  }, [from, to]);

  const years = useMemo(() => {
    const ids = new Set(accountIds);
    return [...new Set([year, new Date().getFullYear(), ...transactions.flatMap(t => {
      const date = calendarDate(t.date);
      return ids.has(t.accountId) && date ? [Number(date.slice(0, 4))] : [];
    })])].sort((a, b) => b - a);
  }, [year, transactions, accountIds]);

  // Both views share the chosen accounts, even when the table has no chart scope.
  const activityFilters = { ...filters, accountId: "all", accountIds };
  const chart = <TransactionsActivityChart filters={activityFilters} accounts={accounts} year={year} direction={direction} chartType={chartType} periodDays={periodDays} onSelect={onSelect} />;

  return <AccountBalanceChart
    accountIds={accountIds}
    control={control}
    sideChart={sideChart}
    chartType={chartType}
    onChartTypeChange={onChartTypeChange}
    lineChart={chart}
    heatmap={chart}
    chartControls={<>
      <SegmentedControl label="Current balance flow" options={DIRECTIONS} value={direction} onChange={setDirection} />
      {chartType === "heatmap" ? <Select value={String(year)} onValueChange={value => { setYear(Number(value)); onSelect(null); }}>
        <SelectTrigger aria-label="Heatmap year" className="h-8 w-[96px] text-xs"><SelectValue /></SelectTrigger>
        <SelectContent>{years.map(y => <SelectItem key={y} value={String(y)}>{y}</SelectItem>)}</SelectContent>
      </Select> : <Select value={String(periodDays)} onValueChange={value => setPeriodDays(Number(value))}>
        <SelectTrigger aria-label="Chart period" className="h-8 w-[112px] text-xs"><SelectValue /></SelectTrigger>
        <SelectContent>{PERIODS.map(p => <SelectItem key={p.days} value={String(p.days)}>{p.label}</SelectItem>)}</SelectContent>
      </Select>}
    </>}
  />;
}