import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, router, usePage } from '@inertiajs/react';
import { ArrowLeft, Calendar, CalendarDays, Clock, Eye, Layers, Pencil, Plus, Sparkles, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
import type { SeasonTemplate } from '../../logements/season-range-utils';
import { FranchiseReadOnlyBanner, FranchiseSelect } from '../components/FranchiseScope';
import { useCanManageYield, useReadOnlyReason, useYieldScope } from '../hooks/useYieldPermissions';
import { scopeQuery } from '../lib/yield-scope';
import type { MovableHolidays, ObaRule, RuleSectionKey, YieldRuleGroup } from '../types';
import RuleGroupSheet, { type RuleGroupDefaults } from './RuleGroupSheet';

const NS = 'yield.rule_groups';

interface PageProps {
    groups: YieldRuleGroup[];
    seasonTemplates: SeasonTemplate[];
    /** Dates des fêtes mobiles (config/yield-holidays.php), pour l'éditeur de saisons. */
    movableHolidays?: MovableHolidays;
    obaPresets: Record<string, ObaRule[]>;
    defaults: RuleGroupDefaults;
    [key: string]: unknown;
}

const SECTION_META: Record<RuleSectionKey, { label: string; icon: typeof Calendar }> = {
    seasonality: { label: 'Saisons', icon: Calendar },
    last_minute_rules: { label: 'Last-minute', icon: Clock },
    far_out_premium: { label: 'Far-out', icon: Clock },
    oba_rules: { label: 'OBA', icon: Sparkles },
    weekend_rule: { label: 'Week-end', icon: CalendarDays },
};

function SectionBadge({ section }: { section: RuleSectionKey }) {
    const { t } = useTranslation();
    const meta = SECTION_META[section];
    const Icon = meta.icon;
    // Les libellés qui changent d'une langue à l'autre passent par t(), en appels
    // LITTÉRAUX (YieldTranslationsTest ne voit que ceux-là) ; « Last-minute »,
    // « Far-out » et « OBA » s'écrivent pareil dans les deux.
    const label = section === 'seasonality' ? t(NS, 'section_seasons', 'Saisons') : section === 'weekend_rule' ? t(NS, 'section_weekend', 'Week-end') : meta.label;
    return (
        <span className="bg-muted text-muted-foreground inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium">
            <Icon className="h-3 w-3" />
            {label}
        </span>
    );
}

export default function RuleGroupsIndex() {
    const { groups, seasonTemplates, movableHolidays, obaPresets, defaults } = usePage<PageProps>().props;
    const { t } = useTranslation();
    // Créer / modifier / supprimer un groupe passe par yield.manage côté serveur.
    const canManage = useCanManageYield();
    const { coHost, readOnly } = useYieldScope();
    const scope = scopeQuery(coHost);
    const readOnlyReason = useReadOnlyReason();

    const [sheetOpen, setSheetOpen] = useState(false);
    const [editing, setEditing] = useState<YieldRuleGroup | null>(null);

    const breadcrumbs: BreadcrumbItem[] = [
        { title: t('yield.index', 'breadcrumb_yield', 'Yield Manager'), href: route('yield.index', scope) },
        { title: t(NS, 'breadcrumb', 'Groupes de règles'), href: route('yield.rule-groups.index', scope) },
    ];

    const openCreate = () => {
        setEditing(null);
        setSheetOpen(true);
    };

    const openEdit = (group: YieldRuleGroup) => {
        setEditing(group);
        setSheetOpen(true);
    };

    const destroy = (group: YieldRuleGroup) => {
        if (!canManage) return;
        router.delete(route('yield.rule-groups.destroy', group.id), {
            preserveScroll: true,
            onSuccess: () => toast.success(t(NS, 'toast_deleted', 'Groupe supprimé.')),
            onError: () => toast.error(t(NS, 'toast_error', 'Une erreur est survenue.')),
        });
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={t(NS, 'title', 'Groupes de règles')} />
            <div className="flex flex-col gap-4 p-3 sm:p-4 lg:p-6">
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="flex items-center gap-3">
                        <Button variant="ghost" size="icon" onClick={() => router.visit(route('yield.index', scope))} aria-label={t(NS, 'back', 'Retour')}>
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                        <div>
                            <h1 className="text-2xl font-bold">{t(NS, 'title', 'Groupes de règles')}</h1>
                            <p className="text-muted-foreground text-sm">
                                {t(NS, 'subtitle', 'Des paquets de règles réutilisables. Liez-les à vos logements depuis le Yield Manager : modifiez le groupe, tous les logements liés se mettent à jour.')}
                            </p>
                        </div>
                    </div>
                    <div className="flex flex-wrap items-center gap-2">
                        <FranchiseSelect routeName="yield.rule-groups.index" />
                        <Button onClick={openCreate} disabled={!canManage} title={canManage ? undefined : readOnlyReason}>
                            <Plus className="h-4 w-4" />
                            {t(NS, 'new_group', 'Nouveau groupe')}
                        </Button>
                    </div>
                </div>

                <FranchiseReadOnlyBanner />

                {!canManage && !readOnly && (
                    <div className="flex items-center gap-2 rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                        <Eye className="h-4 w-4 shrink-0" />
                        <span>{t('yield.index', 'read_only_banner', 'Lecture seule : vous pouvez consulter la tarification, mais pas la modifier. Les prix du Yield Manager partent sur les annonces Airbnb / Booking.')}</span>
                    </div>
                )}

                {groups.length === 0 ? (
                    <Card>
                        <CardContent className="flex flex-col items-center gap-3 py-12 text-center">
                            <Layers className="text-muted-foreground h-8 w-8" />
                            <p className="text-muted-foreground text-sm">{t(NS, 'empty', 'Aucun groupe pour l’instant.')}</p>
                            <Button onClick={openCreate} variant="outline" disabled={!canManage} title={canManage ? undefined : readOnlyReason}>
                                <Plus className="h-4 w-4" />
                                {t(NS, 'new_group', 'Nouveau groupe')}
                            </Button>
                        </CardContent>
                    </Card>
                ) : (
                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        {groups.map((group) => (
                            <Card key={group.id}>
                                <CardContent className="flex flex-col gap-3 p-4">
                                    <div className="flex items-start justify-between gap-2">
                                        <div className="min-w-0">
                                            <h3 className="truncate font-medium">{group.name}</h3>
                                            {group.description && <p className="text-muted-foreground truncate text-xs">{group.description}</p>}
                                        </div>
                                        <div className="flex shrink-0 items-center gap-1">
                                            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(group)} disabled={!canManage} title={canManage ? undefined : readOnlyReason} aria-label={t(NS, 'edit', 'Modifier')}>
                                                <Pencil className="h-4 w-4" />
                                            </Button>
                                            <AlertDialog>
                                                <AlertDialogTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="h-8 w-8" disabled={!canManage} title={canManage ? undefined : readOnlyReason} aria-label={t(NS, 'delete', 'Supprimer')}>
                                                        <Trash2 className="h-4 w-4 text-red-500" />
                                                    </Button>
                                                </AlertDialogTrigger>
                                                <AlertDialogContent>
                                                    <AlertDialogHeader>
                                                        <AlertDialogTitle>{t(NS, 'delete_title', 'Supprimer ce groupe ?')}</AlertDialogTitle>
                                                        <AlertDialogDescription>
                                                            {group.linked_count > 0
                                                                ? t(NS, 'delete_linked', ':count logement(s) lié(s) seront détachés et garderont leurs règles actuelles.').replace(':count', String(group.linked_count))
                                                                : t(NS, 'delete_desc', 'Cette action est irréversible.')}
                                                        </AlertDialogDescription>
                                                    </AlertDialogHeader>
                                                    <AlertDialogFooter>
                                                        <AlertDialogCancel>{t(NS, 'cancel', 'Annuler')}</AlertDialogCancel>
                                                        <AlertDialogAction onClick={() => destroy(group)}>{t(NS, 'delete', 'Supprimer')}</AlertDialogAction>
                                                    </AlertDialogFooter>
                                                </AlertDialogContent>
                                            </AlertDialog>
                                        </div>
                                    </div>

                                    <div className="flex flex-wrap gap-1">
                                        {group.sections.length === 0 ? (
                                            <span className="text-muted-foreground text-xs">{t(NS, 'no_sections', 'Aucune section')}</span>
                                        ) : (
                                            group.sections.map((s) => <SectionBadge key={s} section={s} />)
                                        )}
                                    </div>

                                    <div className="text-muted-foreground flex items-center gap-1 text-xs">
                                        <Layers className="h-3.5 w-3.5" />
                                        {t(NS, 'linked_count', ':count logement(s) lié(s)').replace(':count', String(group.linked_count))}
                                    </div>
                                </CardContent>
                            </Card>
                        ))}
                    </div>
                )}
            </div>

            <RuleGroupSheet
                open={sheetOpen}
                onOpenChange={setSheetOpen}
                group={editing}
                defaults={defaults}
                seasonTemplates={seasonTemplates}
                movableHolidays={movableHolidays}
                obaPresets={obaPresets}
            />
        </AppLayout>
    );
}