// src/components/keywords/sync-menu.tsx — bouton « Sync » + menu riche.
// Regroupe « Synchroniser GSC » et « Enrichir via SE-Ranking » (design finale-B).
// Rendu conditionnel : rien si ni GSC ni SE-Ranking ne sont disponibles.
"use client";

import { ChevronDownIcon, RefreshCwIcon, SparklesIcon } from "lucide-react";
import { relativeFr } from "@/components/keywords/keyword-modal-utils";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  RichMenuFooter,
  RichMenuItem,
  RichMenuSection,
} from "@/components/ui/rich-menu";
import { cn } from "@/lib/utils";

const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;

/** A sync is « stale » (→ pastille ambre) if it never ran (null) or its last
 *  run is older than 7 days. */
function isStale(iso: string | null): boolean {
  if (!iso) return true;
  const ts = Date.parse(iso);
  if (Number.isNaN(ts)) return true;
  return Date.now() - ts > SEVEN_DAYS_MS;
}

export function SyncMenu({
  canSyncGsc,
  serankingEnabled,
  mangoolsConnected = false,
  selectedCount,
  syncingGsc,
  syncingSeranking,
  syncingMangools = false,
  onSyncGsc,
  onSyncSeranking,
  onSyncMangools,
  lastGscSyncAt,
  lastSerankingSyncAt,
  lastMangoolsSyncAt = null,
}: {
  canSyncGsc: boolean;
  serankingEnabled: boolean;
  /** Connecteur Mangools branché → entrée « Enrichir via Mangools ». Optionnel
   *  (surfaces sans Mangools, ex. Planning) : défaut false. */
  mangoolsConnected?: boolean;
  selectedCount: number;
  syncingGsc: boolean;
  syncingSeranking: boolean;
  syncingMangools?: boolean;
  onSyncGsc: () => void;
  onSyncSeranking: () => void;
  onSyncMangools?: () => void;
  lastGscSyncAt: string | null;
  lastSerankingSyncAt: string | null;
  lastMangoolsSyncAt?: string | null;
}) {
  // Rien à synchroniser → pas de bouton.
  if (!canSyncGsc && !serankingEnabled && !mangoolsConnected) return null;

  const syncing = syncingGsc || syncingSeranking || syncingMangools;
  // Pastille ambre si l'une des deux syncs DISPONIBLES est périmée (>7 j ou
  // jamais) ; on n'évalue une source que si elle est activée pour ce site,
  // sinon son `null` structurel forcerait un ambre permanent trompeur.
  const warn =
    (canSyncGsc && isStale(lastGscSyncAt)) ||
    (serankingEnabled && isStale(lastSerankingSyncAt));

  const serankingDesc =
    selectedCount === 0
      ? "Volume, KD, CPC, intents — sélectionnez des mots-clés d'abord"
      : `Volume, KD, CPC, intents — ${selectedCount} sélectionné(s)`;

  // Miroir exact du comportement SE-Ranking, à une nuance près : Mangools sait
  // résoudre « tout ce qui n'a pas de métriques » côté serveur quand aucune
  // sélection n'est active — donc l'entrée n'est jamais désactivée faute de
  // sélection (contrairement à SE-Ranking).
  const mangoolsDesc =
    selectedCount === 0
      ? "Volume, KD, CPC, tendance — tout ce qui n'a pas encore de métriques Mangools"
      : `Volume, KD, CPC, tendance — ${selectedCount} sélectionné(s)`;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        {/* Ancre du tutoriel : le DÉCLENCHEUR du menu, pas ses entrées. */}
        <Button
          data-tour="keywords-sync"
          variant="outline"
          className="group relative h-10 rounded-[11px] px-3.5 font-medium text-[13px]"
        >
          <RefreshCwIcon
            className={cn("size-4", syncing && "animate-spin")}
            aria-hidden
          />
          Sync
          <span
            className={cn(
              "absolute top-1 right-1 size-[9px] rounded-full border-2 border-background",
              warn ? "bg-amber-500" : "bg-emerald-500",
            )}
            aria-hidden
          />
          <ChevronDownIcon
            className="size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
            aria-hidden
          />
        </Button>
      </DropdownMenuTrigger>
      {/* Largeur EXPLICITE (w-, pas min-w-) : le DropdownMenuContent de base
          force w-(--radix-dropdown-menu-trigger-width) — un min-w seul laisse
          le menu s'écraser à la largeur du bouton (texte en colonne). */}
      <DropdownMenuContent
        align="end"
        className="w-[330px] rounded-[14px] p-1.5"
      >
        <RichMenuSection>Synchroniser les données</RichMenuSection>
        {canSyncGsc ? (
          <RichMenuItem
            icon={
              <RefreshCwIcon className={cn(syncingGsc && "animate-spin")} />
            }
            iconClassName="bg-amber-500/90 text-white"
            title="Synchroniser GSC"
            description="Rafraîchir positions & impressions, importer les nouvelles requêtes positionnées"
            disabled={syncingGsc}
            onSelect={onSyncGsc}
          />
        ) : null}
        {serankingEnabled ? (
          <RichMenuItem
            icon={
              <SparklesIcon
                className={cn(syncingSeranking && "animate-pulse")}
              />
            }
            iconClassName="bg-violet-500/90 text-white"
            title="Enrichir via SE-Ranking"
            description={serankingDesc}
            disabled={selectedCount === 0 || syncingSeranking}
            onSelect={onSyncSeranking}
          />
        ) : null}
        {mangoolsConnected ? (
          <RichMenuItem
            icon={
              <SparklesIcon
                className={cn(syncingMangools && "animate-pulse")}
              />
            }
            iconClassName="bg-sky-500/90 text-white"
            title="Enrichir via Mangools"
            description={mangoolsDesc}
            disabled={syncingMangools}
            onSelect={onSyncMangools ?? (() => {})}
          />
        ) : null}
        <DropdownMenuSeparator />
        <RichMenuFooter>
          Dernière sync GSC : {relativeFr(lastGscSyncAt) ?? "jamais"} ·
          SE-Ranking : {relativeFr(lastSerankingSyncAt) ?? "jamais"} · Mangools
          : {relativeFr(lastMangoolsSyncAt) ?? "jamais"}
        </RichMenuFooter>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}