import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import type { RuleRow } from '@/types/automatisations';
import { LayoutTemplate, Plus, Workflow } from 'lucide-react';
import type { Translate } from './labels';
import { RuleCard } from './RuleCard';

const NS = 'automatisations';

interface Props {
    rules: RuleRow[];
    canManage: boolean;
    locale: string;
    t: Translate;
    onCreate: () => void;
    /** Ouvre la galerie des modèles prêts à l'emploi. */
    onOpenTemplates: () => void;
    onEdit: (rule: RuleRow) => void;
    onDuplicate: (rule: RuleRow) => void;
    onDelete: (rule: RuleRow) => void;
    onToggle: (rule: RuleRow, active: boolean) => void;
}

export function RulesTab({ rules, canManage, locale, t, onCreate, onOpenTemplates, onEdit, onDuplicate, onDelete, onToggle }: Props) {
    if (rules.length === 0) {
        return (
            <Card>
                <CardContent className="flex flex-col items-center gap-3 py-12 text-center">
                    <Workflow className="text-muted-foreground h-8 w-8" aria-hidden="true" />
                    <p className="font-medium">{t(NS, 'rules_empty_title', 'Aucune règle pour l’instant')}</p>
                    <p className="text-muted-foreground max-w-md text-sm">
                        {t(
                            NS,
                            'rules_empty',
                            'Une règle écrit au voyageur à un moment de son séjour : confirmation, veille d’arrivée, jour du départ… Elle commence éteinte et « À valider ».',
                        )}
                    </p>
                    {canManage && (
                        <div className="flex flex-wrap justify-center gap-2">
                            <Button variant="outline" onClick={onOpenTemplates}>
                                <LayoutTemplate className="h-4 w-4" />
                                {t(NS, 'templates_from_empty', 'Partir d’un modèle')}
                            </Button>
                            <Button variant="outline" onClick={onCreate}>
                                <Plus className="h-4 w-4" />
                                {t(NS, 'new_rule', 'Nouvelle règle')}
                            </Button>
                        </div>
                    )}
                </CardContent>
            </Card>
        );
    }

    return (
        <div className="grid gap-3 md:grid-cols-2 2xl:grid-cols-3">
            {rules.map((rule, index) => (
                <RuleCard
                    key={rule.id}
                    rule={rule}
                    canManage={canManage}
                    tourAnchors={index === 0}
                    locale={locale}
                    t={t}
                    onEdit={onEdit}
                    onDuplicate={onDuplicate}
                    onDelete={onDelete}
                    onToggle={onToggle}
                />
            ))}
        </div>
    );
}