"use client";

import { Search } from "lucide-react";
import type { Content } from "@/lib/mock-data";

type Status = Content["status"] | "all";
type Sort = "recent" | "old" | "score" | "words";
type ViewMode = "grid" | "table";

interface FiltersState {
  search: string;
  status: Status;
  sort: Sort;
  view: ViewMode;
}

interface Props {
  filters: FiltersState;
  onChange: (f: FiltersState) => void;
  counts: Record<Status, number>;
}

const STATUS_TABS: { key: Status; label: string }[] = [
  { key: "all", label: "Tous" },
  { key: "validated", label: "Validés" },
  { key: "in_review", label: "À valider" },
  { key: "draft", label: "Brouillons" },
  { key: "archived", label: "Archivés" },
];

const SORT_OPTIONS: { value: Sort; label: string }[] = [
  { value: "recent", label: "Plus récents" },
  { value: "old", label: "Plus anciens" },
  { value: "score", label: "Meilleur score" },
  { value: "words", label: "Plus long" },
];

export function ContenusFilters({ filters, onChange, counts }: Props) {
  return (
    <div className="sticky top-14 z-10 bg-bg/90 backdrop-blur-md border-b border-border -mx-5 lg:-mx-8 px-5 lg:px-8 py-3 mb-6">
      <div className="flex flex-wrap gap-3 items-center">
        {/* Search */}
        <div className="relative flex-1 min-w-[200px] max-w-xs">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-dimmer" />
          <input
            type="text"
            value={filters.search}
            onChange={(e) => onChange({ ...filters, search: e.target.value })}
            placeholder="Rechercher..."
            className="w-full pl-9 pr-3 py-2 text-[12.5px] bg-bg-card border border-border rounded-lg focus:outline-none focus:border-border-bright placeholder:text-text-dimmer"
          />
        </div>

        {/* Status tabs */}
        <div className="flex items-center gap-0.5 p-0.5 bg-bg-card border border-border rounded-lg flex-wrap">
          {STATUS_TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => onChange({ ...filters, status: tab.key })}
              className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-[11.5px] transition-all whitespace-nowrap ${
                filters.status === tab.key
                  ? "bg-accent/15 text-text border border-border-bright"
                  : "text-text-dimmer hover:text-text-dim"
              }`}
            >
              {tab.label}
              {counts[tab.key] > 0 && (
                <span className={`text-[10px] font-mono ${filters.status === tab.key ? "text-accent-light" : "text-text-dimmer"}`}>
                  {counts[tab.key]}
                </span>
              )}
            </button>
          ))}
        </div>

        {/* Sort */}
        <select
          value={filters.sort}
          onChange={(e) => onChange({ ...filters, sort: e.target.value as Sort })}
          className="px-3 py-2 text-[12px] bg-bg-card border border-border rounded-lg text-text-dim focus:outline-none focus:border-border-bright"
        >
          {SORT_OPTIONS.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>

        {/* View toggle */}
        <div className="flex items-center gap-0.5 p-0.5 bg-bg-card border border-border rounded-lg ml-auto">
          {(["grid", "table"] as const).map((v) => (
            <button
              key={v}
              onClick={() => onChange({ ...filters, view: v })}
              className={`px-3 py-1.5 rounded-md text-[11.5px] transition-all ${
                filters.view === v
                  ? "bg-accent/15 text-text border border-border-bright"
                  : "text-text-dimmer hover:text-text-dim"
              }`}
            >
              {v === "grid" ? "Grille" : "Tableau"}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

export type { FiltersState, Status, Sort, ViewMode };