import { useTranslation } from "react-i18next";
import { Sparkles, TrendingUp, Scale, Search } from "lucide-react";
import { PageHelp } from "../components/shared/PageHelp";
import PeriodSelector from "../components/dashboard/PeriodSelector";
import HubHighlightsPanel from "../components/reports/HubHighlightsPanel";
import HubReportNavCard from "../components/reports/HubReportNavCard";
import { useHighlights } from "../hooks/useHighlights";
import { useReportsPeriod } from "../hooks/useReportsPeriod";

export default function ReportsPage() {
  const { t } = useTranslation();
  const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
  const { data, isLoading, error } = useHighlights();

  const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
  const navCards = [
    {
      to: `/reports/highlights${preserveSearch}`,
      icon: <Sparkles size={24} />,
      title: t("reports.hub.highlights"),
      description: t("reports.hub.highlightsDescription"),
    },
    {
      to: `/reports/trends${preserveSearch}`,
      icon: <TrendingUp size={24} />,
      title: t("reports.hub.trends"),
      description: t("reports.hub.trendsDescription"),
    },
    {
      to: `/reports/compare${preserveSearch}`,
      icon: <Scale size={24} />,
      title: t("reports.hub.compare"),
      description: t("reports.hub.compareDescription"),
    },
    {
      to: `/reports/category${preserveSearch}`,
      icon: <Search size={24} />,
      title: t("reports.hub.categoryZoom"),
      description: t("reports.hub.categoryZoomDescription"),
    },
  ];

  return (
    <div>
      <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">
          <h1 className="text-2xl font-bold">{t("reports.hub.title")}</h1>
          <PageHelp helpKey="reports" />
        </div>
        <PeriodSelector
          value={period}
          onChange={setPeriod}
          customDateFrom={from}
          customDateTo={to}
          onCustomDateChange={setCustomDates}
        />
      </div>

      <HubHighlightsPanel data={data} isLoading={isLoading} error={error} />

      <section>
        <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-3">
          {t("reports.hub.explore")}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          {navCards.map((card) => (
            <HubReportNavCard key={card.to} {...card} />
          ))}
        </div>
      </section>
    </div>
  );
}