// src/components/onboarding/activation-panel.tsx — liste des étapes dans le
// popover de la carte d'activation. Flags et étape suggérée sont dérivés côté
// serveur et descendent en props (voir activation/snapshot.ts).
"use client";

import { CheckCircle2, Circle } from "lucide-react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { checklistSteps } from "@/lib/onboarding/activation/steps";
import type {
  ActivationFlags,
  ActivationStepId,
} from "@/lib/onboarding/activation/types";
import { cn } from "@/lib/utils";

export function ActivationPanel({
  flags,
  suggestedStepId,
  noAccessibleSite = false,
  canResume = false,
  onDismiss,
}: {
  flags: ActivationFlags;
  suggestedStepId: ActivationStepId | null;
  /** Membre sans aucun site partagé : aucune étape de site n'est actionnable. */
  noAccessibleSite?: boolean;
  /**
   * Le parcours guidé accepterait-il cet utilisateur ? Adossé à `canCreateSite`
   * — /onboarding renvoie dans l'app quiconque n'a pas le droit de créer un
   * site (sa première étape lui serait interdite). Faux ⇒ pas de lien : on ne
   * propose pas une porte qui se referme aussitôt.
   */
  canResume?: boolean;
  onDismiss: () => void;
}) {
  const t = useTranslations("Activation");

  // Quatre des six étapes se jouent sur un site, et la création de site est
  // réservée aux propriétaires et administrateurs : sans site partagé, tout CTA
  // qu'on afficherait serait un cul-de-sac. On explique la situation au lieu
  // d'inviter à une action impossible.
  if (noAccessibleSite) {
    return (
      <div className="flex flex-col gap-1">
        <p className="px-2 pt-1 font-medium text-sm">{t("noSiteTitle")}</p>
        <p className="px-2 text-muted-foreground text-xs">
          {t("noSiteDescription")}
        </p>
        <button
          type="button"
          onClick={onDismiss}
          className="mt-2 self-start px-2 text-muted-foreground text-xs hover:text-foreground"
        >
          {t("dismiss")}
        </button>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-1">
      {/* checklistSteps() et NON ACTIVATION_STEPS : le catalogue porte l'ordre
          du parcours guidé, où des étapes facultatives s'intercalent avant des
          étapes requises (spec §6 : requises non faites d'abord, latérales
          ensuite). */}
      {checklistSteps().map((step) => {
        const isDone = flags[step.id];
        const isSuggested = step.id === suggestedStepId;
        return (
          <div
            key={step.id}
            className={cn(
              "flex items-start gap-2.5 rounded-md p-2",
              isSuggested && "bg-accent",
            )}
          >
            {isDone ? (
              <>
                <CheckCircle2
                  aria-hidden="true"
                  className="mt-0.5 size-4 shrink-0 text-emerald-500"
                />
                <span className="sr-only">{t("done")}</span>
              </>
            ) : (
              <Circle
                aria-hidden="true"
                className="mt-0.5 size-4 shrink-0 text-muted-foreground"
              />
            )}
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1.5">
                <span
                  className={cn(
                    "font-medium text-sm",
                    isDone && "text-muted-foreground line-through",
                  )}
                >
                  {t(`steps.${step.id}.title`)}
                </span>
                {!step.required && (
                  <span className="rounded bg-muted px-1 text-[10px] text-muted-foreground">
                    {t("optional")}
                  </span>
                )}
              </div>
              {!isDone && (
                <>
                  <p className="mt-0.5 text-muted-foreground text-xs">
                    {t(`steps.${step.id}.description`)}
                  </p>
                  <Button
                    asChild
                    size="sm"
                    variant={isSuggested ? "default" : "outline"}
                    className="mt-1.5 h-7 text-xs"
                  >
                    <Link href={step.href}>{t(`steps.${step.id}.cta`)}</Link>
                  </Button>
                </>
              )}
            </div>
          </div>
        );
      })}
      {/* Le retour AU PARCOURS, pas seulement aux pages où le faire.
          Après un report (`/onboarding/defer`), plus aucune surface ne ramenait
          au guide : la checklist ne proposait que des liens vers des pages
          isolées — exactement l'annuaire que le parcours existe pour remplacer.
          /onboarding NE LIT PAS le cookie de report (seul le layout (app) le
          fait), le guide se rouvre donc normalement. */}
      {canResume ? (
        <Link
          href="/onboarding"
          className="mt-1 px-2 font-medium text-primary text-xs hover:underline"
        >
          {t("resume")}
        </Link>
      ) : null}
      <button
        type="button"
        onClick={onDismiss}
        className="mt-1 self-start px-2 text-muted-foreground text-xs hover:text-foreground"
      >
        {t("dismiss")}
      </button>
    </div>
  );
}