import { useState } from "react";
import AppLayout from "@/Layouts/AppLayout";
import { Head, Link, router } from "@inertiajs/react";
import {
    Settings,
    Plus,
    Pencil,
    Trash2,
    Send,
    RefreshCw,
    Star,
    CheckCircle2,
    AlertCircle,
    Loader2,
    Mail,
} from "lucide-react";
import { toast } from "sonner";
import PageHeader from "@/Components/PageHeader";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import { Switch } from "@/Components/ui/switch";
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogFooter,
    DialogTitle,
    DialogDescription,
} from "@/Components/ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";

const TEXTAREA_CLASS =
    "flex min-h-[90px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";

const EMPTY_SENDER = {
    key: "",
    name: "Signal",
    from_address: "",
    reply_to_address: "",
    reply_to_name: "",
    signature_html: "",
    is_active: true,
    is_default: false,
};

function DomainBadge({ status }) {
    const map = {
        verified: { icon: CheckCircle2, cls: "fill-emerald-500 text-white dark:text-background", label: "Domínio verificado", h: "h-3.5 w-3.5" },
        pending: { icon: AlertCircle, cls: "text-amber-500", label: "Domínio pendente", h: "h-3 w-3" },
    };
    const cfg = map[status] ?? { icon: AlertCircle, cls: "text-muted-foreground", label: "Domínio não verificado", h: "h-3 w-3" };
    const Icon = cfg.icon;
    return (
        <Badge variant="outline" className="gap-1 px-1.5 rounded-full font-normal text-muted-foreground">
            <Icon className={`${cfg.h} ${cfg.cls}`} />
            {cfg.label}
        </Badge>
    );
}

function SenderDialog({ open, onOpenChange, sender }) {
    const isEdit = Boolean(sender?.id);
    const [form, setForm] = useState(sender ?? EMPTY_SENDER);
    const [errors, setErrors] = useState({});
    const [saving, setSaving] = useState(false);

    function set(field, value) {
        setForm((f) => ({ ...f, [field]: value }));
    }

    function submit() {
        setSaving(true);
        setErrors({});
        const opts = {
            preserveScroll: true,
            onSuccess: () => {
                toast.success(isEdit ? "Remetente atualizado." : "Remetente cadastrado.");
                onOpenChange(false);
            },
            onError: (e) => setErrors(e),
            onFinish: () => setSaving(false),
        };
        if (isEdit) {
            router.put(route("envios-email.senders.update", sender.id), form, opts);
        } else {
            router.post(route("envios-email.senders.store"), form, opts);
        }
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
                <DialogHeader>
                    <DialogTitle>{isEdit ? "Editar remetente" : "Novo remetente"}</DialogTitle>
                    <DialogDescription>
                        A identidade (nome, endereço, reply-to) e a assinatura são por remetente.
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1.5">
                            <Label htmlFor="key">Identificador</Label>
                            <Input
                                id="key"
                                value={form.key}
                                disabled={isEdit}
                                placeholder="exent"
                                onChange={(e) => set("key", e.target.value)}
                            />
                            <p className="text-xs text-muted-foreground">
                                {isEdit ? "Não editável (referenciado por projetos)." : "Minúsculo, sem espaços. Ex.: exent."}
                            </p>
                            {errors.key && <p className="text-xs text-destructive">{errors.key}</p>}
                        </div>
                        <div className="space-y-1.5">
                            <Label htmlFor="name">Nome de exibição</Label>
                            <Input id="name" value={form.name} placeholder="Signal" onChange={(e) => set("name", e.target.value)} />
                            {errors.name && <p className="text-xs text-destructive">{errors.name}</p>}
                        </div>
                    </div>

                    <div className="space-y-1.5">
                        <Label htmlFor="from_address">Endereço (From)</Label>
                        <Input
                            id="from_address"
                            type="email"
                            value={form.from_address}
                            placeholder="signal@exent.com.br"
                            onChange={(e) => set("from_address", e.target.value)}
                        />
                        {errors.from_address && <p className="text-xs text-destructive">{errors.from_address}</p>}
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                        <div className="space-y-1.5">
                            <Label htmlFor="reply_to_address">Reply-To (opcional)</Label>
                            <Input
                                id="reply_to_address"
                                type="email"
                                value={form.reply_to_address ?? ""}
                                placeholder="Padrão: próprio endereço"
                                onChange={(e) => set("reply_to_address", e.target.value)}
                            />
                            {errors.reply_to_address && <p className="text-xs text-destructive">{errors.reply_to_address}</p>}
                        </div>
                        <div className="space-y-1.5">
                            <Label htmlFor="reply_to_name">Nome do Reply-To</Label>
                            <Input
                                id="reply_to_name"
                                value={form.reply_to_name ?? ""}
                                placeholder="Opcional"
                                onChange={(e) => set("reply_to_name", e.target.value)}
                            />
                        </div>
                    </div>

                    <div className="space-y-1.5">
                        <Label htmlFor="signature_html">Assinatura / rodapé (HTML)</Label>
                        <textarea
                            id="signature_html"
                            className={TEXTAREA_CLASS}
                            value={form.signature_html ?? ""}
                            placeholder="<p>Equipe Signal · exent.com.br</p>"
                            onChange={(e) => set("signature_html", e.target.value)}
                        />
                        <p className="text-xs text-muted-foreground">
                            Adicionado ao fim dos e-mails deste remetente. Aceita HTML.
                        </p>
                        {errors.signature_html && <p className="text-xs text-destructive">{errors.signature_html}</p>}
                    </div>

                    <div className="flex items-center justify-between rounded-md border px-3 py-2">
                        <div>
                            <p className="text-sm font-medium">Ativo</p>
                            <p className="text-xs text-muted-foreground">Disponível para envio.</p>
                        </div>
                        <Switch checked={form.is_active} onCheckedChange={(v) => set("is_active", v)} />
                    </div>
                    <div className="flex items-center justify-between rounded-md border px-3 py-2">
                        <div>
                            <p className="text-sm font-medium">Remetente padrão</p>
                            <p className="text-xs text-muted-foreground">Usado quando nenhum é especificado.</p>
                        </div>
                        <Switch checked={form.is_default} onCheckedChange={(v) => set("is_default", v)} />
                    </div>
                </div>

                <DialogFooter>
                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
                        Cancelar
                    </Button>
                    <Button onClick={submit} disabled={saving}>
                        {saving && <Loader2 className="h-4 w-4 animate-spin" />}
                        {isEdit ? "Salvar" : "Cadastrar"}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

function TestDialog({ open, onOpenChange, sender }) {
    const [email, setEmail] = useState("");
    const [sending, setSending] = useState(false);

    function submit() {
        setSending(true);
        router.post(
            route("envios-email.senders.test", sender.id),
            { email },
            {
                preserveScroll: true,
                onSuccess: (page) => {
                    const flash = page.props.flash ?? {};
                    if (flash.error) toast.error(flash.error);
                    else toast.success(flash.success ?? "E-mail de teste enviado.");
                    onOpenChange(false);
                },
                onError: (e) => toast.error(e.email ?? "Falha ao enviar."),
                onFinish: () => setSending(false),
            }
        );
    }

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md">
                <DialogHeader>
                    <DialogTitle>Enviar teste</DialogTitle>
                    <DialogDescription>
                        Envia um e-mail de teste de {sender?.name} &lt;{sender?.from_address}&gt;.
                    </DialogDescription>
                </DialogHeader>
                <div className="space-y-1.5">
                    <Label htmlFor="test-email">Destinatário</Label>
                    <Input
                        id="test-email"
                        type="email"
                        value={email}
                        placeholder="voce@exent.com.br"
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>
                <DialogFooter>
                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
                        Cancelar
                    </Button>
                    <Button onClick={submit} disabled={sending || !email.trim()}>
                        {sending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
                        Enviar
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

function SenderCard({ sender }) {
    const [editOpen, setEditOpen] = useState(false);
    const [testOpen, setTestOpen] = useState(false);
    const [confirmOpen, setConfirmOpen] = useState(false);
    const [verifying, setVerifying] = useState(false);

    function verify() {
        setVerifying(true);
        router.post(
            route("envios-email.senders.verify", sender.id),
            {},
            {
                preserveScroll: true,
                onSuccess: (page) => {
                    const flash = page.props.flash ?? {};
                    if (flash.error) toast.error(flash.error);
                    else toast.success(flash.success ?? "Domínio verificado.");
                },
                onFinish: () => setVerifying(false),
            }
        );
    }

    function remove() {
        router.delete(route("envios-email.senders.destroy", sender.id), {
            preserveScroll: true,
            onSuccess: (page) => {
                const flash = page.props.flash ?? {};
                if (flash.error) toast.error(flash.error);
                else toast.success(flash.success ?? "Remetente removido.");
            },
        });
    }

    return (
        <Card className={sender.is_active ? "" : "opacity-60"}>
            <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div className="min-w-0 space-y-1.5">
                    <div className="flex flex-wrap items-center gap-2">
                        <span className="font-medium">{sender.name}</span>
                        <Badge variant="outline" className="rounded-full font-normal text-muted-foreground">
                            {sender.key}
                        </Badge>
                        {sender.is_default && (
                            <Badge variant="outline" className="gap-1 px-1.5 rounded-full font-normal text-muted-foreground">
                                <Star className="h-3 w-3 fill-amber-400 text-amber-400" />
                                Padrão
                            </Badge>
                        )}
                        {!sender.is_active && (
                            <Badge variant="outline" className="rounded-full font-normal text-muted-foreground">
                                Inativo
                            </Badge>
                        )}
                    </div>
                    <p className="text-sm text-muted-foreground">{sender.from_address}</p>
                    <div className="flex flex-wrap items-center gap-2 pt-0.5">
                        <DomainBadge status={sender.domain_status} />
                        {sender.reply_to_address && (
                            <span className="text-xs text-muted-foreground">Reply-To: {sender.reply_to_address}</span>
                        )}
                    </div>
                </div>

                <div className="flex items-center gap-1">
                    <Button variant="ghost" size="icon" title="Verificar domínio" onClick={verify} disabled={verifying}>
                        {verifying ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
                    </Button>
                    <Button variant="ghost" size="icon" title="Enviar teste" onClick={() => setTestOpen(true)}>
                        <Send className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon" title="Editar" onClick={() => setEditOpen(true)}>
                        <Pencil className="h-4 w-4" />
                    </Button>
                    <Button
                        variant="ghost"
                        size="icon"
                        title="Remover"
                        className="text-destructive hover:text-destructive"
                        onClick={() => setConfirmOpen(true)}
                    >
                        <Trash2 className="h-4 w-4" />
                    </Button>
                </div>
            </CardContent>

            {editOpen && <SenderDialog open={editOpen} onOpenChange={setEditOpen} sender={sender} />}
            {testOpen && <TestDialog open={testOpen} onOpenChange={setTestOpen} sender={sender} />}

            <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Remover remetente?</AlertDialogTitle>
                        <AlertDialogDescription>
                            O remetente "{sender.name}" ({sender.from_address}) será removido. Projetos que o
                            referenciam voltarão a usar o remetente padrão.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
                        <AlertDialogAction
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            onClick={remove}
                        >
                            Remover
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </Card>
    );
}

function GlobalSettings({ settings }) {
    const [prefix, setPrefix] = useState(settings.subject_prefix ?? "");
    const [saving, setSaving] = useState(false);

    function save() {
        setSaving(true);
        router.put(
            route("envios-email.settings"),
            { subject_prefix: prefix },
            {
                preserveScroll: true,
                onSuccess: () => toast.success("Padrões de envio atualizados."),
                onError: () => toast.error("Não foi possível salvar."),
                onFinish: () => setSaving(false),
            }
        );
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle className="text-base">Padrões de envio</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="space-y-1.5">
                    <Label htmlFor="subject_prefix">Prefixo de assunto</Label>
                    <Input
                        id="subject_prefix"
                        value={prefix}
                        placeholder="[Signal]"
                        onChange={(e) => setPrefix(e.target.value)}
                        className="sm:max-w-xs"
                    />
                    <p className="text-xs text-muted-foreground">
                        Aplicado ao início do assunto de todos os e-mails. Deixe vazio para não usar.
                    </p>
                </div>
                <Button onClick={save} disabled={saving}>
                    {saving && <Loader2 className="h-4 w-4 animate-spin" />}
                    Salvar padrões
                </Button>
            </CardContent>
        </Card>
    );
}

export default function Index({ senders, settings, resendConfigured }) {
    const [addOpen, setAddOpen] = useState(false);

    return (
        <AppLayout>
            <Head title="Envios de E-mail" />

            <div className="mx-auto flex w-full max-w-[900px] flex-col gap-5">
                <PageHeader
                    title="Envios de E-mail"
                    breadcrumb={[{ label: "Configurações", href: "configuracoes.index", icon: Settings }]}
                >
                    <Button onClick={() => setAddOpen(true)}>
                        <Plus className="h-4 w-4" />
                        Adicionar remetente
                    </Button>
                </PageHeader>

                {!resendConfigured && (
                    <div className="flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm">
                        <AlertCircle className="h-4 w-4 shrink-0 text-amber-500 mt-0.5" />
                        <span>
                            Nenhuma chave do Resend configurada. Cadastre em{" "}
                            <Link href={route("apis.index")} className="font-medium underline">
                                Configurações › APIs
                            </Link>{" "}
                            para os envios funcionarem.
                        </span>
                    </div>
                )}

                <section className="space-y-3">
                    <div className="flex items-center gap-2">
                        <Mail className="h-4 w-4 text-muted-foreground" />
                        <h2 className="text-sm font-semibold">Remetentes</h2>
                    </div>
                    {senders.length === 0 ? (
                        <p className="rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
                            Nenhum remetente cadastrado.
                        </p>
                    ) : (
                        <div className="flex flex-col gap-3">
                            {senders.map((s) => (
                                <SenderCard key={s.id} sender={s} />
                            ))}
                        </div>
                    )}
                </section>

                <GlobalSettings settings={settings} />
            </div>

            {addOpen && <SenderDialog open={addOpen} onOpenChange={setAddOpen} sender={null} />}
        </AppLayout>
    );
}