// src/components/backlink/research/research-container.tsx
"use client";

import type {
  ColumnFiltersState,
  PaginationState,
  RowSelectionState,
  SortingState,
} from "@tanstack/react-table";
import { useRouter } from "next/navigation";
import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { DataTable } from "@/components/ui/data-table";
import {
  ActiveFilterChips,
  FacetDropdown,
  ToolbarDivider,
  ToolbarMetaRow,
  ToolbarPanel,
  ToolbarRow,
  ToolbarSearch,
} from "@/components/ui/design-toolbar";
import type { ResearchRow } from "@/lib/backlink/research";
import {
  assignProspectsAction,
  pushProspectsToPlanningAction,
} from "@/lib/backlink/research-actions";
import {
  SOURCE_KIND_LABEL,
  SOURCE_KINDS,
  type SourceKind,
} from "@/lib/backlink/types";
import { ProspectBar } from "./prospect-bar";
import { researchColumns } from "./research-columns";
import { SourceDetailSheet } from "./source-detail-sheet";

interface Props {
  initialRows: ResearchRow[];
  /** Multi-site prospect bar (F4). */
  sites: { id: string; name: string }[];
  activeSiteId: string;
  /** Detail sheet language hints. */
  siteLanguage: string;
}

export function BacklinkResearchContainer({
  initialRows,
  sites,
  activeSiteId,
  siteLanguage,
}: Props) {
  const router = useRouter();
  const [search, setSearch] = useState("");
  const [kindFilter, setKindFilter] = useState("all");
  const [langFilter, setLangFilter] = useState("all");
  const [hideTargeted, setHideTargeted] = useState(false);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [selectedSiteIds, setSelectedSiteIds] = useState<string[]>([
    activeSiteId,
  ]);
  const [busy, setBusy] = useState(false);
  const [openRow, setOpenRow] = useState<ResearchRow | null>(null);
  const [sorting, setSorting] = useState<SortingState>([
    { id: "score", desc: true },
  ]);

  const languages = useMemo(
    () => [...new Set(initialRows.map((r) => r.language))].sort(),
    [initialRows],
  );

  const columnFilters = useMemo<ColumnFiltersState>(() => {
    const filters: ColumnFiltersState = [];
    if (kindFilter !== "all") filters.push({ id: "kind", value: [kindFilter] });
    if (langFilter !== "all")
      filters.push({ id: "language", value: langFilter });
    if (hideTargeted) filters.push({ id: "targeted", value: true });
    return filters;
  }, [kindFilter, langFilter, hideTargeted]);

  const selectedCount = Object.values(rowSelection).filter(Boolean).length;

  // Pagination is owned here so the meta row (above the table) can render the
  // « 50 / page · Précédent · Page x/y · Suivant » controls (design ELEVA-79).
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 50,
  });
  const [filteredCount, setFilteredCount] = useState(initialRows.length);
  const handleFilteredRows = useCallback((visible: ResearchRow[]) => {
    setFilteredCount(visible.length);
  }, []);
  const pageCount = Math.max(1, Math.ceil(filteredCount / pagination.pageSize));

  // Active-filter chips (plain useState facets, not a TanStack filter bar).
  const chips = [
    ...(kindFilter !== "all"
      ? [
          {
            key: "kind",
            category: "Type",
            value:
              SOURCE_KIND_LABEL.get(kindFilter as SourceKind) ?? kindFilter,
            onRemove: () => setKindFilter("all"),
          },
        ]
      : []),
    ...(langFilter !== "all"
      ? [
          {
            key: "language",
            category: "Langue",
            value: langFilter.toUpperCase(),
            onRemove: () => setLangFilter("all"),
          },
        ]
      : []),
    ...(hideTargeted
      ? [
          {
            key: "targeted",
            category: "Affichage",
            value: "Déjà ciblés masqués",
            onRemove: () => setHideTargeted(false),
          },
        ]
      : []),
  ];

  function clearAllFilters() {
    setKindFilter("all");
    setLangFilter("all");
    setHideTargeted(false);
  }

  function toggleSite(id: string) {
    setSelectedSiteIds((s) =>
      s.includes(id) ? s.filter((x) => x !== id) : [...s, id],
    );
  }

  async function assignSelected() {
    const sourceIds = Object.entries(rowSelection)
      .filter(([, v]) => v)
      .map(([id]) => id);
    if (!sourceIds.length || !selectedSiteIds.length) return;
    setBusy(true);
    try {
      const r = await assignProspectsAction(sourceIds, selectedSiteIds);
      toast.success(
        `${r.created} prospect(s) créé(s)${r.skipped ? ` — ${r.skipped} existant(s)` : ""}`,
      );
      setRowSelection({});
      router.refresh();
    } catch {
      toast.error("Échec de la création des prospects");
    } finally {
      setBusy(false);
    }
  }

  async function pushSelectedToPlanning() {
    const sourceIds = Object.entries(rowSelection)
      .filter(([, v]) => v)
      .map(([id]) => id);
    if (!sourceIds.length) return;
    setBusy(true);
    try {
      const r = await pushProspectsToPlanningAction(activeSiteId, sourceIds);
      toast.success(`${r.updated} prospect(s) → Planning`);
      setRowSelection({});
      router.refresh();
    } catch {
      toast.error("Échec du push en planning");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="p-4">
      {/* Design panel: toolbar / chips / meta / prospect bar / table. */}
      <ToolbarPanel>
        <ToolbarRow>
          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">
            <ToolbarSearch
              value={search}
              onChange={setSearch}
              placeholder="Rechercher une source…"
              ariaLabel="Rechercher une source"
            />

            <ToolbarDivider />

            {/* quick filters */}
            <div className="flex flex-wrap items-center gap-2">
              <FacetDropdown
                label="Type"
                allLabel="Tous les types"
                ariaLabel="Filtrer par type de source"
                value={kindFilter}
                options={SOURCE_KINDS.map((k) => ({
                  value: k.id,
                  label: k.label,
                }))}
                onChange={setKindFilter}
              />
              <FacetDropdown
                label="Langue"
                allLabel="Toutes les langues"
                ariaLabel="Filtrer par langue"
                value={langFilter}
                options={languages.map((l) => ({
                  value: l,
                  label: l.toUpperCase(),
                }))}
                onChange={setLangFilter}
              />
            </div>
          </div>

          {/* right actions */}
          <div className="flex shrink-0 items-center gap-2.5">
            <Button
              variant={hideTargeted ? "default" : "outline"}
              className="h-10 rounded-[11px]"
              onClick={() => setHideTargeted((v) => !v)}
              aria-pressed={hideTargeted}
            >
              Masquer les déjà ciblés
            </Button>
          </div>
        </ToolbarRow>
        <ActiveFilterChips chips={chips} onClearAll={clearAllFilters} />
        <ToolbarMetaRow
          resultCount={filteredCount}
          filterCount={chips.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),
              })),
          }}
        />

        {selectedCount > 0 ? (
          <div className="border-t px-4 py-2.5">
            <ProspectBar
              count={selectedCount}
              sites={sites}
              selectedSiteIds={selectedSiteIds}
              onToggleSite={toggleSite}
              onAssign={assignSelected}
              onPushPlanning={pushSelectedToPlanning}
              onClear={() => setRowSelection({})}
              busy={busy}
            />
          </div>
        ) : null}

        <DataTable
          columns={researchColumns}
          data={initialRows}
          getRowId={(r) => r.id}
          globalFilter={search}
          columnFilters={columnFilters}
          sorting={sorting}
          onSortingChange={setSorting}
          rowSelection={rowSelection}
          onRowSelectionChange={setRowSelection}
          onRowClick={(r) => setOpenRow(r)}
          caption="Pool de recherche de sources de liens, scoré pour le site actif"
          pageSize={50}
          pagination={pagination}
          onPaginationChange={setPagination}
          hidePagination
          onFilteredRowsChange={handleFilteredRows}
          containerClassName="rounded-none border-0 border-t"
        />
      </ToolbarPanel>

      <SourceDetailSheet
        row={openRow}
        siteLanguage={siteLanguage}
        onOpenChange={(v) => {
          if (!v) setOpenRow(null);
        }}
      />
    </div>
  );
}