import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { AutomationLanguage, RuleTemplate } from '@/types/automatisations';
import { AlertTriangle, Clock, Copy, FilePlus2 } from 'lucide-react';
import { useState } from 'react';
import { toast } from 'sonner';
import { describeTrigger, fill, groupTemplates } from './automatisations-format';
import type { Translate } from './labels';

const NS = 'automatisations';

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    templates: RuleTemplate[];
    locale: string;
    t: Translate;
    /** Ouvre l'éditeur en création, pré-rempli par le modèle (rien n'est enregistré). */
    onUse: (template: RuleTemplate) => void;
}

function screenLanguage(locale: string): AutomationLanguage {
    return locale.toLowerCase().startsWith('en') ? 'en' : 'fr';
}

function TemplateCard({
    template,
    locale,
    t,
    onUse,
}: {
    template: RuleTemplate;
    locale: string;
    t: Translate;
    onUse: (template: RuleTemplate) => void;
}) {
    const [lang, setLang] = useState<AutomationLanguage>(() => screenLanguage(locale));

    // Le texte de la langue affichée. Le presse-papiers peut être refusé (page
    // hors https, droit retiré par le navigateur) : on le dit au lieu de se taire.
    const copy = async () => {
        try {
            if (!navigator.clipboard) throw new Error('clipboard unavailable');
            await navigator.clipboard.writeText(template.bodies[lang]);
            toast.success(t(NS, 'templates_copied', 'Texte copié'));
        } catch {
            toast.error(t(NS, 'templates_copy_failed', 'Le navigateur a refusé la copie : sélectionnez le texte et copiez-le à la main.'));
        }
    };

    return (
        <article className="flex min-w-0 flex-col gap-2 rounded-lg border p-3">
            <div className="min-w-0">
                <h3 className="font-medium">{template.name}</h3>
                <p className="text-muted-foreground mt-0.5 flex items-center gap-1 text-sm">
                    <Clock className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                    <span>{describeTrigger(template, locale)}</span>
                </p>
                <p className="text-muted-foreground mt-1 text-xs">{template.description}</p>
            </div>

            {/* Rentals United continue d'envoyer sa propre règle : les deux actives,
                le voyageur reçoit le message deux fois. */}
            {template.replaces && (
                <p className="flex items-start gap-1.5 rounded-md border border-amber-200 bg-amber-50 px-2 py-1.5 text-xs text-amber-800 dark:border-amber-900/50 dark:bg-amber-950/40 dark:text-amber-300">
                    <AlertTriangle className="mt-px h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                    <span>
                        {fill(
                            t(
                                NS,
                                'templates_replaces',
                                'Remplace la règle « :rule » de votre gestionnaire de canal : désactivez-la avant d’activer celle-ci, sinon le voyageur reçoit le message deux fois.',
                            ),
                            { rule: template.replaces },
                        )}
                    </span>
                </p>
            )}

            <Tabs value={lang} onValueChange={(value) => setLang(value as AutomationLanguage)} className="gap-1">
                <TabsList className="mb-0 h-7">
                    <TabsTrigger value="fr" className="px-2 text-xs" title={t(NS, 'lang_fr', 'Français')}>
                        FR
                    </TabsTrigger>
                    <TabsTrigger value="en" className="px-2 text-xs" title={t(NS, 'lang_en', 'Anglais')}>
                        EN
                    </TabsTrigger>
                </TabsList>
                {(['fr', 'en'] as const).map((value) => (
                    <TabsContent key={value} value={value}>
                        <p className="bg-muted/40 max-h-40 overflow-y-auto rounded-md border p-2 text-xs break-words whitespace-pre-wrap">
                            {template.bodies[value]}
                        </p>
                    </TabsContent>
                ))}
            </Tabs>

            <div className="mt-auto flex flex-wrap gap-2 pt-1">
                <Button size="sm" onClick={() => onUse(template)}>
                    <FilePlus2 className="h-4 w-4" />
                    {t(NS, 'templates_use', 'Utiliser ce modèle')}
                </Button>
                <Button size="sm" variant="outline" onClick={copy}>
                    <Copy className="h-4 w-4" />
                    {t(NS, 'templates_copy', 'Copier le texte')}
                </Button>
            </div>
        </article>
    );
}

/**
 * La galerie des modèles prêts à l'emploi : un par moment du séjour. « Utiliser »
 * pré-remplit une NOUVELLE règle (éteinte, « À valider ») ; « Copier » ne crée
 * rien, il met le texte dans le presse-papiers.
 */
export function TemplatesDialog({ open, onOpenChange, templates, locale, t, onUse }: Props) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="flex max-h-[90dvh] flex-col gap-0 p-0 sm:max-w-4xl">
                <DialogHeader className="border-b p-4 pr-10">
                    <DialogTitle>{t(NS, 'templates_title', 'Modèles prêts à l’emploi')}</DialogTitle>
                    <DialogDescription>
                        {t(
                            NS,
                            'templates_help',
                            'Un modèle pré-remplit une nouvelle règle : tout reste modifiable, et elle commence éteinte et « À valider ».',
                        )}
                    </DialogDescription>
                </DialogHeader>
                <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4">
                    {groupTemplates(templates).map((section) => (
                        <section key={section.group} className="flex flex-col gap-2">
                            <div>
                                <h3 className="text-sm font-semibold">
                                    {section.group === 'rentals_united'
                                        ? t(NS, 'templates_group_rentals_united', 'Vos messages actuels')
                                        : t(NS, 'templates_group_landlord', 'Modèles The Landlord')}
                                </h3>
                                {section.group === 'rentals_united' && (
                                    <p className="text-muted-foreground text-xs">
                                        {t(
                                            NS,
                                            'templates_group_rentals_united_help',
                                            'Les messages que votre gestionnaire de canal envoie aujourd’hui, aux mêmes moments, avec une version française.',
                                        )}
                                    </p>
                                )}
                            </div>
                            <div className="grid gap-3 md:grid-cols-2">
                                {section.templates.map((template) => (
                                    <TemplateCard key={template.key} template={template} locale={locale} t={t} onUse={onUse} />
                                ))}
                            </div>
                        </section>
                    ))}
                </div>
            </DialogContent>
        </Dialog>
    );
}