"use client";

import { useId } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { OptionSelect } from "@/components/app/option-select";
import { Label } from "@/components/ui/label";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { keywordsHref } from "@/lib/keywords-scope";
import { formatTarget } from "@/lib/locales";
import type { Target } from "@/lib/sites";

// En-tête de la section Keywords (spec Imports §1.1) : sélecteur de cible et deux onglets,
// Réservoir et Imports. Les onglets sont des liens — chaque onglet est une route, donc une
// page serveur et une URL partageable, jamais un état client.
//
// **Le sélecteur de site a disparu** avec la bascule du 2026-09-01 : le site est un segment
// de route, et le switcher de la sidebar en est la seule commande. Deux façons de changer de
// site, c'était une de trop — et celle-ci était la moins visible.

export const TABS = [
  { key: "reservoir", label: "Réservoir", sub: "" },
  { key: "imports", label: "Imports", sub: "imports" },
] as const;

export function KeywordsNav({
  siteId,
  targets,
  targetId,
  active,
  showTarget = true,
}: {
  siteId: string;
  targets: Target[];
  targetId: string | null;
  active: (typeof TABS)[number]["key"];
  /**
   * Le réservoir pose `false` : la cible y est devenue une **chip de filtre** parmi les
   * autres (décision A6, « le sélecteur de cible actuel devient un cas particulier de ce
   * filtre »), et deux commandes pour un même choix en font une de trop. L'onglet Imports,
   * qui n'a pas de barre de filtres, garde le sélecteur ici.
   */
  showTarget?: boolean;
}) {
  const router = useRouter();
  const id = useId();
  const sub = TABS.find((tab) => tab.key === active)?.sub ?? "";

  return (
    <div className="flex min-w-0 flex-wrap items-end justify-between gap-4">
      <Tabs value={active} className="max-w-full min-w-0 overflow-x-auto">
        <TabsList>
          {TABS.map((tab) => (
            <TabsTrigger
              key={tab.key}
              value={tab.key}
              nativeButton={false}
              render={<Link href={keywordsHref(siteId, tab.sub, { target: targetId })} />}
            >
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>

      {/* Le sélecteur prend toute la largeur quand il passe à la ligne, et retrouve sa
          largeur fixe dès `sm` : à 375 px, un `w-56` collé à droite d'un onglet dépassait. */}
      {showTarget ? (
        <div className="min-w-0 flex-1 space-y-1 sm:flex-none">
          <Label htmlFor={`${id}-target`}>Cible</Label>
          <OptionSelect
            id={`${id}-target`}
            label="Cible (pays · langue)"
            className="w-full sm:w-56"
            disabled={targets.length < 2}
            options={targets.map((target) => ({
              value: target.id,
              label: `${formatTarget(target)}${target.is_default ? " ★" : ""}`,
            }))}
            value={targetId ?? ""}
            // Changer de cible remet la page à zéro : les filtres et le curseur de l'ancienne
            // cible n'ont aucun sens sur la nouvelle.
            onValueChange={(value) => router.push(keywordsHref(siteId, sub, { target: value }))}
          />
        </div>
      ) : null}
    </div>
  );
}