// src/components/content/content-toolbar.tsx — planning board composition of
// the shared design-toolbar kit (ELEVA-89): wide search (titre / mot-clé),
// domain facets (statut / type — assigné / langue only when the data exists),
// active-filter chips mapping, the Kanban ⇄ Liste segmented view toggle and
// the right-side actions (Exporter CSV / Importer CSV / Nouvel article).
"use client";

import type { ColumnFiltersState } from "@tanstack/react-table";
import { ImportIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  ActiveFilterChips as ChipsRow,
  FacetDropdown,
  facetValue,
  setFacet,
  ToolbarDivider,
  ToolbarRow,
  ToolbarSearch,
} from "@/components/ui/design-toolbar";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  CONTENT_KIND_LABEL,
  CONTENT_KINDS,
  CONTENT_STATUS_LABEL,
  CONTENT_STATUSES,
  type ContentKind,
  type ContentStatus,
} from "@/lib/content/types";

export type BoardView = "board" | "table";

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

export function ContentToolbar({
  search,
  onSearch,
  columnFilters,
  onColumnFilters,
  assignees,
  languages,
  view,
  onViewChange,
  onExportCsv,
  onImportCsv,
  onNewContent,
}: {
  search: string;
  onSearch: (v: string) => void;
  columnFilters: ColumnFiltersState;
  onColumnFilters: (next: ColumnFiltersState) => void;
  /** Distinct assignees present in the board (facet hidden when empty). */
  assignees: string[];
  /** Distinct languages present in the board (facet hidden when < 2). */
  languages: string[];
  view: BoardView;
  onViewChange: (v: BoardView) => void;
  onExportCsv: () => void;
  onImportCsv: () => void;
  onNewContent: () => void;
}) {
  return (
    <ToolbarRow>
      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">
        <ToolbarSearch
          value={search}
          onChange={onSearch}
          placeholder="Rechercher un article…"
          ariaLabel="Rechercher un article (titre ou mot-clé)"
        />

        <ToolbarDivider />

        {/* quick filters */}
        <div className="flex flex-wrap items-center gap-2">
          <FacetDropdown
            label="Statut"
            allLabel="Tous les statuts"
            ariaLabel="Filtrer par statut"
            value={facetValue(columnFilters, "status")}
            options={CONTENT_STATUSES.map((s) => ({
              value: s,
              label: CONTENT_STATUS_LABEL[s],
            }))}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "status", v))
            }
          />
          <FacetDropdown
            label="Type"
            allLabel="Tous les types"
            ariaLabel="Filtrer par type de contenu"
            value={facetValue(columnFilters, "kind")}
            options={CONTENT_KINDS.map((k) => ({
              value: k,
              label: CONTENT_KIND_LABEL[k],
            }))}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "kind", v))
            }
          />
          {assignees.length > 0 ? (
            <FacetDropdown
              label="Assigné"
              allLabel="Tous les assignés"
              ariaLabel="Filtrer par assigné"
              value={facetValue(columnFilters, "assignee")}
              options={assignees.map((a) => ({ value: a, label: a }))}
              onChange={(v) =>
                onColumnFilters(setFacet(columnFilters, "assignee", v))
              }
            />
          ) : null}
          {languages.length > 1 ? (
            <FacetDropdown
              label="Langue"
              allLabel="Toutes les langues"
              ariaLabel="Filtrer par langue"
              value={facetValue(columnFilters, "lang")}
              options={languages.map((l) => ({
                value: l,
                label: l.toUpperCase(),
              }))}
              onChange={(v) =>
                onColumnFilters(setFacet(columnFilters, "lang", v))
              }
            />
          ) : null}
        </div>
      </div>

      {/* right actions */}
      <div className="flex shrink-0 items-center gap-2.5">
        <Tabs value={view} onValueChange={(v) => onViewChange(v as BoardView)}>
          <TabsList className="rounded-[11px] group-data-horizontal/tabs:h-10">
            <TabsTrigger value="board" className="rounded-[8px] px-3">
              Kanban
            </TabsTrigger>
            <TabsTrigger value="table" className="rounded-[8px] px-3">
              Liste
            </TabsTrigger>
          </TabsList>
        </Tabs>

        <ToolbarDivider />

        <Button
          variant="ghost"
          className="h-10 rounded-[11px] text-muted-foreground hover:text-foreground"
          onClick={onExportCsv}
          aria-label="Exporter le contenu en CSV"
        >
          Exporter CSV
        </Button>
        <Button
          variant="ghost"
          className="h-10 rounded-[11px] text-muted-foreground hover:text-foreground"
          onClick={onImportCsv}
          aria-label="Importer du contenu depuis un CSV"
        >
          <ImportIcon aria-hidden /> Importer CSV
        </Button>
        <Button
          className="h-10 rounded-[11px]"
          onClick={onNewContent}
          aria-label="Créer un nouvel article"
        >
          <PlusIcon aria-hidden /> Nouvel article
        </Button>
      </div>
    </ToolbarRow>
  );
}

/* ------------------------------------------------------------------ */
/* active filter chips row (planning label mapping)                    */
/* ------------------------------------------------------------------ */

export function ContentFilterChips({
  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 "status":
        return {
          ...base,
          category: "Statut",
          value: CONTENT_STATUS_LABEL[first as ContentStatus] ?? first,
        };
      case "kind":
        return {
          ...base,
          category: "Type",
          value: CONTENT_KIND_LABEL[first as ContentKind] ?? first,
        };
      case "assignee":
        return { ...base, category: "Assigné", value: first };
      case "lang":
        return {
          ...base,
          category: "Langue",
          // Chip = libellé texte (type string) : plus de drapeau emoji ici.
          value: first.toUpperCase(),
        };
      default:
        return { ...base, category: f.id, value: first };
    }
  });

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

/* ------------------------------------------------------------------ */
/* pure client-side filter over the board items                        */
/* ------------------------------------------------------------------ */

/** Search (titre / mot-clé) + facets, applied to both kanban and liste. */
export function filterContentItems<
  T extends {
    title: string;
    keywordTerm: string | null;
    status: ContentStatus;
    kind: ContentKind;
    assignee: string | null;
    lang: string;
  },
>(items: T[], search: string, columnFilters: ColumnFiltersState): T[] {
  const q = search.trim().toLowerCase();
  const status = facetValue(columnFilters, "status");
  const kind = facetValue(columnFilters, "kind");
  const assignee = facetValue(columnFilters, "assignee");
  const lang = facetValue(columnFilters, "lang");
  return items.filter(
    (i) =>
      (!q ||
        i.title.toLowerCase().includes(q) ||
        (i.keywordTerm ?? "").toLowerCase().includes(q)) &&
      (status === "all" || i.status === status) &&
      (kind === "all" || i.kind === kind) &&
      (assignee === "all" || i.assignee === assignee) &&
      (lang === "all" || i.lang === lang),
  );
}