import { useState, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { ArrowLeft } from "lucide-react";
import PeriodSelector from "../components/dashboard/PeriodSelector";
import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
import type { CategoryOverTimeChartType } from "../components/reports/CategoryOverTimeChart";
import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
import ViewModeToggle, { readViewMode, type ViewMode } from "../components/reports/ViewModeToggle";
import TrendsChartTypeToggle, {
  readTrendsChartType,
  TRENDS_CHART_TYPE_STORAGE_KEY,
} from "../components/reports/TrendsChartTypeToggle";
import { useTrends } from "../hooks/useTrends";
import { useReportsPeriod } from "../hooks/useReportsPeriod";
import type { CategoryBreakdownItem } from "../shared/types";

const STORAGE_KEY = "reports-viewmode-trends";

export default function ReportsTrendsPage() {
  const { t } = useTranslation();
  const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
  const { subView, setSubView, monthlyTrends, categoryOverTime, isLoading, error } = useTrends();
  const [viewMode, setViewMode] = useState<ViewMode>(() => readViewMode(STORAGE_KEY));
  const [chartType, setChartType] = useState<CategoryOverTimeChartType>(() => readTrendsChartType());
  const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());

  const preserveSearch = typeof window !== "undefined" ? window.location.search : "";

  const toggleHidden = useCallback((name: string) => {
    setHiddenCategories((prev) => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });
  }, []);

  const showAll = useCallback(() => setHiddenCategories(new Set()), []);
  // viewDetails not used in trends view — transactions details are accessed from category zoom.
  const noOpDetails = useCallback((_item: CategoryBreakdownItem) => {}, []);

  return (
    <div className={isLoading ? "opacity-60" : ""}>
      <div className="flex items-center gap-3 mb-4">
        <Link
          to={`/reports${preserveSearch}`}
          className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] p-1 rounded-md hover:bg-[var(--muted)]"
          aria-label={t("reports.hub.title")}
        >
          <ArrowLeft size={18} />
        </Link>
        <h1 className="text-2xl font-bold">{t("reports.hub.trends")}</h1>
      </div>

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 flex-wrap">
        <PeriodSelector
          value={period}
          onChange={setPeriod}
          customDateFrom={from}
          customDateTo={to}
          onCustomDateChange={setCustomDates}
        />
        <div className="flex gap-2 items-center flex-wrap">
          <div className="inline-flex gap-1">
            <button
              type="button"
              onClick={() => setSubView("global")}
              aria-pressed={subView === "global"}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                subView === "global"
                  ? "bg-[var(--primary)] text-white"
                  : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
              }`}
            >
              {t("reports.trends.subviewGlobal")}
            </button>
            <button
              type="button"
              onClick={() => setSubView("byCategory")}
              aria-pressed={subView === "byCategory"}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                subView === "byCategory"
                  ? "bg-[var(--primary)] text-white"
                  : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
              }`}
            >
              {t("reports.trends.subviewByCategory")}
            </button>
          </div>
          {subView === "byCategory" && viewMode === "chart" && (
            <TrendsChartTypeToggle
              value={chartType}
              onChange={setChartType}
              storageKey={TRENDS_CHART_TYPE_STORAGE_KEY}
            />
          )}
          <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
        </div>
      </div>

      {error && (
        <div className="bg-[var(--negative)]/10 text-[var(--negative)] rounded-xl p-4 mb-6">
          {error}
        </div>
      )}

      {subView === "global" ? (
        viewMode === "chart" ? (
          <MonthlyTrendsChart data={monthlyTrends} />
        ) : (
          <MonthlyTrendsTable data={monthlyTrends} />
        )
      ) : viewMode === "chart" ? (
        <CategoryOverTimeChart
          data={categoryOverTime}
          hiddenCategories={hiddenCategories}
          onToggleHidden={toggleHidden}
          onShowAll={showAll}
          onViewDetails={noOpDetails}
          chartType={chartType}
        />
      ) : (
        <CategoryOverTimeTable data={categoryOverTime} hiddenCategories={hiddenCategories} />
      )}
    </div>
  );
}