import { useEffect, useMemo, useRef, useState, Fragment } from 'react';
import {
    Monitor,
    Pencil,
    Plus,
    RefreshCw,
    Save,
    Search,
    Server,
    ShieldCheck,
    Trash2,
    X,
    Router,
    LockKeyhole,
    Network,
    Eye,
    EyeOff,
} from 'lucide-react';

import { Card } from '@/components/ui/Card';
import { Select } from '@/components/ui/Select';
import { vpsApi } from '@/services/vpsApi';
import { Button } from '@/components/ui/Button';

import type { ControllerClient } from '@/services/vpsApi';
import type { RouterFirewallRule } from '@/services/vpsApi';

const scrollClass =
    '[scrollbar-width:thin] [scrollbar-color:rgba(59,130,246,0.55)_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-blue-500/45 hover:[&::-webkit-scrollbar-thumb]:bg-blue-500/65';

const controllerFilterOptions: {
    value: 'all' | 'with' | 'without';
    label: string;
}[] = [
        { value: 'all', label: 'Todos' },
        { value: 'with', label: 'Com controladores' },
        { value: 'without', label: 'Sem controladores' },
    ];

const pageSizeOptions: {
    value: '10' | '25' | '50';
    label: string;
}[] = [
        { value: '10', label: '10 por página' },
        { value: '25', label: '25 por página' },
        { value: '50', label: '50 por página' },
    ];

export function ControllersRoute() {
    const [search, setSearch] = useState('');
    const [clients, setClients] = useState<ControllerClient[]>([]);
    const [selectedId, setSelectedId] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState<'10' | '25' | '50'>('10');
    const [controllerFilter, setControllerFilter] =
        useState<'all' | 'with' | 'without'>('all');

    const [editingClient, setEditingClient] =
        useState<ControllerClient | null>(null);

    const [creatingClient, setCreatingClient] = useState(false);
    const [deletingClientId, setDeletingClientId] = useState('');
    const [clientToDelete, setClientToDelete] = useState<ControllerClient | null>(null);
    const [selectedRouterIp, setSelectedRouterIp] = useState('');
    const [selectedClientFileContent, setSelectedClientFileContent] = useState('');
    const [loadingRouterData, setLoadingRouterData] = useState(false);
    const [routerDataError, setRouterDataError] = useState('');
    const [routerRules, setRouterRules] = useState<RouterFirewallRule[]>([]);
    const [routerPassword, setRouterPassword] = useState('litoralr');
    const [showRouterPassword, setShowRouterPassword] = useState(false);
    const [creatingRule, setCreatingRule] = useState(false);
    const [ruleToUpdate, setRuleToUpdate] = useState<RouterFirewallRule | null>(null);
    const [ruleToDelete, setRuleToDelete] = useState<RouterFirewallRule | null>(null);
    const [savingRule, setSavingRule] = useState(false);


    async function loadClients(selectClientId?: string) {
        try {
            setLoading(true);
            setError('');

            const response = await vpsApi.listControllerClients();

            setClients(response.clients);

            setSelectedId((current) =>
                selectClientId ||
                current ||
                response.clients[0]?.id ||
                '',
            );
        } catch (err) {
            setError(String(err));
            setClients([]);
            setSelectedId('');
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        loadClients();
    }, []);

    const filteredClients = useMemo(() => {
        return clients.filter((client) => {
            const matchesSearch = client.name
                .toLowerCase()
                .includes(search.toLowerCase());

            const matchesControllerFilter =
                controllerFilter === 'all' ||
                (controllerFilter === 'with' && client.controller_count > 0) ||
                (controllerFilter === 'without' && client.controller_count === 0);

            return matchesSearch && matchesControllerFilter;
        });
    }, [clients, search, controllerFilter]);

    useEffect(() => {
        setPage(1);
    }, [search, controllerFilter, pageSize]);

    const pageSizeNumber = Number(pageSize);

    const totalPages = Math.max(
        1,
        Math.ceil(filteredClients.length / pageSizeNumber),
    );

    const pagedClients = useMemo(() => {
        const start = (page - 1) * pageSizeNumber;
        return filteredClients.slice(start, start + pageSizeNumber);
    }, [filteredClients, page, pageSizeNumber]);

    const selectedClient =
        filteredClients.find((client) => client.id === selectedId) ??
        filteredClients[0];

    useEffect(() => {
        if (!selectedClient) {
            setSelectedClientFileContent('');
            setSelectedRouterIp('');
            setRouterDataError('');
            setRouterRules([]);
            return;
        }

        let cancelled = false;

        async function loadSelectedClientFile() {
            try {
                setLoadingRouterData(true);
                setRouterDataError('');

                const response = await vpsApi.readControllerClient(selectedClient.id);

                if (cancelled) return;

                setSelectedClientFileContent(response.content);
            } catch (err) {
                if (cancelled) return;

                setSelectedClientFileContent('');
                setSelectedRouterIp('');
                setRouterDataError(String(err));
            } finally {
                if (!cancelled) {
                    setLoadingRouterData(false);
                }
            }
        }

        loadSelectedClientFile();

        return () => {
            cancelled = true;
        };
    }, [selectedClient?.id]);

    const routerGroups = useMemo(() => {
        if (!selectedClientFileContent) return [];

        const parsed = parseClientTxt(selectedClientFileContent);
        const groups = new Map<string, EditableController[]>();

        parsed.controllers.forEach((controller) => {
            const router = controller.routerVpnIp.trim();

            if (!router) return;

            groups.set(router, [...(groups.get(router) ?? []), controller]);
        });

        return Array.from(groups.entries()).map(([routerVpnIp, controllers]) => ({
            routerVpnIp,
            controllers,
        }));
    }, [selectedClientFileContent]);

    useEffect(() => {
        if (routerGroups.length === 0) {
            setSelectedRouterIp('');
            return;
        }

        setSelectedRouterIp((current) => {
            const currentStillExists = routerGroups.some(
                (group) => group.routerVpnIp === current,
            );

            return currentStillExists ? current : routerGroups[0].routerVpnIp;
        });
    }, [routerGroups]);

    const selectedRouterGroup = routerGroups.find(
        (group) => group.routerVpnIp === selectedRouterIp,
    );

    const routerRulesLoaded = routerRules.length > 0;

    useEffect(() => {
        setRouterRules([]);
        setRouterDataError('');
    }, [selectedRouterIp]);

    async function deleteClient(client: ControllerClient) {
        try {
            setDeletingClientId(client.id);
            setError('');

            await vpsApi.deleteControllerClient(client.id);
            await loadClients();

            setSelectedId((current) => (current === client.id ? '' : current));
            setClientToDelete(null);
        } catch (err) {
            setError(String(err));
        } finally {
            setDeletingClientId('');
        }
    }

    async function loadRouterRules() {
        if (!selectedRouterIp || !routerPassword.trim()) return;

        try {
            setLoadingRouterData(true);
            setRouterDataError('');

            const response = await vpsApi.getRouterFirewallRules(
                selectedRouterIp,
                routerPassword.trim(),
            );

            setRouterRules(response.rules);
        } catch (err) {
            setRouterDataError(String(err));
            setRouterRules([]);
        } finally {
            setLoadingRouterData(false);
        }
    }

    async function refreshRouterPanel() {
        if (!selectedClient) return;

        try {
            setLoadingRouterData(true);
            setRouterDataError('');

            const clientResponse = await vpsApi.readControllerClient(selectedClient.id);
            setSelectedClientFileContent(clientResponse.content);

            if (selectedRouterIp && routerPassword.trim()) {
                const rulesResponse = await vpsApi.getRouterFirewallRules(
                    selectedRouterIp,
                    routerPassword.trim(),
                );

                setRouterRules(rulesResponse.rules);
            }
        } catch (err) {
            setRouterDataError(String(err));
            setRouterRules([]);
        } finally {
            setLoadingRouterData(false);
        }
    }
    return (
        <div className={`flex min-h-full flex-col overflow-y-auto overflow-x-hidden pr-2 ${scrollClass}`}>
            <div className="mb-4 flex shrink-0 items-start justify-between gap-4 rounded-3xl border border-white/10 bg-white/[0.025] px-5 py-4">
                <div className="min-w-0">
                    <h1 className="truncate text-3xl font-black tracking-tight text-white">
                        Controladores
                    </h1>

                    <p className="mt-1 text-sm text-slate-400">
                        Gestão de clientes, controladores, ficheiros VPS e regras do router.
                    </p>
                </div>

                <Button
                    type="button"
                    variant="secondary"
                    onClick={() => loadClients()}
                    disabled={loading}
                    className="shrink-0 rounded-2xl px-4 py-3 font-bold"
                >
                    <RefreshCw size={17} className={loading ? 'animate-spin' : ''} />
                    {loading ? 'A atualizar...' : 'Atualizar'}
                </Button>
            </div>

            {error && (
                <div className="mb-4 shrink-0 rounded-2xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300">
                    Erro ao carregar clientes: {error}
                </div>
            )}

            <div className="grid gap-4 2xl:grid-cols-12">
                <Card className="flex flex-col 2xl:col-span-5">
                    <div className="mb-5 flex shrink-0 items-start justify-between gap-4">
                        <div>
                            <h3 className="font-bold text-white">Clientes</h3>
                            <p className="text-xs text-slate-500">
                                {clients.length} ficheiros em /var/litoral_regas_app/maquinas
                            </p>
                        </div>

                        <Button
                            type="button"
                            onClick={() => setCreatingClient(true)}
                            variant="secondary"
                            className="h-11 rounded-2xl border-blue-500/20 bg-blue-500/10 px-4 font-black text-blue-100 hover:bg-blue-500/15"
                        >
                            <Plus size={17} />
                            Novo Cliente
                        </Button>
                    </div>

                    <div className="mb-4 shrink-0">
                        <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                            Pesquisa
                        </label>

                        <div className="flex items-center gap-2 rounded-xl border border-white/10 bg-slate-950 px-3 py-3">
                            <Search size={17} className="text-slate-500" />

                            <input
                                value={search}
                                onChange={(event) =>
                                    setSearch(event.target.value)
                                }
                                placeholder="Pesquisar cliente..."
                                className="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-600"
                            />
                        </div>
                    </div>

                    <div className="mb-4 grid shrink-0 grid-cols-2 gap-3">
                        <div>
                            <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                                Estado
                            </label>

                            <Select
                                value={controllerFilter}
                                options={controllerFilterOptions}
                                onChange={setControllerFilter}
                            />
                        </div>

                        <div>
                            <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                                Paginação
                            </label>

                            <Select
                                value={pageSize}
                                options={pageSizeOptions}
                                onChange={setPageSize}
                            />
                        </div>
                    </div>

                    <div
                        className={`h-[420px] space-y-2 overflow-y-auto pr-2 lg:h-[500px] 2xl:h-[620px] ${scrollClass}`}
                    >
                        {loading && clients.length === 0 && (
                            <div className="rounded-2xl border border-white/10 bg-white/[0.025] p-4 text-sm text-slate-400">
                                A carregar clientes da VPS...
                            </div>
                        )}

                        {!loading && filteredClients.length === 0 && (
                            <div className="rounded-2xl border border-white/10 bg-white/[0.025] p-4 text-sm text-slate-400">
                                Nenhum cliente encontrado.
                            </div>
                        )}

                        {pagedClients.map((client) => {
                            const active = selectedClient?.id === client.id;

                            return (
                                <button
                                    key={client.id}
                                    type="button"
                                    onClick={() => setSelectedId(client.id)}
                                    className={`group w-full rounded-2xl border p-4 text-left transition-all duration-200 ${active
                                        ? 'border-blue-500/25 bg-blue-500/[0.08]'
                                        : 'border-white/10 bg-white/[0.025] hover:border-white/15 hover:bg-white/[0.045]'
                                        }`}
                                >
                                    <div className="flex items-start justify-between gap-4">
                                        <div className="min-w-0 flex-1">
                                            <div className="flex items-center gap-2">
                                                <p className="truncate text-[15px] font-bold tracking-tight text-white">
                                                    {client.name}
                                                </p>

                                                <div
                                                    className={`h-2 w-2 rounded-full ${client.controller_count > 0
                                                        ? 'bg-blue-400'
                                                        : 'bg-slate-600'
                                                        }`}
                                                />
                                            </div>

                                            <p className="mt-1 truncate font-mono text-[11px] text-slate-500">
                                                {client.file}
                                            </p>

                                            <div className="mt-3 flex items-center gap-2 text-xs text-slate-400">
                                                <ShieldCheck
                                                    size={13}
                                                    className={
                                                        client.controller_count > 0
                                                            ? 'text-blue-300'
                                                            : 'text-slate-600'
                                                    }
                                                />

                                                <span>
                                                    {client.controller_count > 0
                                                        ? 'Com controladores'
                                                        : 'Sem controladores'}
                                                </span>
                                            </div>
                                        </div>

                                        <div className="flex shrink-0 items-center gap-2">
                                            <div
                                                className={`flex h-8 min-w-8 items-center justify-center rounded-full px-2 text-xs font-black ${client.controller_count > 0
                                                    ? 'bg-blue-500/10 text-blue-100'
                                                    : 'bg-white/[0.04] text-slate-400'
                                                    }`}
                                            >
                                                {client.controller_count}
                                            </div>

                                            <button
                                                type="button"
                                                onClick={(event) => {
                                                    event.stopPropagation();
                                                    setClientToDelete(client);
                                                }}
                                                className="flex h-8 w-8 items-center justify-center rounded-xl text-slate-500 transition hover:bg-red-500/10 hover:text-red-300"
                                            >
                                                <Trash2 size={16} />
                                            </button>
                                        </div>
                                    </div>
                                </button>
                            );
                        })}
                    </div>

                    <div className="mt-4 flex shrink-0 items-center justify-between gap-3 border-t border-white/10 pt-4 text-xs text-slate-400">
                        <span>
                            Página {page} de {totalPages} ·{' '}
                            {filteredClients.length} resultados
                        </span>

                        <div className="flex gap-2">
                            <Button
                                type="button"
                                variant="secondary"
                                disabled={page <= 1}
                                onClick={() => setPage((current) => Math.max(1, current - 1))}
                                className="rounded-xl px-3 py-2 text-xs font-bold"
                            >
                                Anterior
                            </Button>

                            <Button
                                type="button"
                                variant="secondary"
                                disabled={page >= totalPages}
                                onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
                                className="rounded-xl px-3 py-2 text-xs font-bold"
                            >
                                Seguinte
                            </Button>
                        </div>
                    </div>
                </Card>

                <div className="flex min-h-0 flex-col gap-4 xl:col-span-7">
                    <Card className="shrink-0 overflow-hidden">
                        {selectedClient ? (
                            <div className="flex items-center justify-between gap-4">
                                <div className="min-w-0">
                                    <p className="text-xs font-bold uppercase tracking-[0.18em] text-blue-300/70">
                                        Cliente selecionado
                                    </p>

                                    <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1">
                                        <h3 className="truncate text-2xl font-black text-white">
                                            {selectedClient.name}
                                        </h3>

                                        <span className="rounded-xl bg-blue-500/10 px-3 py-1 text-xs font-black text-blue-100">
                                            {selectedClient.controller_count} controlador(es)
                                        </span>

                                        <span className="truncate font-mono text-xs text-slate-500">
                                            {selectedClient.file}
                                        </span>
                                    </div>

                                    <p className="mt-2 truncate font-mono text-xs text-slate-600">
                                        {selectedClient.path}
                                    </p>
                                </div>

                                <Button
                                    type="button"
                                    onClick={() => setEditingClient(selectedClient)}
                                    className="shrink-0 rounded-2xl px-4 py-3 font-black"
                                >
                                    <Pencil size={17} />
                                    Editar Cliente
                                </Button>
                            </div>
                        ) : (
                            <div className="flex min-h-[90px] items-center justify-center text-slate-500">
                                Nenhum cliente selecionado.
                            </div>
                        )}
                    </Card>

                    <Card className="flex flex-col">
                        {selectedClient ? (
                            <>
                                <div className="mb-4 flex shrink-0 items-center justify-between gap-4">
                                    <div className="min-w-0">
                                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-blue-300/70">
                                            Router / Firewall
                                        </p>

                                        <h3 className="mt-2 text-xl font-black text-white">
                                            Gestão de DNAT
                                        </h3>

                                        <p className="mt-1 text-sm text-slate-500">
                                            Seleciona o router, confirma a password e carrega as regras UCI.
                                        </p>
                                    </div>

                                    <Button
                                        type="button"
                                        variant="secondary"
                                        onClick={refreshRouterPanel}
                                        disabled={!selectedRouterIp || !routerPassword.trim() || loadingRouterData}
                                        className="shrink-0 rounded-2xl px-4 py-3 font-bold"
                                    >
                                        <RefreshCw size={16} className={loadingRouterData ? 'animate-spin' : ''} />
                                        {loadingRouterData ? 'A carregar...' : 'Carregar regras'}
                                    </Button>
                                </div>

                                <div className="mb-4 shrink-0 rounded-2xl border border-white/10 bg-white/[0.025] p-4">
                                    <div className="grid gap-3 xl:grid-cols-2">
                                        <div>
                                            <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                                                Router alvo
                                            </label>

                                            <Select
                                                value={selectedRouterIp}
                                                onChange={setSelectedRouterIp}
                                                options={[
                                                    {
                                                        value: '',
                                                        label: routerGroups.length === 0
                                                            ? 'Nenhum router detetado'
                                                            : 'Selecionar router...',
                                                    },
                                                    ...routerGroups.map((group) => ({
                                                        value: group.routerVpnIp,
                                                        label: `${group.routerVpnIp} · ${group.controllers.length} controlador(es)`,
                                                    })),
                                                ]}
                                            />
                                        </div>

                                        <div>
                                            <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                                                Palavra-passe SSH
                                            </label>

                                            <div className="relative">
                                                <input
                                                    type={showRouterPassword ? 'text' : 'password'}
                                                    value={routerPassword}
                                                    onChange={(event) => setRouterPassword(event.target.value)}
                                                    placeholder="Password do router"
                                                    className="w-full rounded-xl border border-white/10 bg-slate-950 px-3 py-3 pr-12 font-mono text-sm text-white outline-none transition placeholder:text-slate-600 focus:border-blue-500/40"
                                                />

                                                <button
                                                    type="button"
                                                    onClick={() => setShowRouterPassword((current) => !current)}
                                                    className="absolute right-3 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-lg p-1.5 text-slate-500 transition hover:bg-white/[0.06] hover:text-white"
                                                >
                                                    {showRouterPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="mt-3 flex items-center justify-between gap-3 rounded-xl border border-white/10 bg-slate-950 px-4 py-3">
                                        <div className="flex min-w-0 items-center gap-3">
                                            <div className="shrink-0 rounded-xl bg-blue-500/10 p-2 text-blue-300">
                                                <Router size={17} />
                                            </div>

                                            <div className="min-w-0">
                                                <p className="text-xs text-slate-500">Estado</p>

                                                <p className="truncate font-bold text-white">
                                                    {routerDataError
                                                        ? 'Falha ao comunicar com o router'
                                                        : loadingRouterData
                                                            ? 'A analisar router...'
                                                            : routerRules.length > 0
                                                                ? `${routerRules.length} regra(s) carregada(s)`
                                                                : selectedRouterIp
                                                                    ? 'Pronto para carregar regras'
                                                                    : 'Nenhum router selecionado'}
                                                </p>
                                            </div>
                                        </div>

                                        <div
                                            className={`shrink-0 rounded-xl px-3 py-1.5 text-xs font-bold transition ${routerDataError
                                                ? 'border border-red-500/20 bg-red-500/10 text-red-300'
                                                : loadingRouterData
                                                    ? 'border border-blue-500/20 bg-blue-500/10 text-blue-200'
                                                    : routerRules.length > 0
                                                        ? 'border border-emerald-500/20 bg-emerald-500/10 text-emerald-200'
                                                        : 'border border-white/10 bg-white/[0.03] text-slate-400'
                                                }`}
                                        >
                                            {routerDataError
                                                ? 'Router inacessível'
                                                : loadingRouterData
                                                    ? 'A ligar...'
                                                    : routerRules.length > 0
                                                        ? 'Ligado'
                                                        : 'Não carregado'}
                                        </div>
                                    </div>

                                    {routerDataError && (
                                        <div className="mt-3 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3">
                                            <p className="text-sm font-bold text-red-200">
                                                Não foi possível carregar as regras do router.
                                            </p>

                                            <p className="mt-1 break-all font-mono text-xs text-red-300/80">
                                                {routerDataError}
                                            </p>
                                        </div>
                                    )}
                                </div>

                                <div className="grid min-h-0 flex-1 gap-4 overflow-hidden xl:grid-cols-12">
                                    <div className="flex min-h-0 flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-4 xl:col-span-4">
                                        <div className="shrink-0">
                                            <h4 className="font-bold text-white">Controladores</h4>
                                            <p className="mt-1 text-xs text-slate-500">
                                                Associados ao router selecionado.
                                            </p>
                                        </div>

                                        <div className={`mt-4 min-h-0 flex-1 space-y-2 overflow-y-auto pr-2 ${scrollClass}`}>
                                            {!selectedRouterGroup ? (
                                                <div className="flex min-h-[140px] items-center justify-center rounded-2xl border border-dashed border-white/10 bg-black/10 text-sm text-slate-500">
                                                    Seleciona um router.
                                                </div>
                                            ) : (
                                                selectedRouterGroup.controllers.map((controller) => (
                                                    <div
                                                        key={controller.id}
                                                        className="rounded-2xl border border-white/10 bg-black/15 p-3"
                                                    >
                                                        <div className="flex items-center justify-between gap-3">
                                                            <div className="min-w-0">
                                                                <p className="truncate font-bold text-white">
                                                                    {controller.name}
                                                                </p>

                                                                <p className="mt-1 font-mono text-xs text-slate-500">
                                                                    Externa {controller.externalPort}
                                                                </p>
                                                            </div>

                                                            <span className="rounded-xl bg-blue-500/10 px-2.5 py-1 font-mono text-xs font-black text-blue-100">
                                                                {controller.password}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </div>

                                    <div className="flex min-h-0 flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-4 xl:col-span-8">
                                        <div className="mb-4 flex shrink-0 items-center justify-between gap-3">
                                            <div>
                                                <h4 className="font-bold text-white">Regras DNAT</h4>
                                                <p className="text-xs text-slate-500">
                                                    Portas externas e destinos internos.
                                                </p>
                                            </div>

                                            <Button
                                                type="button"
                                                disabled={
                                                    !selectedRouterGroup ||
                                                    !selectedRouterIp ||
                                                    !routerPassword.trim() ||
                                                    !routerRulesLoaded
                                                }
                                                onClick={() => setCreatingRule(true)}
                                                className="rounded-2xl px-4 py-3 font-black"
                                            >
                                                <Plus size={16} />
                                                Nova Regra
                                            </Button>
                                        </div>

                                        <div className={`min-h-0 flex-1 space-y-2 overflow-y-auto pr-2 ${scrollClass}`}>
                                            {routerRules.length === 0 ? (
                                                <div className="flex min-h-[180px] flex-col items-center justify-center rounded-2xl border border-dashed border-white/10 bg-black/10 text-center text-sm text-slate-500">
                                                    <p>Nenhuma regra carregada ainda.</p>
                                                    <p className="mt-1 text-xs text-slate-600">
                                                        Carrega o router para listar as regras DNAT.
                                                    </p>
                                                </div>
                                            ) : (
                                                routerRules.map((rule) => (
                                                    <div
                                                        key={rule.id}
                                                        className="rounded-2xl border border-white/10 bg-black/15 p-3 transition hover:border-white/15 hover:bg-white/[0.035]"
                                                    >
                                                        <div className="flex items-center justify-between gap-3">
                                                            <div className="min-w-0">
                                                                <p className="truncate font-bold text-white">
                                                                    {rule.name || rule.id}
                                                                </p>

                                                                <p className="mt-1 font-mono text-xs text-slate-500">
                                                                    {rule.externalPort} → {rule.internalIp}:{rule.internalPort}
                                                                </p>
                                                            </div>

                                                            <div className="flex shrink-0 items-center gap-2">
                                                                <span className="rounded-xl bg-blue-500/10 px-2.5 py-1 text-xs font-black uppercase text-blue-100">
                                                                    {rule.proto}
                                                                </span>

                                                                <button
                                                                    type="button"
                                                                    onClick={() => setRuleToUpdate(rule)}
                                                                    className="rounded-xl border border-white/10 bg-white/[0.03] px-3 py-2 text-xs font-black text-slate-300 transition hover:bg-white/[0.06] hover:text-white"
                                                                >
                                                                    Editar
                                                                </button>

                                                                <button
                                                                    type="button"
                                                                    onClick={() => setRuleToDelete(rule)}
                                                                    className="flex h-9 w-9 items-center justify-center rounded-xl text-slate-500 transition hover:bg-red-500/10 hover:text-red-300"
                                                                >
                                                                    <Trash2 size={16} />
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <div className="flex h-full items-center justify-center text-slate-500">
                                Seleciona um cliente para gerir o router.
                            </div>
                        )}
                    </Card>
                </div>
            </div>

            {editingClient && (
                <EditClientModal
                    client={editingClient}
                    onClose={() => setEditingClient(null)}
                    onSaved={async () => {
                        await loadClients();
                        await refreshRouterPanel();
                    }}
                />
            )}

            {creatingClient && (
                <CreateClientModal
                    clients={clients}
                    onClose={() => setCreatingClient(false)}
                    onSaved={(clientId) => {
                        setSearch(clientId);
                        setControllerFilter('all');
                        setPage(1);

                        return loadClients(clientId)
                    }}
                />
            )}

            {clientToDelete && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm">
                    <div className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[#050b1a] shadow-2xl">
                        <div className="border-b border-white/10 px-6 py-5">
                            <p className="text-xs font-bold uppercase tracking-[0.18em] text-red-300/80">
                                Apagar Cliente
                            </p>

                            <h2 className="mt-2 text-xl font-black text-white">
                                Tem a certeza?
                            </h2>

                            <p className="mt-2 text-sm text-slate-400">
                                Vai apagar o ficheiro do cliente{' '}
                                <span className="font-bold text-white">
                                    {clientToDelete.name}
                                </span>
                                .
                            </p>
                        </div>

                        <div className="flex justify-end gap-3 px-6 py-4">
                            <Button
                                type="button"
                                variant="secondary"
                                onClick={() => setClientToDelete(null)}
                                className="rounded-2xl px-4 py-3 font-bold"
                            >
                                Cancelar
                            </Button>

                            <Button
                                type="button"
                                variant="danger"
                                disabled={deletingClientId === clientToDelete.id}
                                onClick={() => deleteClient(clientToDelete)}
                                className="rounded-2xl px-5 py-3 font-black"
                            >
                                <Trash2 size={16} />
                                {deletingClientId === clientToDelete.id
                                    ? 'A apagar...'
                                    : 'Apagar'}
                            </Button>
                        </div>
                    </div>
                </div>
            )}

            {creatingRule && (
                <RuleModal
                    title="Nova Regra"
                    routerHost={selectedRouterIp}
                    routerPassword={routerPassword}
                    defaultExternalPort={selectedRouterGroup?.controllers[0]?.externalPort ?? ''}
                    onClose={() => setCreatingRule(false)}
                    onSaved={async () => {
                        setCreatingRule(false);
                        await loadRouterRules();
                    }}
                />
            )}

            {ruleToUpdate && (
                <RuleModal
                    title="Editar Regra"
                    routerHost={selectedRouterIp}
                    routerPassword={routerPassword}
                    rule={ruleToUpdate}
                    onClose={() => setRuleToUpdate(null)}
                    onSaved={async () => {
                        setRuleToUpdate(null);
                        await loadRouterRules();
                    }}
                />
            )}

            {ruleToDelete && (
                <DeleteRuleModal
                    rule={ruleToDelete}
                    loading={savingRule}
                    onClose={() => setRuleToDelete(null)}
                    onConfirm={async () => {
                        try {
                            setSavingRule(true);
                            await vpsApi.deleteRouterFirewallRule(
                                selectedRouterIp,
                                routerPassword,
                                ruleToDelete.id,
                            );
                            setRuleToDelete(null);
                            await loadRouterRules();
                        } finally {
                            setSavingRule(false);
                        }
                    }}
                />
            )}
        </div>
    );
}

function MiniStat({
    icon,
    label,
    value,
}: {
    icon: React.ReactNode;
    label: string;
    value: string;
}) {
    return (
        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
            <div className="mb-3 w-fit rounded-xl bg-blue-500/10 p-2 text-blue-300">
                {icon}
            </div>

            <p className="text-xs text-slate-500">
                {label}
            </p>

            <p className="mt-1 truncate font-black text-white">
                {value}
            </p>
        </div>
    );
}

type EditableController = {
    id: string;
    name: string;
    routerVpnIp: string;
    externalPort: string;
    password: string;
};

function CreateClientModal({
    clients,
    onClose,
    onSaved,
}: {
    clients: ControllerClient[];
    onClose: () => void;
    onSaved: (clientId: string) => Promise<void> | void;
}) {
    const [name, setName] = useState('');
    const [password, setPassword] = useState(generateClientPassword());
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');

    const cleanName = name.trim();

    const nameError = useMemo(() => {
        if (!cleanName) return 'O nome do cliente é obrigatório.';

        if (!/^[A-Za-z0-9 _-]+$/.test(cleanName)) {
            return 'Usa apenas letras, números, espaços, "_" ou "-".';
        }

        if (hasTxtSeparator(cleanName)) {
            return 'O nome não pode conter "xxx" ou quebras de linha.';
        }

        const clientId = normalizeClientId(cleanName);

        const duplicateClient = clients.some(
            (client) => normalizeClientId(client.id) === clientId,
        );

        if (duplicateClient) {
            return 'Já existe um cliente com esse nome.';
        }

        return '';
    }, [cleanName, clients]);

    const passwordError = useMemo(() => {
        if (!password.trim()) return 'A palavra-passe é obrigatória.';

        if (hasTxtSeparator(password)) {
            return 'A palavra-passe não pode conter "xxx" ou quebras de linha.';
        }

        return '';
    }, [password]);

    const formIsValid = !nameError && !passwordError;

    async function createClient() {
        try {
            setSaving(true);
            setError('');

            await vpsApi.createControllerClient(cleanName, password);
            await onSaved(cleanName);

            onClose();
        } catch (err) {
            setError(String(err));
        } finally {
            setSaving(false);
        }
    }

    function normalizeClientId(value: string) {
        return value.trim().toLowerCase().replace(/\s+/g, '_');
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm">
            <div className="w-full max-w-xl overflow-hidden rounded-3xl border border-white/10 bg-[#050b1a] shadow-2xl">
                <div className="flex items-start justify-between gap-4 border-b border-white/10 px-6 py-5">
                    <div>
                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-blue-300/70">
                            Novo Cliente
                        </p>

                        <h2 className="mt-2 text-2xl font-black text-white">
                            Criar ficheiro VPS
                        </h2>

                        <p className="mt-1 text-sm text-slate-500">
                            Cria um novo cliente com apenas a primeira linha do ficheiro.
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 text-slate-400 transition hover:bg-white/[0.06] hover:text-white"
                    >
                        <X size={18} />
                    </button>
                </div>

                <div className="space-y-5 px-6 py-6">
                    {error && (
                        <div className="rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs font-medium text-red-300">
                            Erro ao criar cliente: {error}
                        </div>
                    )}

                    <Field
                        label="Nome do cliente"
                        value={name}
                        error={nameError}
                        placeholder="Ex: Adoraflor"
                        onChange={(value) =>
                            setName(value.replace(/[^\w\- ]/g, ''))
                        }
                        autoFocus
                    />

                    <div>
                        <Field
                            label="Palavra-passe"
                            value={password}
                            error={passwordError}
                            onChange={setPassword}
                        />

                        <Button
                            type="button"
                            variant="secondary"
                            onClick={() => setPassword(generateClientPassword())}
                            className="mt-3 rounded-xl text-xs font-bold"
                        >
                            Gerar password
                        </Button>
                    </div>
                </div>

                <div className="flex items-center justify-end gap-3 border-t border-white/10 px-6 py-4">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={onClose}
                        className="rounded-2xl px-4 py-3 font-bold"
                    >
                        Cancelar
                    </Button>

                    <Button
                        type="button"
                        onClick={createClient}
                        disabled={!formIsValid || saving}
                        className="rounded-2xl px-5 py-3 font-black disabled:bg-slate-700 disabled:text-slate-400"
                    >
                        <Plus size={16} />
                        {saving ? 'A criar...' : 'Criar Cliente'}
                    </Button>
                </div>
            </div>
        </div>
    );
}

function EditClientModal({
    client,
    onClose,
    onSaved,
}: {
    client: ControllerClient;
    onClose: () => void;
    onSaved: () => Promise<void> | void;
}) {
    const [clientPassword, setClientPassword] = useState('');
    const [controllers, setControllers] = useState<EditableController[]>([]);
    const [loadingClientFile, setLoadingClientFile] = useState(true);
    const [clientFileError, setClientFileError] = useState('');
    const [saving, setSaving] = useState(false);
    const [saveError, setSaveError] = useState('');

    useEffect(() => {
        let cancelled = false;

        async function loadClientFile() {
            try {
                setLoadingClientFile(true);
                setClientFileError('');

                const response = await vpsApi.readControllerClient(client.id);

                if (cancelled) return;

                const parsed = parseClientTxt(response.content);

                setClientPassword(parsed.password);
                setControllers(parsed.controllers);
            } catch (err) {
                if (cancelled) return;

                setClientFileError(String(err));
                setClientPassword('');
                setControllers([]);
            } finally {
                if (!cancelled) {
                    setLoadingClientFile(false);
                }
            }
        }

        loadClientFile();

        return () => {
            cancelled = true;
        };
    }, [client.id]);

    const controllerErrors = useMemo(
        () => controllers.map(validateController),
        [controllers],
    );

    const clientPasswordError = useMemo(() => {
        if (loadingClientFile) return '';
        if (!clientPassword.trim()) return 'A palavra-passe é obrigatória.';

        if (hasTxtSeparator(clientPassword)) {
            return 'A palavra-passe não pode conter "xxx" ou quebras de linha.';
        }

        return '';
    }, [clientPassword, loadingClientFile]);

    const formIsValid =
        !loadingClientFile &&
        !clientFileError &&
        !clientPasswordError &&
        controllers.length > 0 &&
        controllerErrors.every((errors) => !hasErrors(errors));

    const txtPreview = useMemo(() => {
        const lines = [
            clientPassword,
            ...controllers.map(
                (controller) =>
                    `${controller.name}xxx${controller.routerVpnIp}xxx${controller.externalPort}xxx${controller.password}`,
            ),
        ];

        return `${lines.join('\n')}\n`;
    }, [clientPassword, controllers]);

    function updateController(
        id: string,
        patch: Partial<EditableController>,
    ) {
        setControllers((current) =>
            current.map((controller) =>
                controller.id === id
                    ? { ...controller, ...patch }
                    : controller,
            ),
        );
    }

    function addController() {
        setControllers((current) => [
            ...current,
            {
                id: crypto.randomUUID(),
                name: `Controlador${current.length + 1}`,
                routerVpnIp: '',
                externalPort: getNextAvailablePort(current),
                password: '111111',
            },
        ]);
    }

    function removeController(id: string) {
        setControllers((current) =>
            current.filter((controller) => controller.id !== id),
        );
    }

    async function saveClientFile() {
        try {
            setSaving(true);
            setSaveError('');

            await vpsApi.updateControllerClient(client.id, txtPreview);
            await onSaved();

            onClose();
        } catch (err) {
            setSaveError(String(err));
        } finally {
            setSaving(false);
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm">
            <div className="flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-[#050b1a] shadow-2xl">
                <div className="flex items-start justify-between gap-4 border-b border-white/10 px-6 py-5">
                    <div>
                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-blue-300/70">
                            Editar Cliente
                        </p>

                        <h2 className="mt-2 text-2xl font-black text-white">
                            {client.name}
                        </h2>

                        <p className="mt-1 break-all font-mono text-xs text-slate-500">
                            {client.path}
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 text-slate-400 transition hover:bg-white/[0.06] hover:text-white"
                    >
                        <X size={18} />
                    </button>
                </div>

                {saveError && (
                    <div className="mx-6 mt-3 rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs font-medium text-red-300">
                        Erro ao guardar: {saveError}
                    </div>
                )}

                {loadingClientFile ? (
                    <div className="flex min-h-[420px] items-center justify-center text-sm text-slate-400">
                        A carregar ficheiro do cliente...
                    </div>
                ) : clientFileError ? (
                    <div className="m-6 rounded-2xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-300">
                        Erro ao carregar ficheiro do cliente: {clientFileError}
                    </div>
                ) : (
                    <div className={`grid min-h-0 flex-1 gap-4 overflow-hidden px-6 pb-6 xl:grid-cols-12 ${saveError ? 'pt-4' : 'pt-6'}`}>
                        <div className="space-y-4 xl:col-span-7">
                            <div className="rounded-3xl border border-white/10 bg-white/[0.025] p-5">
                                <h3 className="font-bold text-white">
                                    Dados do Cliente
                                </h3>

                                <div className="mt-4">
                                    <Field
                                        label="Palavra-passe / primeira linha do ficheiro"
                                        value={clientPassword}
                                        error={clientPasswordError}
                                        onChange={setClientPassword}
                                    />
                                </div>
                            </div>

                            <div className="rounded-3xl border border-white/10 bg-white/[0.025] p-5">
                                <div className="mb-4 flex items-center justify-between gap-3">
                                    <div>
                                        <h3 className="font-bold text-white">
                                            Controladores
                                        </h3>

                                        <p className="text-xs text-slate-500">
                                            Entradas carregadas do ficheiro real do cliente.
                                        </p>
                                    </div>

                                    <Button
                                        type="button"
                                        variant="secondary"
                                        onClick={addController}
                                        className="rounded-2xl border-blue-500/20 bg-blue-500/15 px-4 py-3 font-bold text-blue-100 hover:bg-blue-500/20"
                                    >
                                        <Plus size={16} />
                                        Adicionar
                                    </Button>
                                </div>

                                <div className={`max-h-[360px] space-y-3 overflow-y-auto pr-2 ${scrollClass}`}>
                                    {controllers.map((controller, index) => (
                                        <div
                                            key={controller.id}
                                            className="rounded-2xl border border-white/10 bg-black/15 p-4"
                                        >
                                            <div className="mb-3 flex items-center justify-between">
                                                <p className="text-sm font-bold text-white">
                                                    Controlador #{index + 1}
                                                </p>

                                                <button
                                                    type="button"
                                                    onClick={() =>
                                                        removeController(controller.id)
                                                    }
                                                    className="rounded-xl p-2 text-slate-500 transition hover:bg-red-500/10 hover:text-red-300"
                                                >
                                                    <Trash2 size={16} />
                                                </button>
                                            </div>

                                            <div className="grid gap-3 md:grid-cols-2">
                                                <Field
                                                    label="Nome"
                                                    value={controller.name}
                                                    error={controllerErrors[index]?.name}
                                                    onChange={(value) =>
                                                        updateController(controller.id, {
                                                            name: value.replace(
                                                                /[^\w\- ]/g,
                                                                '',
                                                            ),
                                                        })
                                                    }
                                                />

                                                <SmartRouterField
                                                    label="Router / Host"
                                                    value={controller.routerVpnIp}
                                                    error={controllerErrors[index]?.routerVpnIp}
                                                    onChange={(value) =>
                                                        updateController(controller.id, {
                                                            routerVpnIp: value,
                                                        })
                                                    }
                                                />

                                                <Field
                                                    label="Porta externa"
                                                    type="number"
                                                    min={5900}
                                                    max={5999}
                                                    step={1}
                                                    value={controller.externalPort}
                                                    error={
                                                        controllerErrors[index]?.externalPort
                                                    }
                                                    inputMode="numeric"
                                                    onChange={(value) =>
                                                        updateController(controller.id, {
                                                            externalPort: value,
                                                        })
                                                    }
                                                />

                                                <Field
                                                    label="PIN / Password"
                                                    value={controller.password}
                                                    error={controllerErrors[index]?.password}
                                                    inputMode="numeric"
                                                    maxLength={6}
                                                    onChange={(value) =>
                                                        updateController(controller.id, {
                                                            password: value
                                                                .replace(/\D/g, '')
                                                                .slice(0, 6),
                                                        })
                                                    }
                                                />
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>

                        <div className="xl:col-span-5">
                            <div className="sticky top-0 rounded-3xl border border-white/10 bg-white/[0.025] p-5">
                                <div className="mb-4 flex items-center justify-between gap-3">
                                    <div>
                                        <h3 className="font-bold text-white">
                                            Preview .txt
                                        </h3>

                                        <p className="text-xs text-slate-500">
                                            Conteúdo exato a guardar no ficheiro.
                                        </p>
                                    </div>

                                    <span className="rounded-2xl bg-white/[0.04] px-3 py-2 text-xs font-bold text-slate-300">
                                        {controllers.length} entradas
                                    </span>
                                </div>

                                <pre className={`max-h-[520px] overflow-auto whitespace-pre-wrap rounded-2xl border border-white/10 bg-black/30 p-4 font-mono text-xs leading-6 text-slate-300 ${scrollClass}`}>
                                    {txtPreview}
                                </pre>
                            </div>
                        </div>
                    </div>
                )}

                <div className="flex items-center justify-between gap-3 border-t border-white/10 px-6 py-4">
                    <p className="text-xs text-slate-500">
                        Dados carregados diretamente do ficheiro do cliente.
                    </p>

                    <div className="flex gap-3">
                        <Button
                            type="button"
                            variant="secondary"
                            onClick={onClose}
                            className="rounded-2xl px-4 py-3 font-bold"
                        >
                            Cancelar
                        </Button>

                        <Button
                            type="button"
                            onClick={saveClientFile}
                            disabled={!formIsValid || saving}
                            className="rounded-2xl px-5 py-3 font-black disabled:bg-slate-700 disabled:text-slate-400"
                        >
                            <Save size={16} />
                            {saving ? 'A guardar...' : 'Guardar alterações'}
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}

function RuleModal({
    title,
    routerHost,
    routerPassword,
    rule,
    defaultExternalPort = '',
    onClose,
    onSaved,
}: {
    title: string;
    routerHost: string;
    routerPassword: string;
    rule?: RouterFirewallRule;
    defaultExternalPort?: string;
    onClose: () => void;
    onSaved: () => Promise<void> | void;
}) {
    const editing = Boolean(rule);
    const [id, setId] = useState(rule?.id ?? '');
    const [name, setName] = useState(rule?.name ?? '');
    const [proto, setProto] = useState(rule?.proto ?? 'tcp');
    const [srcZone, setSrcZone] = useState(rule?.srcZone ?? 'vpn');
    const [destZone, setDestZone] = useState(rule?.destZone ?? 'lan');
    const [externalPort, setExternalPort] = useState(rule?.externalPort ?? defaultExternalPort);
    const [internalIp, setInternalIp] = useState(rule?.internalIp ?? '');
    const [internalPort, setInternalPort] = useState(rule?.internalPort ?? '5900');
    const [saving, setSaving] = useState(false);
    const [error, setError] = useState('');

    const cleanId = id.trim();
    const formIsValid =
        cleanId &&
        name.trim() &&
        proto.trim() &&
        srcZone.trim() &&
        destZone.trim() &&
        isValidPort(externalPort) &&
        isValidPort(internalPort) &&
        IPV4_REGEX.test(internalIp.trim());

    async function saveRule() {
        if (!formIsValid) return;

        const payload: RouterFirewallRule = {
            id: cleanId,
            name: name.trim(),
            proto: proto.trim(),
            srcZone: srcZone.trim(),
            destZone: destZone.trim(),
            externalPort: externalPort.trim(),
            internalIp: internalIp.trim(),
            internalPort: internalPort.trim(),
            target: 'DNAT',
        };

        try {
            setSaving(true);
            setError('');

            if (editing) {
                await vpsApi.updateRouterFirewallRule(routerHost, routerPassword, payload);
            } else {
                await vpsApi.createRouterFirewallRule(routerHost, routerPassword, payload);
            }

            await onSaved();
        } catch (err) {
            setError(String(err));
        } finally {
            setSaving(false);
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm">
            <div className="w-full max-w-3xl overflow-hidden rounded-3xl border border-white/10 bg-[#050b1a] shadow-2xl">
                <div className="flex items-start justify-between gap-4 border-b border-white/10 px-6 py-5">
                    <div>
                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-blue-300/70">
                            Regra DNAT
                        </p>

                        <h2 className="mt-2 text-2xl font-black text-white">
                            {title}
                        </h2>

                        <p className="mt-1 font-mono text-xs text-slate-500">
                            Router: {routerHost}
                        </p>
                    </div>

                    <button
                        type="button"
                        onClick={onClose}
                        className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 text-slate-400 transition hover:bg-white/[0.06] hover:text-white"
                    >
                        <X size={18} />
                    </button>
                </div>

                <div className="space-y-4 px-6 py-6">
                    {error && (
                        <div className="rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs font-medium text-red-300">
                            Erro ao guardar regra: {error}
                        </div>
                    )}

                    <div className="grid gap-4 md:grid-cols-2">
                        <Field
                            label="ID técnico"
                            value={id}
                            disabled={editing}
                            placeholder="dnat_hmi_1_vnc"
                            onChange={(value) =>
                                setId(value.replace(/[^\w-]/g, '').toLowerCase())
                            }
                        />

                        <Field
                            label="Nome"
                            value={name}
                            placeholder="HMI 1 - VNC"
                            onChange={setName}
                        />

                        <Field
                            label="Protocolo"
                            value={proto}
                            placeholder="tcp"
                            onChange={(value) => setProto(value.toLowerCase())}
                        />

                        <Field
                            label="Porta externa"
                            type="number"
                            min={1}
                            max={65535}
                            step={1}
                            value={externalPort}
                            error={externalPort && !isValidPort(externalPort) ? 'Porta inválida.' : ''}
                            inputMode="numeric"
                            placeholder="5900"
                            onChange={(value) => setExternalPort(value.replace(/\D/g, ''))}
                        />

                        <IpField
                            label="IP interno"
                            value={internalIp}
                            error={internalIp && !IPV4_REGEX.test(internalIp) ? 'IPv4 inválido.' : ''}
                            onChange={setInternalIp}
                        />

                        <Field
                            label="Porta interna"
                            type="number"
                            min={1}
                            max={65535}
                            step={1}
                            value={internalPort}
                            error={internalPort && !isValidPort(internalPort) ? 'Porta inválida.' : ''}
                            inputMode="numeric"
                            placeholder="5900"
                            onChange={(value) => setInternalPort(value.replace(/\D/g, ''))}
                        />

                        <Field
                            label="Zona origem"
                            value={srcZone}
                            placeholder="vpn"
                            onChange={setSrcZone}
                        />

                        <Field
                            label="Zona destino"
                            value={destZone}
                            placeholder="lan"
                            onChange={setDestZone}
                        />
                    </div>

                    <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                        <p className="text-xs font-bold uppercase tracking-[0.16em] text-slate-500">
                            Preview
                        </p>

                        <p className="mt-2 font-mono text-sm text-slate-300">
                            {externalPort || '—'} → {internalIp || '—'}:{internalPort || '—'} · {proto || 'tcp'}
                        </p>
                    </div>
                </div>

                <div className="flex items-center justify-end gap-3 border-t border-white/10 px-6 py-4">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={onClose}
                        className="rounded-2xl px-4 py-3 font-bold"
                    >
                        Cancelar
                    </Button>

                    <Button
                        type="button"
                        onClick={saveRule}
                        disabled={!formIsValid || saving}
                        className="rounded-2xl px-5 py-3 font-black disabled:bg-slate-700 disabled:text-slate-400"
                    >
                        <Save size={16} />
                        {saving ? 'A guardar...' : 'Guardar regra'}
                    </Button>
                </div>
            </div>
        </div>
    );
}

function DeleteRuleModal({
    rule,
    loading,
    onClose,
    onConfirm,
}: {
    rule: RouterFirewallRule;
    loading: boolean;
    onClose: () => void;
    onConfirm: () => Promise<void> | void;
}) {
    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6 backdrop-blur-sm">
            <div className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[#050b1a] shadow-2xl">
                <div className="border-b border-white/10 px-6 py-5">
                    <p className="text-xs font-bold uppercase tracking-[0.18em] text-red-300/80">
                        Apagar Regra
                    </p>

                    <h2 className="mt-2 text-xl font-black text-white">
                        Tem a certeza?
                    </h2>

                    <p className="mt-2 text-sm text-slate-400">
                        Vai apagar a regra{' '}
                        <span className="font-bold text-white">
                            {rule.name || rule.id}
                        </span>
                        .
                    </p>

                    <p className="mt-3 font-mono text-xs text-slate-500">
                        {rule.externalPort} → {rule.internalIp}:{rule.internalPort}
                    </p>
                </div>

                <div className="flex justify-end gap-3 px-6 py-4">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={onClose}
                        className="rounded-2xl px-4 py-3 font-bold"
                    >
                        Cancelar
                    </Button>

                    <Button
                        type="button"
                        variant="danger"
                        disabled={loading}
                        onClick={onConfirm}
                        className="rounded-2xl px-5 py-3 font-black"
                    >
                        <Trash2 size={16} />
                        {loading ? 'A apagar...' : 'Apagar'}
                    </Button>
                </div>
            </div>
        </div>
    );
}

function parseClientTxt(content: string): {
    password: string;
    controllers: EditableController[];
} {
    const lines = content
        .replace(/\r\n/g, '\n')
        .replace(/\r/g, '\n')
        .split('\n')
        .filter((line) => line.length > 0);

    const password = lines[0] ?? '';

    const controllers = lines.slice(1).map((line, index) => {
        const [name = '', routerVpnIp = '', externalPort = '', password = ''] =
            line.split('xxx');

        return {
            id: crypto.randomUUID(),
            name,
            routerVpnIp,
            externalPort,
            password,
        };
    });

    return {
        password,
        controllers,
    };
}

function Field({
    label,
    value,
    onChange,
    error,
    inputMode,
    maxLength,
    type = 'text',
    min,
    max,
    step,
    hideLabel = false,
    placeholder,
    autoFocus = false,
    disabled = false
}: {
    label: string;
    value: string;
    onChange: (value: string) => void;
    error?: string;
    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
    maxLength?: number;
    type?: React.HTMLInputTypeAttribute;
    min?: number;
    max?: number;
    step?: number;
    hideLabel?: boolean;
    placeholder?: string;
    autoFocus?: boolean;
    disabled?: boolean;
}) {
    return (
        <div>
            {!hideLabel && (
                <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                    {label}
                </label>
            )}

            <div className="relative">
                <input
                    type={type}
                    value={value}
                    autoFocus={autoFocus}
                    min={min}
                    max={max}
                    disabled={disabled}
                    placeholder={placeholder}
                    step={step}
                    inputMode={inputMode}
                    maxLength={maxLength}
                    onChange={(event) => onChange(event.target.value)}
                    className={`w-full rounded-xl border bg-slate-950 px-3 py-3 pr-12 font-mono text-sm text-white outline-none transition placeholder:text-slate-600 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none ${error
                        ? 'border-red-500/60 focus:border-red-400'
                        : 'border-white/10 focus:border-blue-500/40'
                        }`}
                />

                {type === 'number' && (
                    <div className="absolute right-2 top-1/2 flex -translate-y-1/2 flex-col gap-1">
                        <button
                            type="button"
                            onClick={() => {
                                const current = Number(value || 0);
                                const next = current + Number(step || 1);

                                if (typeof max === 'number' && next > max) return;

                                onChange(String(next));
                            }}
                            className="flex h-4 w-4 items-center justify-center rounded bg-white/[0.06] text-[10px] text-slate-300 transition hover:bg-blue-500/20 hover:text-white"
                        >
                            +
                        </button>

                        <button
                            type="button"
                            onClick={() => {
                                const current = Number(value || 0);
                                const next = current - Number(step || 1);

                                const floor = typeof min === 'number' ? min : 5900;

                                onChange(String(Math.max(floor, next)));
                            }}
                            className="flex h-4 w-4 items-center justify-center rounded bg-white/[0.06] text-[10px] text-slate-300 transition hover:bg-blue-500/20 hover:text-white"
                        >
                            −
                        </button>
                    </div>
                )}
            </div>

            {error && (
                <p className="mt-2 text-xs font-medium text-red-300">
                    {error}
                </p>
            )}
        </div>
    );
}

function IpField({
    label,
    value,
    onChange,
    error,
    hideLabel = false,
    autoFocusFirstOctet = false,
    autoFocusOctetIndex = 0,
}: {
    label: string;
    value: string;
    onChange: (value: string) => void;
    error?: string;
    hideLabel?: boolean;
    autoFocusFirstOctet?: boolean;
    autoFocusOctetIndex?: number;
}) {
    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);

    useEffect(() => {
        if (!autoFocusFirstOctet) return;

        requestAnimationFrame(() => {
            const input = inputRefs.current[autoFocusOctetIndex];

            input?.focus();
            input?.setSelectionRange(input.value.length, input.value.length);
        });
    }, [autoFocusFirstOctet, autoFocusOctetIndex]);

    const parts = value.split('.');
    const octets = Array.from({ length: 4 }, (_, index) => parts[index] ?? '');

    function updateOctet(index: number, rawValue: string) {
        const nextValue = rawValue.replace(/\D/g, '').slice(0, 3);

        if (nextValue && Number(nextValue) > 255) return;

        const nextOctets = [...octets];
        nextOctets[index] = nextValue;

        onChange(nextOctets.join('.'));
    }

    function handleKeyDown(
        index: number,
        event: React.KeyboardEvent<HTMLInputElement>,
    ) {
        if (event.key === '.') {
            event.preventDefault();

            inputRefs.current[index + 1]?.focus();

            return;
        }

        if (event.key !== 'Backspace') return;

        const current = octets[index];

        if (current.length > 0) {
            const nextOctets = [...octets];
            nextOctets[index] = current.slice(0, -1);

            onChange(nextOctets.join('.'));
            event.preventDefault();

            return;
        }

        if (index > 0) {
            event.preventDefault();
            inputRefs.current[index - 1]?.focus();
        }
    }

    return (
        <div>
            {!hideLabel && (
                <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                    {label}
                </label>
            )}

            <div
                className={`flex items-center rounded-xl border bg-slate-950 px-3 py-2 font-mono text-sm text-white transition ${error
                    ? 'border-red-500/60 focus-within:border-red-400'
                    : 'border-white/10 focus-within:border-blue-500/40'
                    }`}
            >
                {octets.map((octet, index) => (
                    <Fragment key={index}>
                        <input
                            ref={(element) => {
                                inputRefs.current[index] = element;
                            }}
                            value={octet}
                            inputMode="numeric"
                            maxLength={3}
                            onChange={(event) =>
                                updateOctet(index, event.target.value)
                            }
                            onKeyDown={(event) =>
                                handleKeyDown(index, event)
                            }
                            className="w-full min-w-0 bg-transparent px-1 py-1 text-center outline-none"
                        />

                        {index < 3 && (
                            <span className="select-none px-1 text-slate-500">
                                .
                            </span>
                        )}
                    </Fragment>
                ))}
            </div>

            {error && (
                <p className="mt-2 text-xs font-medium text-red-300">
                    {error}
                </p>
            )}
        </div>
    );
}

type FieldErrors = Partial<Record<keyof EditableController, string>>;

const IPV4_REGEX =
    /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;

const HOSTNAME_REGEX =
    /^(?=.{1,253}$)([a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;

function isValidRouterHost(value: string) {
    const trimmed = value.trim();

    return IPV4_REGEX.test(trimmed) || HOSTNAME_REGEX.test(trimmed);
}

const INVALID_CONTROLLER_NAME_REGEX = /(xxx|\r|\n)/i;

function hasTxtSeparator(value: string) {
    return value.includes('xxx') || value.includes('\n') || value.includes('\r');
}

function validatePort(value: string) {
    const port = Number(value);

    if (!value.trim()) {
        return 'A porta externa é obrigatória.';
    }

    if (!/^\d+$/.test(value)) {
        return 'A porta deve conter apenas números.';
    }

    if (port < 5900 || port > 5999) {
        return 'A porta deve estar entre 5900 e 5999.';
    }

    return '';
}

function isValidPort(value: string) {
    const port = Number(value);

    return /^\d+$/.test(value) && port >= 1 && port <= 65535;
}

function getNextAvailablePort(controllers: EditableController[]) {
    const usedPorts = new Set(
        controllers
            .map((controller) => Number(controller.externalPort))
            .filter((port) => Number.isInteger(port) && port >= 5900),
    );

    let port = 5900;

    while (usedPorts.has(port)) {
        port += 1;
    }

    return String(port);
}

function validateController(controller: EditableController): FieldErrors {
    const errors: FieldErrors = {};

    if (!controller.name.trim()) {
        errors.name = 'O nome é obrigatório.';
    } else if (INVALID_CONTROLLER_NAME_REGEX.test(controller.name)) {
        errors.name =
            'O nome não pode conter "xxx" ou quebras de linha.';
    }

    if (!controller.routerVpnIp.trim()) {
        errors.routerVpnIp = 'O router/host é obrigatório.';
    } else if (!isValidRouterHost(controller.routerVpnIp)) {
        errors.routerVpnIp = 'Introduz um IPv4 ou hostname válido.';
    }

    const portError = validatePort(controller.externalPort);
    if (portError) errors.externalPort = portError;

    if (!/^\d{6}$/.test(controller.password)) {
        errors.password = 'O PIN/password deve ter exatamente 6 dígitos.';
    }

    return errors;
}

function hasErrors(errors: FieldErrors) {
    return Object.values(errors).some(Boolean);
}

type RouterFieldMode = 'host' | 'ip';

function SmartRouterField({
    label,
    value,
    onChange,
    error,
}: {
    label: string;
    value: string;
    onChange: (value: string) => void;
    error?: string;
}) {
    const [mode, setMode] = useState<RouterFieldMode>(() =>
        IPV4_REGEX.test(value.trim()) ? 'ip' : 'host',
    );

    const [focusOctetIndex, setFocusOctetIndex] = useState(0);
    const [isFocused, setIsFocused] = useState(false);

    useEffect(() => {
        if (!value.trim()) {
            setMode('host');
            setFocusOctetIndex(0);
        }
    }, [value]);

    function handleHostChange(nextValue: string) {
        const shouldSwitchToIp =
            /^[\d.]+$/.test(nextValue) && /\d+\.$/.test(nextValue);

        if (shouldSwitchToIp) {
            setFocusOctetIndex(
                Math.min(nextValue.split('.').length - 1, 3),
            );

            setMode('ip');
        }

        onChange(nextValue);
    }

    function handleIpChange(nextValue: string) {
        if (!nextValue.replace(/\./g, '').trim()) {
            onChange('');
            return;
        }

        onChange(nextValue);
    }
    return (
        <div
            onFocus={() => setIsFocused(true)}
            onBlur={() => {
                setIsFocused(false);

                if (!value.trim()) {
                    setMode('host');
                    setFocusOctetIndex(0);
                }
            }}
        >
            <div className="mb-2 flex items-center justify-between gap-3">
                <label className="block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
                    {label}
                </label>

                <span className="rounded-xl border border-white/10 bg-slate-950 px-2.5 py-1 text-[10px] font-black uppercase tracking-[0.12em] text-blue-200">
                    {mode === 'ip' ? 'Auto · IPv4' : 'Auto · Host'}
                </span>
            </div>

            {mode === 'ip' ? (
                <IpField
                    label=""
                    value={value}
                    error={error}
                    onChange={handleIpChange}
                    hideLabel
                    autoFocusFirstOctet
                    autoFocusOctetIndex={focusOctetIndex}
                />
            ) : (
                <Field
                    label=""
                    value={value}
                    error={error}
                    onChange={handleHostChange}
                    placeholder="198.19.0.167 ou adoraflor.nsupdate.info"
                    hideLabel
                    autoFocus
                />
            )}
        </div>
    );
}

function generateClientPassword() {
    const alphabet =
        'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789';

    return Array.from({ length: 8 }, () =>
        alphabet[Math.floor(Math.random() * alphabet.length)],
    ).join('');
}