// src/components/backlink/research/prospect-bar.tsx
"use client";

import { Button } from "@/components/ui/button";

/** F4 — barre de prospection multi-sites : N sources × M sites. */
export function ProspectBar({
  count,
  sites,
  selectedSiteIds,
  onToggleSite,
  onAssign,
  onPushPlanning,
  onClear,
  busy,
}: {
  count: number;
  sites: { id: string; name: string }[];
  selectedSiteIds: string[];
  onToggleSite: (id: string) => void;
  onAssign: () => void;
  onPushPlanning: () => void;
  onClear: () => void;
  busy: boolean;
}) {
  if (count === 0) return null;
  return (
    <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
      <span className="font-medium">{count} source(s)</span>

      {sites.map((s) => (
        <Button
          key={s.id}
          size="sm"
          variant={selectedSiteIds.includes(s.id) ? "default" : "outline"}
          onClick={() => onToggleSite(s.id)}
          aria-pressed={selectedSiteIds.includes(s.id)}
        >
          {s.name}
        </Button>
      ))}

      <Button
        size="sm"
        onClick={onAssign}
        disabled={busy || selectedSiteIds.length === 0}
      >
        Créer prospects ({count} × {selectedSiteIds.length})
      </Button>

      <Button
        size="sm"
        variant="outline"
        onClick={onPushPlanning}
        disabled={busy}
      >
        → Planning
      </Button>

      <Button size="sm" variant="ghost" onClick={onClear} className="ml-auto">
        Annuler
      </Button>
    </div>
  );
}