import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/hooks/use-translation';
import { useTour } from '@/lib/tour/use-tour';
import { HelpCircle } from 'lucide-react';

/**
 * Bouton « Visite guidée » de l'en-tête.
 *
 * Il ne DISPARAÎT jamais. Quand la page courante ne déclare aucune visite, il
 * reste visible, éteint, et dit pourquoi au survol. Un bouton qui s'efface ne
 * se débogue pas : l'utilisateur ne peut pas distinguer « cet écran n'a pas de
 * visite » de « le bouton est cassé ». Règle maison, voir `errors.md`.
 *
 * `aria-disabled` plutôt que `disabled` : un bouton réellement `disabled` ne
 * reçoit aucun événement de survol, donc n'afficherait jamais sa raison.
 */
/**
 * `tone` — sur quel fond le bouton est posé.
 *
 * `header` (défaut) : l'en-tête vert foncé de l'application, texte clair.
 * `light` : une page qui ne passe PAS par `AppLayout` et n'a donc pas
 * d'en-tête — le reçu à signer, par exemple. Sans ce second ton, le bouton
 * serait blanc sur blanc, donc invisible.
 */
export function TourLauncher({ tone = 'header' }: { tone?: 'header' | 'light' }) {
    const { hasTour, startTour, isRunning } = useTour();
    const { t } = useTranslation();

    const enabledClasses =
        tone === 'light'
            ? 'cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-900'
            : 'cursor-pointer text-white/80 hover:bg-white/10 hover:text-white';
    const disabledClasses = tone === 'light' ? 'cursor-not-allowed text-gray-300' : 'cursor-not-allowed text-white/30';

    const label = hasTour
        ? t('tours', 'ui.launch', 'Visite guidée de cet écran')
        : t('tours', 'ui.unavailable', "Cet écran n'a pas encore de visite guidée");

    return (
        <Tooltip>
            <TooltipTrigger asChild>
                <button
                    type="button"
                    aria-disabled={!hasTour || isRunning}
                    aria-label={label}
                    onClick={() => {
                        if (hasTour && !isRunning) {
                            startTour();
                        }
                    }}
                    className={`relative flex h-9 w-9 items-center justify-center rounded-full transition-all duration-200 ${
                        hasTour && !isRunning ? enabledClasses : disabledClasses
                    }`}
                >
                    <HelpCircle className="h-5 w-5" />
                </button>
            </TooltipTrigger>
            <TooltipContent>{label}</TooltipContent>
        </Tooltip>
    );
}