import { useState, useMemo, useEffect } from "react";
import AppLayout from "@/Layouts/AppLayout";
import { Head, useForm, router, usePage } from "@inertiajs/react";
import { toast } from "sonner";
import {
    Plus,
    Pencil,
    Trash2,
    Search,
    Palette,
    Settings,
    ChevronLeft,
    ChevronRight,
    ImageIcon,
    CheckCircle2,
} from "lucide-react";
import PageHeader from "@/Components/PageHeader";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Switch } from "@/Components/ui/switch";
import ImageDropzone from "@/Components/ImageDropzone";
import ExentLogo from "@/Components/ExentLogo";
import ExentIcon from "@/Components/ExentIcon";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogFooter,
    DialogTitle,
    DialogDescription,
} from "@/Components/ui/dialog";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";

const ITEMS_PER_PAGE = 10;

const emptyForm = {
    name: "",
    host: "",
    brand_color: "#FF4D00",
    is_default: false,
    logo: null,
    logo_dark: null,
    logo_icon: null,
    favicon: null,
};

export default function Index({ environments, defaultFaviconUrl }) {
    const { flash } = usePage().props;
    const [search, setSearch] = useState("");
    const [page, setPage] = useState(1);
    const [dialogOpen, setDialogOpen] = useState(false);
    const [editing, setEditing] = useState(null);
    // Bump a cada abertura do dialog para remontar o <form> e, com ele, resetar
    // o estado interno (uncontrolled) dos ImageDropzone — o useForm do Inertia
    // vive no parent e não é afetado pelo remount.
    const [formKey, setFormKey] = useState(0);

    const form = useForm({ ...emptyForm });

    useEffect(() => {
        if (flash?.success) toast.success(flash.success);
        if (flash?.error) toast.error(flash.error);
    }, [flash?.success, flash?.error]);

    const filtered = useMemo(() => {
        const q = search.toLowerCase();
        return environments.filter(
            (e) =>
                e.name.toLowerCase().includes(q) ||
                (e.host ?? "").toLowerCase().includes(q)
        );
    }, [environments, search]);

    // Volta para a 1ª página quando a busca muda (fora do useMemo: setState
    // durante o render dispara warning do React e um render extra).
    useEffect(() => {
        setPage(1);
    }, [search]);

    const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
    const currentPage = Math.min(page, totalPages);
    const paginated = filtered.slice(
        (currentPage - 1) * ITEMS_PER_PAGE,
        currentPage * ITEMS_PER_PAGE
    );

    function openCreate() {
        setEditing(null);
        form.clearErrors();
        form.setData({ ...emptyForm });
        setFormKey((k) => k + 1);
        setDialogOpen(true);
    }

    function openEdit(env) {
        setEditing(env);
        form.clearErrors();
        form.setData({
            name: env.name ?? "",
            host: env.host ?? "",
            brand_color: env.brand_color ?? "#FF4D00",
            is_default: !!env.is_default,
            logo: null,
            logo_dark: null,
            logo_icon: null,
            favicon: null,
        });
        setFormKey((k) => k + 1);
        setDialogOpen(true);
    }

    function handleSubmit(e) {
        e.preventDefault();
        const opts = {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => {
                setDialogOpen(false);
                form.reset();
            },
        };

        if (editing) {
            form.transform((data) => ({ ...data, _method: "put" }));
            form.post(route("ambientes.update", editing.id), opts);
        } else {
            form.post(route("ambientes.store"), opts);
        }
    }

    function handleDelete(env) {
        if (env.is_default) {
            toast.error("Não é possível excluir o ambiente padrão.");
            return;
        }
        if (!confirm(`Excluir o ambiente "${env.name}"?`)) return;
        router.delete(route("ambientes.destroy", env.id), { preserveScroll: true });
    }

    return (
        <AppLayout>
            <Head title="Ambiente" />

            <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-4">
                <PageHeader
                    title="Ambiente"
                    breadcrumb={[{ label: "Configurações", href: "configuracoes.index", icon: Settings }]}
                >
                    <Button className="w-full sm:w-auto" onClick={openCreate}>
                        <Plus />
                        Novo ambiente
                    </Button>
                </PageHeader>

                <div className="flex flex-col sm:flex-row gap-2">
                    <div className="relative flex-1 sm:flex-none">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                        <Input
                            placeholder="Buscar por nome ou host..."
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            className="pl-9 w-full sm:w-72"
                        />
                    </div>
                </div>

                <div className="rounded-md border">
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Nome</TableHead>
                                <TableHead>Host</TableHead>
                                <TableHead className="hidden sm:table-cell">Padrão</TableHead>
                                <TableHead className="hidden md:table-cell">Logo</TableHead>
                                <TableHead className="hidden sm:table-cell">Cor</TableHead>
                                <TableHead className="w-[88px]" />
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {paginated.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={6} className="h-48 text-center">
                                        <div className="flex flex-col items-center gap-2 text-muted-foreground">
                                            <Palette className="h-8 w-8" />
                                            <span className="text-sm">
                                                {environments.length === 0
                                                    ? "Nenhum ambiente cadastrado."
                                                    : "Nenhum ambiente encontrado."}
                                            </span>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ) : (
                                paginated.map((env) => (
                                    <TableRow key={env.id}>
                                        <TableCell className="font-medium">{env.name}</TableCell>
                                        <TableCell className="text-sm text-muted-foreground">
                                            {env.host || "-"}
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
                                            {env.is_default && (
                                                <Badge variant="outline" className="gap-1 px-1.5 rounded-full font-normal text-muted-foreground">
                                                    <CheckCircle2 className="h-3.5 w-3.5 fill-emerald-500 text-white dark:text-background" />
                                                    Padrão
                                                </Badge>
                                            )}
                                        </TableCell>
                                        <TableCell className="hidden md:table-cell">
                                            {env.logo_url ? (
                                                <img src={env.logo_url} alt={env.name} className="h-6 w-auto max-w-[120px] object-contain" />
                                            ) : (
                                                <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                                                    <ImageIcon className="h-3.5 w-3.5" /> padrão
                                                </span>
                                            )}
                                        </TableCell>
                                        <TableCell className="hidden sm:table-cell">
                                            <div className="flex items-center gap-2">
                                                <span
                                                    className="h-5 w-5 rounded-full border shrink-0"
                                                    style={{ backgroundColor: env.brand_color }}
                                                />
                                                <span className="text-xs text-muted-foreground tabular-nums">
                                                    {env.brand_color}
                                                </span>
                                            </div>
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center justify-end gap-1">
                                                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(env)} title="Editar ambiente">
                                                    <Pencil className="h-4 w-4" />
                                                </Button>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    className="h-8 w-8 text-destructive hover:text-destructive"
                                                    onClick={() => handleDelete(env)}
                                                    disabled={env.is_default}
                                                    title={env.is_default ? "Ambiente padrão não pode ser excluído" : "Excluir ambiente"}
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </Button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>

                {filtered.length > 0 && (
                    <div className="flex items-center justify-between text-sm text-muted-foreground">
                        <span>
                            {filtered.length === 1 ? "1 ambiente" : `${filtered.length} ambientes`}
                            {filtered.length !== environments.length && ` (filtrado de ${environments.length})`}
                        </span>

                        {totalPages > 1 && (
                            <div className="flex items-center gap-1">
                                <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={currentPage === 1}>
                                    <ChevronLeft className="h-4 w-4" />
                                </Button>
                                <span className="px-2 text-sm sm:hidden">
                                    {currentPage} / {totalPages}
                                </span>
                                <div className="hidden sm:flex items-center gap-1">
                                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
                                        <Button key={p} variant={p === currentPage ? "default" : "outline"} size="icon" className="h-8 w-8" onClick={() => setPage(p)}>
                                            {p}
                                        </Button>
                                    ))}
                                </div>
                                <Button variant="outline" size="icon" className="h-8 w-8" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={currentPage === totalPages}>
                                    <ChevronRight className="h-4 w-4" />
                                </Button>
                            </div>
                        )}
                    </div>
                )}
            </div>

            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                <DialogContent className="sm:max-w-lg">
                    <form key={formKey} onSubmit={handleSubmit}>
                        <DialogHeader>
                            <DialogTitle>{editing ? "Editar ambiente" : "Novo ambiente"}</DialogTitle>
                            <DialogDescription>
                                Defina o host, a cor de marca e os logos/favicon exibidos neste domínio.
                            </DialogDescription>
                        </DialogHeader>

                        <div className="grid min-w-0 gap-4 py-4">
                            <div className="grid gap-2">
                                <Label htmlFor="name">Nome</Label>
                                <Input id="name" value={form.data.name} onChange={(e) => form.setData("name", e.target.value)} placeholder="Ex.: Meu Projeto" />
                                {form.errors.name && <p className="text-xs text-destructive">{form.errors.name}</p>}
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="host">Host</Label>
                                <Input id="host" value={form.data.host} onChange={(e) => form.setData("host", e.target.value)} placeholder="signal.meuprojeto.com.br" />
                                <p className="text-xs text-muted-foreground">
                                    Domínio que aciona este branding. Deixe em branco apenas para o ambiente padrão.
                                </p>
                                {form.errors.host && <p className="text-xs text-destructive">{form.errors.host}</p>}
                            </div>

                            <div className="flex items-center justify-between rounded-md border px-3 py-2">
                                <div>
                                    <Label htmlFor="is_default" className="cursor-pointer">Ambiente padrão</Label>
                                    <p className="text-xs text-muted-foreground">Usado no domínio principal e quando o host não casar.</p>
                                </div>
                                <Switch id="is_default" checked={form.data.is_default} onCheckedChange={(v) => form.setData("is_default", v)} />
                            </div>

                            <div className="grid gap-2">
                                <Label htmlFor="brand_color">Cor de marca</Label>
                                <div className="flex items-center gap-2">
                                    <input
                                        type="color"
                                        value={form.data.brand_color}
                                        onChange={(e) => form.setData("brand_color", e.target.value)}
                                        className="h-9 w-12 cursor-pointer rounded-md border bg-transparent p-1"
                                        aria-label="Seletor de cor"
                                    />
                                    <Input
                                        id="brand_color"
                                        value={form.data.brand_color}
                                        onChange={(e) => form.setData("brand_color", e.target.value)}
                                        className="w-32 tabular-nums"
                                    />
                                </div>
                                {form.errors.brand_color && <p className="text-xs text-destructive">{form.errors.brand_color}</p>}
                            </div>

                            <ImageDropzone
                                label="Logo (tema claro)"
                                dimensions="1771×405"
                                hint="Sidebar/login no tema claro · PNG ou SVG · máx. 512 KB"
                                maxSizeKb={512}
                                current={editing?.logo_url}
                                fallback={<ExentLogo className="h-full w-full object-contain text-foreground" />}
                                error={form.errors.logo}
                                onChange={(f) => form.setData("logo", f)}
                            />
                            <ImageDropzone
                                label="Logo (tema escuro)"
                                dimensions="1771×405"
                                hint="Versão para fundo escuro (login e tema escuro) · PNG ou SVG · máx. 512 KB"
                                maxSizeKb={512}
                                previewDark
                                current={editing?.logo_dark_url}
                                fallback={<ExentLogo className="h-full w-full object-contain text-[#EFECE5]" />}
                                error={form.errors.logo_dark}
                                onChange={(f) => form.setData("logo_dark", f)}
                            />
                            <ImageDropzone
                                label="Logo pequeno"
                                dimensions="62×40"
                                hint="Sidebar colapsado · PNG ou SVG · máx. 256 KB"
                                maxSizeKb={256}
                                current={editing?.logo_icon_url}
                                fallback={<ExentIcon className="h-full w-full object-contain text-foreground" />}
                                error={form.errors.logo_icon}
                                onChange={(f) => form.setData("logo_icon", f)}
                            />
                            <ImageDropzone
                                label="Favicon"
                                dimensions="192×192"
                                hint="Ícone da aba · PNG ou SVG · máx. 128 KB"
                                maxSizeKb={128}
                                current={editing?.favicon_url}
                                fallback={defaultFaviconUrl ? <img src={defaultFaviconUrl} alt="Favicon padrão" className="h-full w-full object-contain" /> : null}
                                error={form.errors.favicon}
                                onChange={(f) => form.setData("favicon", f)}
                            />
                        </div>

                        <DialogFooter>
                            <Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
                                Cancelar
                            </Button>
                            <Button type="submit" disabled={form.processing}>
                                {editing ? "Salvar" : "Criar"}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
        </AppLayout>
    );
}