Simpl-Resultat/src/pages/ReportsPage.tsx

import { useState, useCallback, useMemo, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Hash, Table, BarChart3 } from "lucide-react";
import { useReports } from "../hooks/useReports";
import { PageHelp } from "../components/shared/PageHelp";
import type { ReportTab, CategoryBreakdownItem, ImportSource } from "../shared/types";
import { getAllSources } from "../services/importSourceService";
import PeriodSelector from "../components/dashboard/PeriodSelector";
import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
import CategoryBarChart from "../components/reports/CategoryBarChart";
import CategoryTable from "../components/reports/CategoryTable";
import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
import BudgetVsActualTable from "../components/reports/BudgetVsActualTable";
import DynamicReport from "../components/reports/DynamicReport";
import ReportFilterPanel from "../components/reports/ReportFilterPanel";
import TransactionDetailModal from "../components/shared/TransactionDetailModal";
import { computeDateRange, buildMonthOptions } from "../utils/dateRange";

const TABS: ReportTab[] = ["trends", "byCategory", "overTime", "budgetVsActual", "dynamic"];

export default function ReportsPage() {
  const { t, i18n } = useTranslation();
  const { state, setTab, setPeriod, setCustomDates, setBudgetMonth, setPivotConfig, setSourceId, setCategoryType } = useReports();
  const [sources, setSources] = useState<ImportSource[]>([]);

  useEffect(() => {
    getAllSources().then(setSources);
  }, []);

  const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
  const [detailModal, setDetailModal] = useState<CategoryBreakdownItem | null>(null);
  const [showAmounts, setShowAmounts] = useState(() => localStorage.getItem("reports-show-amounts") === "true");
  const [viewMode, setViewMode] = useState<"chart" | "table">(() =>
    (localStorage.getItem("reports-view-mode") as "chart" | "table") || "chart"
  );

  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()), []);

  const viewDetails = useCallback((item: CategoryBreakdownItem) => {
    setDetailModal(item);
  }, []);

  const { dateFrom, dateTo } = computeDateRange(state.period, state.customDateFrom, state.customDateTo);

  const filterCategories = useMemo(() => {
    if (state.tab === "byCategory") {
      return state.categorySpending.map((c) => ({ name: c.category_name, color: c.category_color }));
    }
    if (state.tab === "overTime") {
      return state.categoryOverTime.categories.map((name) => ({
        name,
        color: state.categoryOverTime.colors[name] || "#9ca3af",
      }));
    }
    return [];
  }, [state.tab, state.categorySpending, state.categoryOverTime]);

  const monthOptions = useMemo(() => buildMonthOptions(i18n.language), [i18n.language]);

  const hasCategories = ["byCategory", "overTime"].includes(state.tab) && filterCategories.length > 0;
  const showFilterPanel = hasCategories || (state.tab === "trends" && sources.length > 1);

  return (
    <div className={state.isLoading ? "opacity-50 pointer-events-none" : ""}>
      <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div className="flex items-center gap-3">
          {state.tab === "budgetVsActual" ? (
            <h1 className="text-2xl font-bold flex items-center gap-2 flex-wrap">
              {t("reports.bva.titlePrefix")}
              <select
                value={`${state.budgetYear}-${state.budgetMonth}`}
                onChange={(e) => {
                  const [y, m] = e.target.value.split("-").map(Number);
                  setBudgetMonth(y, m);
                }}
                className="text-lg font-bold bg-[var(--card)] border border-[var(--border)] rounded-lg px-2 py-0.5 cursor-pointer hover:bg-[var(--muted)] transition-colors"
              >
                {monthOptions.map((opt) => (
                  <option key={opt.key} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            </h1>
          ) : (
            <h1 className="text-2xl font-bold">{t("reports.title")}</h1>
          )}
          <PageHelp helpKey="reports" />
        </div>
        {state.tab !== "budgetVsActual" && (
          <PeriodSelector
            value={state.period}
            onChange={setPeriod}
            customDateFrom={state.customDateFrom}
            customDateTo={state.customDateTo}
            onCustomDateChange={setCustomDates}
          />
        )}
      </div>

      <div className="flex gap-2 mb-6 flex-wrap items-center">
        {TABS.map((tab) => (
          <button
            key={tab}
            onClick={() => setTab(tab)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              tab === state.tab
                ? "bg-[var(--primary)] text-white"
                : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
            }`}
          >
            {t(`reports.${tab}`)}
          </button>
        ))}
        {["trends", "byCategory", "overTime"].includes(state.tab) && (
          <>
            <div className="mx-1 h-6 w-px bg-[var(--border)]" />
            {([
              { mode: "chart" as const, icon: <BarChart3 size={14} />, label: t("reports.pivot.viewChart") },
              { mode: "table" as const, icon: <Table size={14} />, label: t("reports.pivot.viewTable") },
            ]).map(({ mode, icon, label }) => (
              <button
                key={mode}
                onClick={() => {
                  setViewMode(mode);
                  localStorage.setItem("reports-view-mode", mode);
                }}
                className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  mode === viewMode
                    ? "bg-[var(--primary)] text-white"
                    : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
                }`}
              >
                {icon}
                {label}
              </button>
            ))}
            {viewMode === "chart" && (
              <>
                <div className="mx-1 h-6 w-px bg-[var(--border)]" />
                <button
                  onClick={() => {
                    setShowAmounts((prev) => {
                      const next = !prev;
                      localStorage.setItem("reports-show-amounts", String(next));
                      return next;
                    });
                  }}
                  className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                    showAmounts
                      ? "bg-[var(--primary)] text-white"
                      : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
                  }`}
                  title={showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
                >
                  <Hash size={14} />
                  {showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
                </button>
              </>
            )}
          </>
        )}
      </div>

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

      <div className={showFilterPanel ? "flex gap-4 items-start" : ""}>
        <div className={showFilterPanel ? "flex-1 min-w-0" : ""}>
          {state.tab === "trends" && (
            viewMode === "chart" ? (
              <MonthlyTrendsChart data={state.monthlyTrends} showAmounts={showAmounts} />
            ) : (
              <MonthlyTrendsTable data={state.monthlyTrends} />
            )
          )}
          {state.tab === "byCategory" && (
            viewMode === "chart" ? (
              <CategoryBarChart
                data={state.categorySpending}
                hiddenCategories={hiddenCategories}
                onToggleHidden={toggleHidden}
                onShowAll={showAll}
                onViewDetails={viewDetails}
                showAmounts={showAmounts}
              />
            ) : (
              <CategoryTable data={state.categorySpending} hiddenCategories={hiddenCategories} />
            )
          )}
          {state.tab === "overTime" && (
            viewMode === "chart" ? (
              <CategoryOverTimeChart
                data={state.categoryOverTime}
                hiddenCategories={hiddenCategories}
                onToggleHidden={toggleHidden}
                onShowAll={showAll}
                onViewDetails={viewDetails}
                showAmounts={showAmounts}
              />
            ) : (
              <CategoryOverTimeTable data={state.categoryOverTime} hiddenCategories={hiddenCategories} />
            )
          )}
          {state.tab === "budgetVsActual" && (
            <BudgetVsActualTable data={state.budgetVsActual} />
          )}
          {state.tab === "dynamic" && (
            <DynamicReport
              config={state.pivotConfig}
              result={state.pivotResult}
              onConfigChange={setPivotConfig}
            />
          )}
        </div>
        {showFilterPanel && (
          <ReportFilterPanel
            categories={filterCategories}
            hiddenCategories={hiddenCategories}
            onToggleHidden={toggleHidden}
            onShowAll={showAll}
            sources={sources}
            selectedSourceId={state.sourceId}
            onSourceChange={setSourceId}
            categoryType={state.tab === "overTime" ? state.categoryType : undefined}
            onCategoryTypeChange={state.tab === "overTime" ? setCategoryType : undefined}
          />
        )}
      </div>

      {detailModal && (
        <TransactionDetailModal
          categoryId={detailModal.category_id}
          categoryName={detailModal.category_name}
          categoryColor={detailModal.category_color}
          dateFrom={dateFrom}
          dateTo={dateTo}
          onClose={() => setDetailModal(null)}
        />
      )}
    </div>
  );
}