// src/components/content/online/online-toolbar.tsx — contenu en ligne
// composition of the shared design-toolbar kit (ELEVA-89): wide search
// (titre / URL / mot-clé), domain facets (pays / bande de position GSC) and
// the active-filter chips mapping. Pure client-side filtering over the
// published rows — no backend.
"use client";

import type { ColumnFiltersState } from "@tanstack/react-table";
import {
  ActiveFilterChips as ChipsRow,
  FacetDropdown,
  facetValue,
  setFacet,
  ToolbarDivider,
  ToolbarRow,
  ToolbarSearch,
} from "@/components/ui/design-toolbar";
import { Flag } from "@/components/ui/flag";
import type { OnlineRow } from "@/lib/content/online";

// Position bands aligned with the recherche GSC facet (design ELEVA-87).
const POSITION_OPTIONS: { value: string; label: string }[] = [
  { value: "top10", label: "Top 10 (≤ 10)" },
  { value: "quickwin", label: "Quick wins (11–20)" },
  { value: "beyond", label: "Au-delà (> 20)" },
  { value: "none", label: "Non positionné" },
];

const POSITION_CHIP_LABELS: Record<string, string> = {
  top10: "Top 10",
  quickwin: "Quick wins",
  beyond: "Au-delà",
  none: "Non positionné",
};

function inPositionBand(position: number | null, band: string): boolean {
  switch (band) {
    case "top10":
      return position != null && position <= 10;
    case "quickwin":
      return position != null && position > 10 && position <= 20;
    case "beyond":
      return position != null && position > 20;
    case "none":
      return position == null;
    default:
      return true;
  }
}

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

export function OnlineToolbar({
  search,
  onSearch,
  columnFilters,
  onColumnFilters,
  countries,
}: {
  search: string;
  onSearch: (v: string) => void;
  columnFilters: ColumnFiltersState;
  onColumnFilters: (next: ColumnFiltersState) => void;
  /** Distinct keyword countries present in the rows (facet hidden when empty). */
  countries: string[];
}) {
  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 contenu…"
          ariaLabel="Rechercher un contenu (titre, URL ou mot-clé)"
        />

        <ToolbarDivider />

        {/* quick filters */}
        <div className="flex flex-wrap items-center gap-2">
          {countries.length > 0 ? (
            <FacetDropdown
              label="Pays"
              allLabel="Tous les pays"
              ariaLabel="Filtrer par pays du mot-clé"
              value={facetValue(columnFilters, "country")}
              options={countries.map((c) => ({
                value: c,
                label: (
                  <span className="inline-flex items-center gap-1.5">
                    <Flag code={c} />
                    {c.toUpperCase()}
                  </span>
                ),
              }))}
              onChange={(v) =>
                onColumnFilters(setFacet(columnFilters, "country", v))
              }
            />
          ) : null}
          <FacetDropdown
            label="Position"
            allLabel="Toutes les positions"
            ariaLabel="Filtrer par bande de position GSC"
            value={facetValue(columnFilters, "position")}
            options={POSITION_OPTIONS}
            onChange={(v) =>
              onColumnFilters(setFacet(columnFilters, "position", v))
            }
          />
        </div>
      </div>
    </ToolbarRow>
  );
}

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

export function OnlineFilterChips({
  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 "country":
        return {
          ...base,
          category: "Pays",
          // Chip = libellé texte (type string) : plus de drapeau emoji ici.
          value: first.toUpperCase(),
        };
      case "position":
        return {
          ...base,
          category: "Position",
          value: POSITION_CHIP_LABELS[first] ?? first,
        };
      default:
        return { ...base, category: f.id, value: first };
    }
  });

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

/* ------------------------------------------------------------------ */
/* pure client-side filter over the online rows                        */
/* ------------------------------------------------------------------ */

/** Search (titre / URL / mot-clé) + pays / bande de position facets. */
export function filterOnlineRows(
  rows: OnlineRow[],
  search: string,
  columnFilters: ColumnFiltersState,
): OnlineRow[] {
  const q = search.trim().toLowerCase();
  const country = facetValue(columnFilters, "country");
  const position = facetValue(columnFilters, "position");
  return rows.filter(
    (r) =>
      (!q ||
        r.title.toLowerCase().includes(q) ||
        (r.url ?? "").toLowerCase().includes(q) ||
        (r.keywordTerm ?? "").toLowerCase().includes(q)) &&
      (country === "all" || r.keywordCountry === country) &&
      (position === "all" || inPositionBand(r.position, position)),
  );
}