// src/components/content/stats/stats-container.tsx
"use client";

import type { ColumnFiltersState } from "@tanstack/react-table";
import { parseAsStringEnum, useQueryState } from "nuqs";
import { useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { DataTable } from "@/components/ui/data-table";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type {
  StatsKpis as Kpis,
  PageStatRow,
  StatsPeriod,
} from "@/lib/content/stats";
import { statsColumns } from "./stats-columns";
import { StatsDetailSheet } from "./stats-detail-sheet";
import { StatsKpis } from "./stats-kpis";

export function StatsContainer({
  initialRows,
  initialKpis,
  period,
}: {
  initialRows: PageStatRow[];
  initialKpis: Kpis | null;
  period: StatsPeriod;
}) {
  // La période vit dans l'URL ; shallow:false force le refetch RSC → nouvelles
  // props. Aucun fetch client (gotcha du deadlock de navigation).
  const [, setP] = useQueryState(
    "p",
    parseAsStringEnum(["7", "28", "90"])
      .withDefault("28")
      .withOptions({ shallow: false, clearOnDefault: true }),
  );
  const [search, setSearch] = useState("");
  const [droppingOnly, setDroppingOnly] = useState(false);
  const [openRow, setOpenRow] = useState<PageStatRow | null>(null);

  const columnFilters = useMemo<ColumnFiltersState>(
    () => (droppingOnly ? [{ id: "signal", value: true }] : []),
    [droppingOnly],
  );

  return (
    <div className="space-y-3 p-4">
      <StatsKpis kpis={initialKpis} />
      <div className="flex flex-wrap items-center gap-2">
        <Tabs
          value={String(period)}
          onValueChange={(v) => void setP(v as "7" | "28" | "90")}
        >
          <TabsList>
            <TabsTrigger value="7">7 j</TabsTrigger>
            <TabsTrigger value="28">28 j</TabsTrigger>
            <TabsTrigger value="90">90 j</TabsTrigger>
          </TabsList>
        </Tabs>
        <Input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Rechercher une page…"
          className="h-9 w-64"
          aria-label="Rechercher une page"
        />
        <Button
          variant={droppingOnly ? "default" : "outline"}
          size="sm"
          onClick={() => setDroppingOnly((v) => !v)}
          aria-pressed={droppingOnly}
        >
          📉 En décrochage
        </Button>
      </div>
      <DataTable
        columns={statsColumns}
        data={initialRows}
        getRowId={(r) => r.page}
        globalFilter={search}
        columnFilters={columnFilters}
        onRowClick={(r) => setOpenRow(r)}
        caption="Performance des pages (GSC)"
        pageSize={50}
      />
      <StatsDetailSheet
        row={openRow}
        period={period}
        onOpenChange={(v) => {
          if (!v) setOpenRow(null);
        }}
      />
    </div>
  );
}