import { Head, Link, router, useForm } from '@inertiajs/react';
import {
    ArrowLeft,
    CheckCircle2,
    ChevronDown,
    Code2,
    Eye,
    FlaskConical,
    Monitor,
    Plus,
    Save,
    Smartphone,
    Trash2,
    X,
} from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import AppLayout from '@/layouts/app-layout';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { EVENT_KEYS, RECIPIENT_TYPES, VARIABLE_GROUPS } from '@/lib/email-template-constants';
import adminEmailTemplates from '@/routes/admin/email-templates';

type EventFormRow = {
    id?: number;
    event_key: string;
    delay_minutes: number;
    is_active: boolean;
    recipients: string[];
};

type FormData = {
    name: string;
    description: string;
    subject: string;
    body_html: string;
    body_text: string;
    from_name: string;
    from_email: string;
    reply_to: string;
    is_active: boolean;
    events: EventFormRow[];
};

type Template = {
    id: number;
    name: string;
    slug: string;
    description: string | null;
    subject: string;
    body_html: string;
    body_text: string | null;
    from_name: string | null;
    from_email: string | null;
    reply_to: string | null;
    is_active: boolean;
    is_system: boolean;
    events: EventFormRow[];
};

type Props = {
    template: Template;
    recentBookings: { id: number; label: string }[];
};

function emptyEvent(): EventFormRow {
    return { event_key: 'booking.confirmed', delay_minutes: 0, is_active: true, recipients: ['customer'] };
}

export default function AdminEmailTemplatesEdit({ template, recentBookings }: Props) {
    const form = useForm<FormData>({
        name: template.name,
        description: template.description ?? '',
        subject: template.subject,
        body_html: template.body_html,
        body_text: template.body_text ?? '',
        from_name: template.from_name ?? '',
        from_email: template.from_email ?? '',
        reply_to: template.reply_to ?? '',
        is_active: template.is_active,
        events: template.events.length > 0 ? template.events : [emptyEvent()],
    });

    const [previewMode, setPreviewMode] = useState<'desktop' | 'mobile'>('desktop');
    const [activeTab, setActiveTab] = useState<'html' | 'text' | 'settings'>('html');
    const [sendTestOpen, setSendTestOpen] = useState(false);
    const [testEmail, setTestEmail] = useState('');
    const [testBookingId, setTestBookingId] = useState<string>('');
    const [testLoading, setTestLoading] = useState(false);
    const [testResult, setTestResult] = useState<{ ok: boolean; msg: string } | null>(null);
    const [previewHtml, setPreviewHtml] = useState(template.body_html);
    const previewRef = useRef<HTMLIFrameElement>(null);

    // Live preview — debounced HTML update
    useEffect(() => {
        const t = setTimeout(() => setPreviewHtml(form.data.body_html), 400);
        return () => clearTimeout(t);
    }, [form.data.body_html]);

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.put(adminEmailTemplates.update.url(template.id), {
            preserveScroll: true,
        });
    };

    const insertVariable = useCallback(
        (variable: string) => {
            const field = activeTab === 'text' ? 'body_text' : activeTab === 'html' ? 'body_html' : 'subject';
            form.setData(field, (form.data[field] as string) + variable);
        },
        [activeTab, form],
    );

    const updateEvent = (index: number, key: keyof EventFormRow, value: unknown) => {
        const events = [...form.data.events];
        (events[index] as Record<string, unknown>)[key] = value;
        form.setData('events', events);
    };

    const toggleRecipient = (eventIndex: number, type: string) => {
        const events = [...form.data.events];
        const current = events[eventIndex].recipients;
        events[eventIndex].recipients = current.includes(type)
            ? current.filter((r) => r !== type)
            : [...current, type];
        form.setData('events', events);
    };

    const sendTest = async () => {
        setTestLoading(true);
        setTestResult(null);
        try {
            const res = await fetch(adminEmailTemplates.sendTest.url(template.id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '',
                },
                body: JSON.stringify({ to_email: testEmail, booking_id: testBookingId || undefined }),
            });
            const data = await res.json();
            setTestResult({ ok: res.ok, msg: data.message ?? (res.ok ? 'Sent!' : 'Failed.') });
        } catch {
            setTestResult({ ok: false, msg: 'Network error.' });
        } finally {
            setTestLoading(false);
        }
    };

    const previewDoc = `<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"></head><body style="margin:0;">${previewHtml}</body></html>`;

    return (
        <>
            <Head title={`Edit: ${template.name}`} />

            <form onSubmit={submit} className="flex h-[calc(100vh-56px)] flex-col overflow-hidden">

                {/* ── Top bar ─────────────────────────────────────────────── */}
                <div className="flex shrink-0 items-center gap-3 border-b bg-background px-4 py-2.5">
                    <Link
                        href={adminEmailTemplates.index.url()}
                        className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
                    >
                        <ArrowLeft className="h-4 w-4" />
                        Templates
                    </Link>

                    <Separator orientation="vertical" className="h-4" />

                    <div className="flex min-w-0 flex-1 flex-col">
                        <span className="truncate text-sm font-semibold">{template.name}</span>
                        {template.is_system && (
                            <span className="text-[10px] text-muted-foreground">System template</span>
                        )}
                    </div>

                    <div className="flex items-center gap-2">
                        <Switch
                            checked={form.data.is_active}
                            onCheckedChange={(v) => form.setData('is_active', v)}
                            id="top-active"
                        />
                        <Label htmlFor="top-active" className="text-xs text-muted-foreground">Active</Label>

                        <Separator orientation="vertical" className="mx-1 h-4" />

                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => { setSendTestOpen(true); setTestResult(null); }}
                        >
                            <FlaskConical className="mr-1.5 h-3.5 w-3.5" />
                            Send Test
                        </Button>

                        <Button type="submit" size="sm" disabled={form.processing}>
                            <Save className="mr-1.5 h-3.5 w-3.5" />
                            {form.processing ? 'Saving…' : 'Save Template'}
                        </Button>
                    </div>
                </div>

                {/* ── Main 3-column grid ──────────────────────────────────── */}
                <div className="flex min-h-0 flex-1 overflow-hidden">

                    {/* LEFT: Config panel */}
                    <div className="flex w-72 shrink-0 flex-col overflow-y-auto border-r bg-background">
                        <div className="flex flex-col gap-5 p-4">

                            {/* Template details */}
                            <div className="flex flex-col gap-3">
                                <p className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">Details</p>

                                <div className="flex flex-col gap-1.5">
                                    <Label className="text-xs">Template Name</Label>
                                    <Input
                                        value={form.data.name}
                                        onChange={(e) => form.setData('name', e.target.value)}
                                        className="h-8 text-xs"
                                    />
                                    {form.errors.name && <p className="text-xs text-destructive">{form.errors.name}</p>}
                                </div>

                                <div className="flex flex-col gap-1.5">
                                    <Label className="text-xs">Description</Label>
                                    <Textarea
                                        value={form.data.description}
                                        onChange={(e) => form.setData('description', e.target.value)}
                                        className="min-h-[56px] text-xs"
                                        placeholder="What triggers this email…"
                                    />
                                </div>
                            </div>

                            <Separator />

                            {/* Sender */}
                            <div className="flex flex-col gap-3">
                                <p className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">Sender</p>

                                <div className="flex flex-col gap-1.5">
                                    <Label className="text-xs">From Name</Label>
                                    <Input
                                        value={form.data.from_name}
                                        onChange={(e) => form.setData('from_name', e.target.value)}
                                        placeholder="AIO Car Wash"
                                        className="h-8 text-xs"
                                    />
                                </div>
                                <div className="flex flex-col gap-1.5">
                                    <Label className="text-xs">From Email</Label>
                                    <Input
                                        type="email"
                                        value={form.data.from_email}
                                        onChange={(e) => form.setData('from_email', e.target.value)}
                                        placeholder="hello@example.com"
                                        className="h-8 text-xs"
                                    />
                                </div>
                                <div className="flex flex-col gap-1.5">
                                    <Label className="text-xs">Reply-To</Label>
                                    <Input
                                        type="email"
                                        value={form.data.reply_to}
                                        onChange={(e) => form.setData('reply_to', e.target.value)}
                                        placeholder="support@example.com"
                                        className="h-8 text-xs"
                                    />
                                </div>
                            </div>

                            <Separator />

                            {/* Event triggers */}
                            <div className="flex flex-col gap-3">
                                <div className="flex items-center justify-between">
                                    <p className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">Triggers</p>
                                    <button
                                        type="button"
                                        onClick={() => form.setData('events', [...form.data.events, emptyEvent()])}
                                        className="flex items-center gap-0.5 text-[11px] text-primary hover:underline"
                                    >
                                        <Plus className="h-3 w-3" /> Add
                                    </button>
                                </div>

                                {form.data.events.map((event, i) => (
                                    <Card key={i} className="bg-muted/30 p-0">
                                        <CardContent className="flex flex-col gap-2.5 p-3">
                                            <div className="flex items-center justify-between gap-1">
                                                <Select
                                                    value={event.event_key}
                                                    onValueChange={(v) => updateEvent(i, 'event_key', v)}
                                                >
                                                    <SelectTrigger className="h-7 flex-1 text-[11px]">
                                                        <SelectValue />
                                                    </SelectTrigger>
                                                    <SelectContent>
                                                        {EVENT_KEYS.map((ek) => (
                                                            <SelectItem key={ek.value} value={ek.value} className="text-xs">
                                                                {ek.label}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectContent>
                                                </Select>
                                                {form.data.events.length > 1 && (
                                                    <button
                                                        type="button"
                                                        onClick={() => form.setData('events', form.data.events.filter((_, idx) => idx !== i))}
                                                        className="text-muted-foreground hover:text-destructive"
                                                    >
                                                        <X className="h-3.5 w-3.5" />
                                                    </button>
                                                )}
                                            </div>

                                            <div className="flex items-center gap-2">
                                                <Label className="shrink-0 text-[10px] text-muted-foreground">Delay (min)</Label>
                                                <Input
                                                    type="number"
                                                    min="0"
                                                    value={event.delay_minutes}
                                                    onChange={(e) => updateEvent(i, 'delay_minutes', parseInt(e.target.value) || 0)}
                                                    className="h-6 w-16 text-[11px]"
                                                />
                                                <Switch
                                                    checked={event.is_active}
                                                    onCheckedChange={(v) => updateEvent(i, 'is_active', v)}
                                                    className="scale-75"
                                                />
                                            </div>

                                            <div className="flex flex-wrap gap-1">
                                                {RECIPIENT_TYPES.map((r) => (
                                                    <button
                                                        key={r.value}
                                                        type="button"
                                                        onClick={() => toggleRecipient(i, r.value)}
                                                        className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors ${
                                                            event.recipients.includes(r.value)
                                                                ? 'border-primary bg-primary/10 text-primary'
                                                                : 'border-border text-muted-foreground hover:border-primary/40'
                                                        }`}
                                                    >
                                                        {r.label}
                                                    </button>
                                                ))}
                                            </div>
                                        </CardContent>
                                    </Card>
                                ))}
                            </div>

                        </div>
                    </div>

                    {/* CENTER: Editor */}
                    <div className="flex min-w-0 flex-1 flex-col overflow-hidden border-r">

                        {/* Subject bar */}
                        <div className="flex shrink-0 items-center gap-2 border-b bg-muted/20 px-4 py-2">
                            <span className="shrink-0 text-xs font-medium text-muted-foreground">Subject</span>
                            <Input
                                value={form.data.subject}
                                onChange={(e) => form.setData('subject', e.target.value)}
                                className="h-7 flex-1 border-0 bg-transparent text-xs shadow-none focus-visible:ring-0"
                                placeholder="Your booking is confirmed — {{booking_datetime}}"
                            />
                            {form.errors.subject && (
                                <span className="shrink-0 text-xs text-destructive">{form.errors.subject}</span>
                            )}
                        </div>

                        {/* Tab bar */}
                        <div className="flex shrink-0 items-center gap-0 border-b bg-background px-4">
                            {(['html', 'text', 'settings'] as const).map((tab) => (
                                <button
                                    key={tab}
                                    type="button"
                                    onClick={() => setActiveTab(tab)}
                                    className={`border-b-2 px-4 py-2.5 text-xs font-medium transition-colors ${
                                        activeTab === tab
                                            ? 'border-primary text-foreground'
                                            : 'border-transparent text-muted-foreground hover:text-foreground'
                                    }`}
                                >
                                    {tab === 'html' ? 'HTML Body' : tab === 'text' ? 'Plain Text' : 'Settings'}
                                </button>
                            ))}

                            <div className="ml-auto flex items-center gap-2 py-1.5">
                                {/* Variable inserter */}
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
                                            <Code2 className="h-3 w-3" />
                                            Insert variable
                                            <ChevronDown className="h-3 w-3" />
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end" className="w-64 p-2">
                                        {VARIABLE_GROUPS.map((group) => (
                                            <div key={group.label} className="mb-2">
                                                <p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
                                                    {group.label}
                                                </p>
                                                {group.vars.map((v) => (
                                                    <DropdownMenuItem
                                                        key={v}
                                                        onClick={() => insertVariable(v)}
                                                        className="cursor-pointer font-mono text-xs"
                                                    >
                                                        {v}
                                                    </DropdownMenuItem>
                                                ))}
                                            </div>
                                        ))}
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </div>
                        </div>

                        {/* Editor area */}
                        <div className="relative flex-1 overflow-hidden">
                            {activeTab === 'html' && (
                                <textarea
                                    value={form.data.body_html}
                                    onChange={(e) => form.setData('body_html', e.target.value)}
                                    className="absolute inset-0 h-full w-full resize-none border-0 bg-background p-4 font-mono text-xs text-foreground outline-none focus:ring-0"
                                    placeholder="<!DOCTYPE html>…"
                                    spellCheck={false}
                                />
                            )}
                            {activeTab === 'text' && (
                                <textarea
                                    value={form.data.body_text}
                                    onChange={(e) => form.setData('body_text', e.target.value)}
                                    className="absolute inset-0 h-full w-full resize-none border-0 bg-background p-4 font-mono text-xs text-foreground outline-none focus:ring-0"
                                    placeholder="Hi {{customer_name}}, your booking is confirmed…"
                                    spellCheck={false}
                                />
                            )}
                            {activeTab === 'settings' && (
                                <div className="absolute inset-0 overflow-y-auto p-6">
                                    <div className="mx-auto max-w-lg space-y-6">
                                        <div>
                                            <h3 className="mb-3 text-sm font-semibold">Delivery Settings</h3>
                                            <div className="space-y-4">
                                                <div className="flex flex-col gap-1.5">
                                                    <Label>From Name <span className="text-xs text-muted-foreground">(overrides default)</span></Label>
                                                    <Input
                                                        value={form.data.from_name}
                                                        onChange={(e) => form.setData('from_name', e.target.value)}
                                                        placeholder="AIO Car Wash"
                                                    />
                                                </div>
                                                <div className="flex flex-col gap-1.5">
                                                    <Label>From Email</Label>
                                                    <Input
                                                        type="email"
                                                        value={form.data.from_email}
                                                        onChange={(e) => form.setData('from_email', e.target.value)}
                                                        placeholder="hello@example.com"
                                                    />
                                                </div>
                                                <div className="flex flex-col gap-1.5">
                                                    <Label>Reply-To</Label>
                                                    <Input
                                                        type="email"
                                                        value={form.data.reply_to}
                                                        onChange={(e) => form.setData('reply_to', e.target.value)}
                                                        placeholder="support@example.com"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>

                        {/* Validation errors */}
                        {form.errors.body_html && (
                            <p className="shrink-0 border-t px-4 py-1.5 text-xs text-destructive">{form.errors.body_html}</p>
                        )}
                    </div>

                    {/* RIGHT: Live preview */}
                    <div className="flex w-[480px] shrink-0 flex-col overflow-hidden bg-muted/30">

                        {/* Preview toolbar */}
                        <div className="flex shrink-0 items-center gap-2 border-b bg-background px-4 py-2">
                            <Eye className="h-3.5 w-3.5 text-muted-foreground" />
                            <span className="text-xs font-medium">Preview</span>
                            <div className="ml-auto flex items-center rounded-md border bg-muted p-0.5">
                                <button
                                    type="button"
                                    onClick={() => setPreviewMode('desktop')}
                                    className={`flex items-center gap-1 rounded px-2.5 py-1 text-xs transition-colors ${
                                        previewMode === 'desktop' ? 'bg-background shadow-sm' : 'text-muted-foreground'
                                    }`}
                                >
                                    <Monitor className="h-3 w-3" /> Desktop
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setPreviewMode('mobile')}
                                    className={`flex items-center gap-1 rounded px-2.5 py-1 text-xs transition-colors ${
                                        previewMode === 'mobile' ? 'bg-background shadow-sm' : 'text-muted-foreground'
                                    }`}
                                >
                                    <Smartphone className="h-3 w-3" /> Mobile
                                </button>
                            </div>
                        </div>

                        {/* Preview subject */}
                        <div className="shrink-0 border-b bg-background px-4 py-2">
                            <p className="text-[11px] text-muted-foreground">
                                <span className="font-medium">Subject:</span> {form.data.subject || <span className="italic">(empty)</span>}
                            </p>
                        </div>

                        {/* iframe wrapper */}
                        <div className="flex flex-1 items-start justify-center overflow-y-auto p-4">
                            <div
                                className={`overflow-hidden rounded-xl border bg-white shadow-md transition-all duration-300 ${
                                    previewMode === 'mobile' ? 'w-[390px]' : 'w-full'
                                }`}
                                style={{ minHeight: 480 }}
                            >
                                <iframe
                                    ref={previewRef}
                                    srcDoc={previewDoc}
                                    title="Email Preview"
                                    className="w-full border-0"
                                    style={{ height: 700, minHeight: 480 }}
                                    sandbox="allow-same-origin"
                                />
                            </div>
                        </div>
                    </div>

                </div>
            </form>

            {/* Send Test overlay */}
            {sendTestOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
                    <Card className="w-full max-w-sm shadow-xl">
                        <CardHeader className="pb-3">
                            <div className="flex items-center justify-between">
                                <CardTitle className="text-base">Send Test Email</CardTitle>
                                <button type="button" onClick={() => setSendTestOpen(false)} className="text-muted-foreground hover:text-foreground">
                                    <X className="h-4 w-4" />
                                </button>
                            </div>
                        </CardHeader>
                        <CardContent className="flex flex-col gap-4">
                            <div className="flex flex-col gap-1.5">
                                <Label>Send to</Label>
                                <Input
                                    type="email"
                                    value={testEmail}
                                    onChange={(e) => setTestEmail(e.target.value)}
                                    placeholder="you@example.com"
                                    autoFocus
                                />
                            </div>

                            {recentBookings.length > 0 && (
                                <div className="flex flex-col gap-1.5">
                                    <Label>Populate with booking <span className="text-xs text-muted-foreground">(optional)</span></Label>
                                    <Select value={testBookingId} onValueChange={setTestBookingId}>
                                        <SelectTrigger>
                                            <SelectValue placeholder="No booking (blank variables)" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="">No booking</SelectItem>
                                            {recentBookings.map((b) => (
                                                <SelectItem key={b.id} value={String(b.id)}>{b.label}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                            )}

                            {testResult && (
                                <div className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm ${
                                    testResult.ok ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-destructive/20 bg-destructive/5 text-destructive'
                                }`}>
                                    {testResult.ok && <CheckCircle2 className="h-4 w-4 shrink-0" />}
                                    {testResult.msg}
                                </div>
                            )}

                            <div className="flex gap-2">
                                <Button variant="outline" className="flex-1" onClick={() => setSendTestOpen(false)}>
                                    Cancel
                                </Button>
                                <Button className="flex-1" onClick={sendTest} disabled={testLoading || !testEmail}>
                                    <FlaskConical className="mr-1.5 h-3.5 w-3.5" />
                                    {testLoading ? 'Sending…' : 'Send Test'}
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            )}
        </>
    );
}

AdminEmailTemplatesEdit.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={[
        { title: 'Email Templates', href: '/admin/email-templates' },
        { title: 'Edit', href: '#' },
    ]}>
        {page}
    </AppLayout>
);