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

import type {
  ColumnFiltersState,
  PaginationState,
} from "@tanstack/react-table";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ToolbarMetaRow, ToolbarPanel } from "@/components/ui/design-toolbar";
import { Skeleton } from "@/components/ui/skeleton";
import { getPublishedContentAction } from "@/lib/content/actions";
import type { OnlineRow } from "@/lib/content/online";
import { buildOnlineStats } from "@/lib/content/online";
import { useActiveSite } from "@/lib/keywords/site-context";
import { OnlineKpis } from "./online-kpis";
import { OnlineTable } from "./online-table";
import {
  filterOnlineRows,
  OnlineFilterChips,
  OnlineToolbar,
} from "./online-toolbar";

export function OnlineContainer({
  initialRows,
  initialSiteId,
}: {
  initialRows: OnlineRow[];
  initialSiteId: string;
}) {
  const { activeSiteId } = useActiveSite();
  // The server already provided rows for this site. Track the loaded site so we
  // never refetch on mount — firing a read server action on mount triggers an
  // implicit route revalidation that races and deadlocks the next navigation.
  const loadedSite = useRef(initialSiteId);
  const [rows, setRows] = useState<OnlineRow[] | null>(initialRows);
  const [loading, setLoading] = useState(false);

  // Pure client-side filtering (ELEVA-89): search over titre / URL / mot-clé
  // plus pays / bande de position facets, with sliced pagination below.
  const [search, setSearch] = useState("");
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 50,
  });

  const load = useCallback(async () => {
    setLoading(true);
    setRows(await getPublishedContentAction(activeSiteId));
    setLoading(false);
  }, [activeSiteId]);

  useEffect(() => {
    // Only refetch when the site actually changes — never on mount.
    if (activeSiteId === loadedSite.current) return;
    loadedSite.current = activeSiteId;
    void load().catch(() => setLoading(false));
  }, [activeSiteId, load]);

  const countries = useMemo(
    () =>
      [
        ...new Set(
          (rows ?? [])
            .map((r) => r.keywordCountry)
            .filter((c): c is string => !!c),
        ),
      ].sort(),
    [rows],
  );

  const filtered = useMemo(
    () => filterOnlineRows(rows ?? [], search, columnFilters),
    [rows, search, columnFilters],
  );

  // Filter changes reset the page so the table never lands on an empty page.
  function handleSearch(v: string) {
    setSearch(v);
    setPagination((p) => ({ ...p, pageIndex: 0 }));
  }
  function handleColumnFilters(next: ColumnFiltersState) {
    setColumnFilters(next);
    setPagination((p) => ({ ...p, pageIndex: 0 }));
  }

  if (loading || !rows) {
    return (
      <div className="space-y-3 p-4">
        <Skeleton className="h-20 w-full" />
        <Skeleton className="h-64 w-full" />
      </div>
    );
  }

  if (rows.length === 0) {
    return (
      <div className="flex h-64 flex-col items-center justify-center gap-2 text-muted-foreground">
        <p>Aucun contenu publié.</p>
        <Link
          href="/content/planning"
          className="text-sm underline hover:text-foreground"
        >
          Passer des articles en « Publié » dans le Planning
        </Link>
      </div>
    );
  }

  const pageCount = Math.max(
    1,
    Math.ceil(filtered.length / pagination.pageSize),
  );
  const pageRows = filtered.slice(
    pagination.pageIndex * pagination.pageSize,
    (pagination.pageIndex + 1) * pagination.pageSize,
  );

  return (
    <div className="space-y-4 p-4">
      <OnlineKpis stats={buildOnlineStats(rows)} />
      {/* Design panel: toolbar / chips / meta / table. */}
      <ToolbarPanel>
        <OnlineToolbar
          search={search}
          onSearch={handleSearch}
          columnFilters={columnFilters}
          onColumnFilters={handleColumnFilters}
          countries={countries}
        />
        <OnlineFilterChips
          columnFilters={columnFilters}
          onColumnFilters={handleColumnFilters}
        />
        <ToolbarMetaRow
          resultCount={filtered.length}
          filterCount={columnFilters.length}
          pagination={{
            pageIndex: pagination.pageIndex,
            pageCount,
            pageSize: pagination.pageSize,
            pageSizeOptions: [20, 50, 100, 500],
            onPageSizeChange: (n) =>
              setPagination({ pageIndex: 0, pageSize: n }),
            onPrevious: () =>
              setPagination((p) => ({
                ...p,
                pageIndex: Math.max(0, p.pageIndex - 1),
              })),
            onNext: () =>
              setPagination((p) => ({
                ...p,
                pageIndex: Math.min(pageCount - 1, p.pageIndex + 1),
              })),
          }}
        />
        <div className="border-t px-4 pt-3 pb-4">
          <OnlineTable rows={pageRows} />
        </div>
      </ToolbarPanel>
    </div>
  );
}