import { useMemo } from "react";
import { eachDayOfInterval, format } from "date-fns";
import { TimeSeriesChart } from "@/components/charts/TimeSeriesChart";
import { parseLocalDate } from "@/lib/utils";
import { CalendarHeatmap } from "@/components/charts/CalendarHeatmap";
import { Button } from "@/components/ui/button";
import { useTransactionActivity } from "@/hooks/useTransactionActivity";
import type { TransactionFilters } from "@/hooks/useTransactionSearch";
import { useMoney } from "@/hooks/useMoney";
import { toDateString } from "@/lib/format";
import type { CalendarSelection, FlowDirection } from "@/lib/calendarActivity";
import type { Account } from "@/types/finance";

interface Props {
  filters: TransactionFilters;
  accounts: Account[];
  year: number;
  direction: FlowDirection;
  chartType: "line" | "heatmap";
  periodDays: number;
  onSelect: (selection: CalendarSelection | null) => void;
}

/** A chart-only view; search, dates, totals and the ledger belong to Transactions. */
export function TransactionsActivityChart({ filters, accounts, year, direction, chartType, periodDays, onSelect }: Props) {
  const from = filters.dateFrom ? toDateString(filters.dateFrom) : undefined;
  const to = filters.dateTo ? toDateString(filters.dateTo) : undefined;
  const selection = from || to ? { from: from ?? `${year}-01-01`, to: to ?? `${year}-12-31` } : null;
  const selectedAccounts = useMemo(() => accounts.filter(a => filters.accountIds?.includes(a.id) ?? (filters.accountId === "all" || a.id === filters.accountId)), [accounts, filters.accountIds, filters.accountId]);
  const units = [...new Set(selectedAccounts.map(a => a.currency || "XXX"))];
  const currency = units.length === 1 ? units[0] : undefined;
  const { money, compact, date: fmtDate } = useMoney(currency);
  const activity = useTransactionActivity(filters, year, chartType === "line" ? periodDays : undefined);
  const lineData = useMemo(() => {
    if (chartType !== "line" || activity.days.size === 0) return [];
    const dates = [...activity.days.keys()].sort();
    const end = periodDays ? new Date() : parseLocalDate(dates[dates.length - 1]);
    const start = periodDays ? new Date(end.getFullYear(), end.getMonth(), end.getDate() - periodDays + 1) : parseLocalDate(dates[0]);
    return eachDayOfInterval({ start, end }).map(day => {
      const date = toDateString(day);
      return { date, value: activity.days.get(date)?.[direction] ?? 0 };
    });
  }, [activity.days, chartType, periodDays, direction]);

  return (
    <section aria-label={chartType === "heatmap" ? "Transaction activity heatmap" : `Daily ${direction} line chart`} className="min-w-0">
      {selectedAccounts.length === 0 ? <p className="py-10 text-center text-sm text-muted-foreground">Select at least one account to see daily activity.</p>
        : !currency || currency === "XXX" ? <p className="py-10 text-center text-sm text-muted-foreground">Select accounts with the same confirmed currency to compare daily amounts.</p>
        : activity.error ? <div role="alert" className="py-8 text-center"><p className="text-sm text-muted-foreground">Couldn't load daily activity.</p><Button size="sm" variant="ghost" onClick={() => void activity.retry()}>Retry activity</Button></div>
        : activity.loading ? <div role="status" className="flex h-44 items-center justify-center text-sm text-muted-foreground">Loading daily activity…</div>
        : chartType === "line" ? (lineData.length ? <TimeSeriesChart data={lineData} height={240} label={direction === "outflow" ? "Outflow" : "Inflow"} formatValue={money} formatAxisValue={compact} formatDate={fmtDate} yAxisWidth={44} zeroBaseline /> : <p className="py-12 text-center text-sm text-muted-foreground">No transactions for the selected period.</p>)
        : <CalendarHeatmap key={year} year={year} days={activity.days} direction={direction} selection={selection} onSelect={onSelect} formatValue={money} today={toDateString(new Date())} allowFuture />}
      <p className="sr-only">{from ? `From ${format(filters.dateFrom!, "MMMM d, yyyy")}. ` : ""}{to ? `Through ${format(filters.dateTo!, "MMMM d, yyyy")}.` : ""}</p>
    </section>
  );
}