import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useTranslation } from '@/hooks/use-translation';
import { router } from '@inertiajs/react';
import { Eye } from 'lucide-react';
import { useYieldScope } from '../hooks/useYieldPermissions';
import { franchiseName, HEADQUARTERS_VALUE, scopeQuery } from '../lib/yield-scope';

const NS = 'yield.index';

/**
 * Sélecteur « Franchise » du Yield Manager — COMPTE PRINCIPAL SEULEMENT.
 *
 * Le serveur ne remplit `yieldScope.coHosts` que pour le compte principal : une
 * franchise n'en reçoit aucun, le composant ne rend alors rien. Choisir une
 * franchise recharge l'écran courant avec `?coHost=` ; la vue devient lecture
 * seule (le serveur refuse toute écriture du siège sur une franchise).
 *
 * @param routeName la route de l'écran courant (yield.index, yield.logs…), rechargée avec le nouveau périmètre
 */
export function FranchiseSelect({ routeName }: { routeName: string }) {
    const { coHost, coHosts } = useYieldScope();
    const { t } = useTranslation();

    if (coHosts.length === 0) return null;

    const label = t(NS, 'franchise_select_label', 'Franchise');

    const onChange = (value: string) => {
        router.get(route(routeName), scopeQuery(value === HEADQUARTERS_VALUE ? null : value));
    };

    return (
        <Select value={coHost ?? HEADQUARTERS_VALUE} onValueChange={onChange}>
            <SelectTrigger className="w-[220px]" aria-label={label} data-tour="yield-franchise">
                <SelectValue placeholder={label} />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    <SelectItem value={HEADQUARTERS_VALUE}>{t(NS, 'franchise_select_headquarters', 'The Landlord (siège)')}</SelectItem>
                    {coHosts.map((option) => (
                        <SelectItem key={option.id} value={option.id}>
                            {option.name}
                        </SelectItem>
                    ))}
                </SelectGroup>
            </SelectContent>
        </Select>
    );
}

/**
 * Bandeau de consultation : le compte principal regarde une franchise. Il dit
 * POURQUOI tout est éteint (le motif d'un gérant — « pas le droit » — serait
 * faux ici : le siège a le droit, mais pas sur ce parc).
 */
export function FranchiseReadOnlyBanner() {
    const { coHost, coHosts, readOnly } = useYieldScope();
    const { t } = useTranslation();

    if (!readOnly) return null;

    const name = franchiseName(coHost, coHosts) ?? '';

    return (
        <div className="flex items-center gap-2 rounded-lg border border-sky-300 bg-sky-50 px-3 py-2 text-sm text-sky-900 dark:border-sky-900/40 dark:bg-sky-950/30 dark:text-sky-200">
            <Eye className="h-4 w-4 shrink-0" />
            <span>
                {t(
                    NS,
                    'franchise_read_only_banner',
                    'Vous consultez le Yield Manager de la franchise « :name » en lecture seule : ses réglages, ses envois et ses retours en arrière se font depuis son propre compte.',
                ).replace(':name', name)}
            </span>
        </div>
    );
}