// src/components/backlink/reservoir-toolbar.tsx — réservoir backlink
// composition of the shared design-toolbar kit (ELEVA-88): wide search,
// domain facets (type / lien / effort), DR range popover, columns menu,
// active-filter chips mapping and the right-side actions (Importer / Ajouter
// + god-mode « Rafraîchir DR » and the « Toutes les orgs » view switch).
"use client";

import type {
  ColumnFiltersState,
  VisibilityState,
} from "@tanstack/react-table";
import { GlobeIcon, ImportIcon, PlusIcon } from "lucide-react";
import type React from "react";
import { useState } from "react";
import { AddSourceDialog } from "@/components/backlink/add-source-dialog";
import { ImportSourcesDialog } from "@/components/backlink/import-sources-dialog";
import { Button } from "@/components/ui/button";
import {
  ActiveFilterChips as ChipsRow,
  FacetDropdown,
  facetValue,
  formatRange,
  type RangeDef,
  type RangeValue,
  setFacet,
  ToolbarColumnsMenu,
  ToolbarDivider,
  ToolbarRangesPopover,
  ToolbarRow,
  ToolbarSearch,
} from "@/components/ui/design-toolbar";
import {
  EFFORTS,
  LINK_TYPES,
  SOURCE_KIND_LABEL,
  SOURCE_KINDS,
  type SourceKind,
} from "@/lib/backlink/types";
import { TOGGLEABLE_COLUMNS } from "./columns";

const RANGES: RangeDef[] = [{ id: "da", label: "DR" }];

/* ------------------------------------------------------------------ */
/* toolbar row                                                         */
/* ------------------------------------------------------------------ */

export function ReservoirToolbar({
  search,
  onSearch,
  columnFilters,
  onColumnFilters,
  columnVisibility,
  onColumnVisibility,
  actions,
}: {
  search: string;
  onSearch: (v: string) => void;
  columnFilters: ColumnFiltersState;
  onColumnFilters: (next: ColumnFiltersState) => void;
  columnVisibility: VisibilityState;
  onColumnVisibility: (next: VisibilityState) => void;
  /** Right-side actions (Importer + Ajouter, god-mode extras). */
  actions?: React.ReactNode;
}) {
  return (
    <ToolbarRow>
      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">
        <ToolbarSearch
          value={search}
          onChange={onSearch}
          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={facetValue(columnFilters, "kind")}
            options={SOURCE_KINDS.map((k) => ({ value: k.id, label: k.label }))}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "kind", v))
            }
          />
          <FacetDropdown
            label="Lien"
            allLabel="Tous les liens"
            ariaLabel="Filtrer par type de lien"
            value={facetValue(columnFilters, "linkType")}
            options={LINK_TYPES.map((t) => ({ value: t, label: t }))}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "linkType", v))
            }
          />
          <FacetDropdown
            label="Effort"
            allLabel="Tous les efforts"
            ariaLabel="Filtrer par effort"
            value={facetValue(columnFilters, "effort")}
            options={EFFORTS.map((e) => ({ value: e, label: e }))}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "effort", v))
            }
          />

          <ToolbarRangesPopover
            ranges={RANGES}
            filters={columnFilters}
            onFilters={onColumnFilters}
          />
        </div>
      </div>

      {/* right actions */}
      <div className="flex shrink-0 items-center gap-2.5">
        <ToolbarColumnsMenu
          columns={TOGGLEABLE_COLUMNS}
          columnVisibility={columnVisibility}
          onColumnVisibility={onColumnVisibility}
        />

        <ToolbarDivider />

        {actions}
      </div>
    </ToolbarRow>
  );
}

/* ------------------------------------------------------------------ */
/* active filter chips row (réservoir backlink label mapping)          */
/* ------------------------------------------------------------------ */

export function ActiveFilterChips({
  columnFilters,
  onColumnFilters,
}: {
  columnFilters: ColumnFiltersState;
  onColumnFilters: (next: ColumnFiltersState) => void;
}) {
  const clear = (id: string) =>
    onColumnFilters(columnFilters.filter((f) => f.id !== id));

  const chips = columnFilters.map((f) => {
    const base = { key: f.id, onRemove: () => clear(f.id) };
    const first = (f.value as string[])[0];
    switch (f.id) {
      case "kind":
        return {
          ...base,
          category: "Type",
          value: SOURCE_KIND_LABEL.get(first as SourceKind) ?? first,
        };
      case "linkType":
        return { ...base, category: "Lien", value: first };
      case "effort":
        return { ...base, category: "Effort", value: first };
      default: {
        const range = RANGES.find((r) => r.id === f.id);
        return {
          ...base,
          category: range?.label ?? f.id,
          value: formatRange(f.value as RangeValue),
        };
      }
    }
  });

  return <ChipsRow chips={chips} onClearAll={() => onColumnFilters([])} />;
}

/* ------------------------------------------------------------------ */
/* right-side actions (dialogs owned here)                             */
/* ------------------------------------------------------------------ */

export function ReservoirActions({
  isSuperAdmin,
  drBusy,
  drProgress,
  onRefreshDr,
  onShowAllOrgs,
}: {
  isSuperAdmin: boolean;
  drBusy: boolean;
  drProgress: { done: number; total: number } | null;
  onRefreshDr: () => void;
  /** God-mode: switch to the read-only « Toutes les orgs » view. */
  onShowAllOrgs: () => void;
}) {
  const [addOpen, setAddOpen] = useState(false);
  const [importOpen, setImportOpen] = useState(false);
  return (
    <>
      {isSuperAdmin ? (
        <>
          <Button
            variant="ghost"
            className="h-10 rounded-[11px] text-muted-foreground hover:text-foreground"
            onClick={onShowAllOrgs}
            title="Vue god-mode : sources de toutes les organisations"
          >
            <GlobeIcon aria-hidden /> Toutes les orgs
          </Button>
          <Button
            variant="outline"
            className="h-10 rounded-[11px]"
            onClick={onRefreshDr}
            disabled={drBusy}
          >
            {drBusy
              ? `DR ${drProgress?.done ?? 0}/${drProgress?.total ?? 0}…`
              : "Rafraîchir DR (Ahrefs)"}
          </Button>
        </>
      ) : null}
      <Button
        variant="outline"
        className="h-10 rounded-[11px]"
        onClick={() => setImportOpen(true)}
        aria-label="Importer des sources depuis un CSV"
      >
        <ImportIcon aria-hidden /> Importer
      </Button>
      <Button
        className="h-10 rounded-[11px]"
        onClick={() => setAddOpen(true)}
        aria-label="Ajouter une source"
      >
        <PlusIcon aria-hidden /> Ajouter
      </Button>
      <AddSourceDialog open={addOpen} onOpenChange={setAddOpen} />
      <ImportSourcesDialog open={importOpen} onOpenChange={setImportOpen} />
    </>
  );
}