import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import {
    Link as LinkIcon,
    QrCode,
    BarChart3,
    ShieldAlert,
    User,
    Copy,
    Check,
    Download,
    ExternalLink,
    Trash2,
    RefreshCw,
    Plus,
    Search,
    Bot,
    Globe,
    Monitor,
    Info,
    Lock,
    CheckCircle2,
    AlertTriangle,
    X
} from "lucide-react";

function getFlagEmoji(countryCode) {
    if (!countryCode || countryCode === "XX" || countryCode === "T1") return "🌐";
    try {
        const codePoints = countryCode
        .toUpperCase()
        .split("")
        .map((char) => 127397 + char.charCodeAt(0));
        return String.fromCodePoint(...codePoints);
    } catch {
        return "🌐";
    }
}

function isValidHttpUrl(value) {
    if (!value) return false;
    try {
        const parsed = new URL(/^https?:\/\//i.test(value) ? value : `https://${value}`);
        return parsed.protocol === "http:" || parsed.protocol === "https:";
    } catch {
        return false;
    }
}

function App() {
    const [activeTab, setActiveTab] = useState("create");
    const [currentUser, setCurrentUser] = useState(null);
    const [authLoading, setAuthLoading] = useState(true);
    const [config, setConfig] = useState({
        app_name: "RegisterMySite Links",
        public_origin: "",
            public_origins: [],
                environment: "development",
                demo_enabled: false
    });
    const [selectedOrigin, setSelectedOrigin] = useState("");

    const [destUrl, setDestUrl] = useState("");
    const [slugPreset, setSlugPreset] = useState("blank");
    const [customSlug, setCustomSlug] = useState("");
    const [linkTitle, setLinkTitle] = useState("");
    const [creating, setCreating] = useState(false);
    const [createError, setCreateError] = useState("");
    const [createdLink, setCreatedLink] = useState(null);
    const [copiedLink, setCopiedLink] = useState(false);

    const [userLinks, setUserLinks] = useState([]);
    const [linksLoading, setLinksLoading] = useState(false);
    const [dashboardStats, setDashboardStats] = useState(null);
    const [selectedAnalyticsLink, setSelectedAnalyticsLink] = useState(null);
    const [analyticsData, setAnalyticsData] = useState(null);
    const [analyticsLoading, setAnalyticsLoading] = useState(false);
    const [hideBots, setHideBots] = useState(false);

    const [qrModalLink, setQrModalLink] = useState(null);

    const [adminLinks, setAdminLinks] = useState([]);
    const [adminUsers, setAdminUsers] = useState([]);
    const [adminLoading, setAdminLoading] = useState(false);
    const [adminSearch, setAdminSearch] = useState("");
    const [flagModalLink, setFlagModalLink] = useState(null);
    const [flagReason, setFlagReason] = useState("");

    const [showAuthModal, setShowAuthModal] = useState(false);
    const [authMode, setAuthMode] = useState("login");
    const [authEmail, setAuthEmail] = useState("");
    const [authPassword, setAuthPassword] = useState("");
    const [authError, setAuthError] = useState("");
    const [authBusy, setAuthBusy] = useState(false);

    useEffect(() => {
        loadConfig();
        checkAuth();
    }, []);

    const loadConfig = async () => {
        try {
            const res = await fetch("./api/config");
            if (res.ok) {
                const data = await res.json();
                const origins = Array.isArray(data.public_origins) && data.public_origins.length
                ? data.public_origins
                : data.public_origin
                ? [data.public_origin]
                : [];
                setConfig({ ...data, public_origins: origins });
                setSelectedOrigin((current) => current || data.public_origin || origins[0] || "");
            }
        } catch (err) {
            console.error("Config load failed:", err);
        }
    };

    const checkAuth = async () => {
        setAuthLoading(true);
        try {
            const res = await fetch("./api/auth/me");
            const data = await res.json();
            if (data.authenticated && data.user) setCurrentUser(data.user);
            else setCurrentUser(null);
        } catch (err) {
            console.error("Auth check failed:", err);
        } finally {
            setAuthLoading(false);
        }
    };

    const demoLogin = async (role) => {
        try {
            const res = await fetch("./api/auth/demo-login", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ role })
            });
            const data = await res.json();
            if (res.ok && data.user) {
                setCurrentUser(data.user);
                setShowAuthModal(false);
            } else {
                setAuthError(data.error || "Demo login is unavailable.");
            }
        } catch (err) {
            setAuthError("Demo login failed.");
        }
    };

    const handleAuthSubmit = async (e) => {
        e.preventDefault();
        setAuthBusy(true);
        setAuthError("");
        try {
            const path = authMode === "register" ? "./api/auth/register" : "./api/auth/login";
            const res = await fetch(path, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ email: authEmail, password: authPassword })
            });
            const data = await res.json();
            if (!res.ok) {
                setAuthError(data.error || "Authentication failed.");
            } else {
                setCurrentUser(data.user);
                setShowAuthModal(false);
                setAuthPassword("");
            }
        } catch {
            setAuthError("Network error.");
        } finally {
            setAuthBusy(false);
        }
    };

    const logout = async () => {
        await fetch("./api/auth/logout", { method: "POST" });
        setCurrentUser(null);
        setUserLinks([]);
        setAdminLinks([]);
        setDashboardStats(null);
        setActiveTab("create");
    };

    useEffect(() => {
        if (currentUser) {
            fetchUserLinks();
            if (currentUser.role === "admin") fetchAdminData();
        }
    }, [currentUser]);

    const fetchUserLinks = async () => {
        setLinksLoading(true);
        try {
            const [resLinks, resStats] = await Promise.all([
                fetch("./api/links"),
                                                           fetch("./api/analytics/dashboard")
            ]);
            if (resLinks.ok) {
                const data = await resLinks.json();
                setUserLinks(data.links || []);
            }
            if (resStats.ok) setDashboardStats(await resStats.json());
        } catch (err) {
            console.error("Error fetching user links:", err);
        } finally {
            setLinksLoading(false);
        }
    };

    const fetchAdminData = async () => {
        setAdminLoading(true);
        try {
            const [resLinks, resUsers] = await Promise.all([
                fetch("./api/admin/links"),
                                                           fetch("./api/admin/users")
            ]);
            if (resLinks.ok) setAdminLinks((await resLinks.json()).links || []);
            if (resUsers.ok) setAdminUsers((await resUsers.json()).users || []);
        } catch (err) {
            console.error("Error fetching admin data:", err);
        } finally {
            setAdminLoading(false);
        }
    };

    const handleCreateLink = async (e) => {
        e.preventDefault();
        if (!isValidHttpUrl(destUrl)) {
            setCreateError("Enter a valid http or https destination URL.");
            return;
        }
        if (slugPreset === "custom" && customSlug.trim().length < 2) {
            setCreateError("Custom slugs need at least 2 characters.");
            return;
        }

        setCreating(true);
        setCreateError("");
        setCreatedLink(null);

        try {
            const res = await fetch("./api/links", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    destination_url: destUrl,
                    slug_preset: slugPreset,
                    custom_slug: slugPreset === "custom" ? customSlug : "",
                    title: linkTitle,
                    public_origin: selectedOrigin
                })
            });
            const data = await res.json();
            if (!res.ok) setCreateError(data.error || "Failed to create short link.");
            else {
                setCreatedLink(data);
                if (currentUser) fetchUserLinks();
                if (currentUser?.role === "admin") fetchAdminData();
            }
        } catch {
            setCreateError("Network error while creating link.");
        } finally {
            setCreating(false);
        }
    };

    const openLinkAnalytics = async (link) => {
        setSelectedAnalyticsLink(link);
        setAnalyticsLoading(true);
        setAnalyticsData(null);
        try {
            const res = await fetch(`./api/analytics/link/${link.id}?limit=100&offset=0`);
            if (res.ok) setAnalyticsData(await res.json());
        } catch (err) {
            console.error("Analytics fetch error:", err);
        } finally {
            setAnalyticsLoading(false);
        }
    };

    const toggleLinkStatus = async (linkId, currentStatus) => {
        const nextStatus = currentStatus === "active" ? "disabled" : "active";
        await fetch(`./api/links/${linkId}/status`, {
            method: "PATCH",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ status: nextStatus })
        });
        fetchUserLinks();
        if (currentUser?.role === "admin") fetchAdminData();
    };

        const handleDeleteLink = async (linkId) => {
            if (!confirm("Delete this short link and its click history?")) return;
            await fetch(`./api/links/${linkId}`, { method: "DELETE" });
            if (selectedAnalyticsLink?.id === linkId) setSelectedAnalyticsLink(null);
            fetchUserLinks();
            if (currentUser?.role === "admin") fetchAdminData();
        };

            const handleFlagAbusive = async () => {
                if (!flagModalLink) return;
                await fetch(`./api/admin/links/${flagModalLink.id}/flag-abusive`, {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ is_abusive: true, reason: flagReason })
                });
                setFlagModalLink(null);
                setFlagReason("");
                fetchAdminData();
                fetchUserLinks();
            };

            const handleUnflagAbusive = async (linkId) => {
                await fetch(`./api/admin/links/${linkId}/flag-abusive`, {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ is_abusive: false })
                });
                fetchAdminData();
                fetchUserLinks();
            };

            const handleToggleUserBan = async (userId, currentlyBanned) => {
                const action = currentlyBanned ? "restore" : "suspend";
                if (!confirm(`${action === "suspend" ? "Suspend" : "Restore"} this user and their links?`)) return;
                await fetch(`./api/admin/users/${userId}/ban`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ banned: !currentlyBanned })
                });
                fetchAdminData();
                fetchUserLinks();
            };

            const handlePurgeUser = async (userId) => {
                if (!confirm("Permanently delete this user, their links, and click history?")) return;
                await fetch(`./api/admin/users/${userId}`, { method: "DELETE" });
                fetchAdminData();
            };

            const copyToClipboard = async (text) => {
                try {
                    await navigator.clipboard.writeText(text);
                    setCopiedLink(true);
                    setTimeout(() => setCopiedLink(false), 2000);
                } catch {
                    setCreateError("Clipboard permission denied.");
                }
            };

            const downloadQRPNG = (svgUrl, filename = "qr-code.png") => {
                const img = new Image();
                img.crossOrigin = "anonymous";
                img.onload = () => {
                    const canvas = document.createElement("canvas");
                    canvas.width = 2048;
                    canvas.height = 2048;
                    const ctx = canvas.getContext("2d");
                    ctx.fillStyle = "#FFFFFF";
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    const a = document.createElement("a");
                    a.download = filename;
                    a.href = canvas.toDataURL("image/png");
                    a.click();
                };
                img.src = svgUrl;
            };

            const downloadQRSVG = async (svgUrl, filename = "qr-code.svg") => {
                const res = await fetch(svgUrl);
                const blob = await res.blob();
                const url = URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.download = filename;
                a.href = url;
                a.click();
                URL.revokeObjectURL(url);
            };

            const origins = (config.public_origins && config.public_origins.length
            ? config.public_origins
            : [config.public_origin || window.location.origin]
            ).filter(Boolean);
            const previewOrigin = selectedOrigin || config.public_origin || window.location.origin;
            const urlReady = isValidHttpUrl(destUrl);
            const canSubmit =
            urlReady &&
            !creating &&
            (slugPreset !== "custom" || customSlug.trim().length >= 2);

            const navBtn = (id, label, icon, extra = "") => (
                <button
                onClick={() => setActiveTab(id)}
                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors flex items-center space-x-1.5 ${
                    activeTab === id
                    ? extra || "bg-brand-600 text-white"
                    : extra
                    ? "text-amber-300 hover:text-white hover:bg-amber-950/40"
                    : "text-slate-400 hover:text-white hover:bg-slate-800/60"
                }`}
                >
                {icon}
                <span>{label}</span>
                </button>
            );

            return (
                <div className="min-h-screen flex flex-col bg-canvas text-slate-100">
                <header className="h-14 border-b border-slate-800 bg-surface/90 backdrop-blur sticky top-0 z-40 px-4 md:px-8 flex items-center justify-between">
                <div className="flex items-center space-x-3 min-w-0">
                <div className="w-8 h-8 rounded-md bg-brand-600 flex items-center justify-center shrink-0">
                <LinkIcon className="w-4 h-4 text-white" />
                </div>
                <div className="min-w-0">
                <div className="flex items-baseline space-x-2">
                <span className="font-semibold text-base tracking-tight text-white">RegisterMySite</span>
                <span className="text-xs text-slate-400 font-medium">Links</span>
                </div>
                </div>
                </div>

                <nav className="hidden md:flex items-center space-x-1">
                {navBtn("create", "Create", <Plus className="w-4 h-4" />)}
                {navBtn("links", "Analytics", <BarChart3 className="w-4 h-4" />)}
                {currentUser?.role === "admin" &&
                    navBtn(
                        "admin",
                        "Control Room",
                        <ShieldAlert className="w-4 h-4" />,
                        activeTab === "admin" ? "bg-amber-700 text-white" : ""
                    )}
                    {navBtn("docs", "Architecture", <Info className="w-4 h-4" />)}
                    </nav>

                    <div className="flex items-center space-x-2">
                    {authLoading ? (
                        <span className="text-xs text-slate-500">Checking session…</span>
                    ) : currentUser ? (
                        <div className="flex items-center space-x-2">
                        <div className="hidden sm:flex flex-col items-end">
                        <span className="text-xs font-medium text-slate-200 truncate max-w-[180px]">{currentUser.email}</span>
                        <span
                        className={`text-[10px] px-1.5 rounded ${
                            currentUser.role === "admin" ? "bg-amber-950 text-amber-300" : "bg-slate-800 text-slate-400"
                        }`}
                        >
                        {currentUser.role === "admin" ? "PLATFORM ADMIN" : "MEMBER"}
                        </span>
                        </div>
                        <button
                        onClick={logout}
                        className="px-2 py-1 text-xs rounded border border-slate-700 text-slate-300 hover:bg-slate-800"
                        >
                        Sign out
                        </button>
                        </div>
                    ) : (
                        <button
                        onClick={() => {
                            setShowAuthModal(true);
                            setAuthMode("login");
                        }}
                        className="px-3 py-1.5 text-xs font-semibold rounded bg-brand-600 hover:bg-brand-500 text-white"
                        >
                        Sign in
                        </button>
                    )}
                    </div>
                    </header>

                    <nav className="md:hidden border-b border-slate-800 px-3 py-2 flex gap-1 overflow-x-auto">
                    {navBtn("create", "Create", <Plus className="w-4 h-4" />)}
                    {navBtn("links", "Analytics", <BarChart3 className="w-4 h-4" />)}
                    {currentUser?.role === "admin" &&
                        navBtn("admin", "Admin", <ShieldAlert className="w-4 h-4" />, activeTab === "admin" ? "bg-amber-700 text-white" : "")}
                        {navBtn("docs", "Docs", <Info className="w-4 h-4" />)}
                        </nav>

                        <main className="flex-1 max-w-7xl w-full mx-auto px-4 md:px-8 py-8">
                        {activeTab === "create" && (
                            <div className="max-w-3xl mx-auto space-y-8">
                            <div className="space-y-2">
                            <h1 className="text-3xl font-semibold tracking-tight text-white">Create a short link</h1>
                            <p className="text-slate-400 text-sm max-w-xl">
                            Generate a branded short URL and a vector QR code. Analytics are recorded on every 302 redirect.
                            </p>
                            </div>

                            <div className="bg-surface border border-slate-800 rounded-xl p-6 space-y-6">
                            <form onSubmit={handleCreateLink} className="space-y-4">
                            <div>
                            <label htmlFor="dest-url" className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                            Destination URL <span className="text-brand-400">*</span>
                            </label>
                            <div className="relative">
                            <input
                            id="dest-url"
                            type="url"
                            required
                            placeholder="https://example.com/campaign"
                            value={destUrl}
                            onChange={(e) => setDestUrl(e.target.value)}
                            className="w-full h-11 px-4 pr-10 rounded-lg bg-slate-900 border border-slate-700 text-white placeholder:text-slate-500 text-sm focus:outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20"
                            />
                            {urlReady && <CheckCircle2 className="absolute right-3 top-3 w-5 h-5 text-emerald-400 pointer-events-none" />}
                            </div>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                            <label htmlFor="slug-preset" className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                            Slug pattern
                            </label>
                            <select
                            id="slug-preset"
                            value={slugPreset}
                            onChange={(e) => setSlugPreset(e.target.value)}
                            className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-slate-200 text-sm focus:outline-none focus:border-brand-500"
                            >
                            <option value="blank">Plain short slug (e.g. x7k2p9)</option>
                            <option value="image">Image-style (img-xxxxx)</option>
                            <option value="markdown">Markdown-style (md-xxxxx)</option>
                            <option value="query">Query-style (ref-xxxxx)</option>
                            <option value="file">File-style (xxxxx.pdf)</option>
                            <option value="custom">Custom slug</option>
                            </select>
                            </div>
                            <div>
                            <label htmlFor="slug-or-title" className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                            {slugPreset === "custom" ? "Custom slug *" : "Title / tag (optional)"}
                            </label>
                            {slugPreset === "custom" ? (
                                <input
                                id="slug-or-title"
                                type="text"
                                required
                                placeholder="launch-2026"
                                value={customSlug}
                                onChange={(e) => setCustomSlug(e.target.value)}
                                className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-white placeholder:text-slate-500 text-sm focus:outline-none focus:border-brand-500"
                                />
                            ) : (
                                <input
                                id="slug-or-title"
                                type="text"
                                placeholder="Q1 campaign"
                                value={linkTitle}
                                onChange={(e) => setLinkTitle(e.target.value)}
                                className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-white placeholder:text-slate-500 text-sm focus:outline-none focus:border-brand-500"
                                />
                            )}
                            </div>
                            </div>

                            <div>
                            <label htmlFor="short-origin" className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                            Short link domain
                            </label>
                            {origins.length > 1 ? (
                                <select
                                id="short-origin"
                                value={previewOrigin}
                                onChange={(e) => setSelectedOrigin(e.target.value)}
                                className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-slate-200 text-sm focus:outline-none focus:border-brand-500 font-mono"
                                >
                                {origins.map((origin) => (
                                    <option key={origin} value={origin}>
                                    {origin.replace(/^https?:\/\//, "")}
                                    </option>
                                ))}
                                </select>
                            ) : (
                                <div className="rounded-lg border border-slate-800 bg-slate-900/70 px-3 py-2 text-xs text-slate-400">
                                Public host: <span className="font-mono text-teal-300">{previewOrigin}</span>
                                </div>
                            )}
                            <p className="mt-1.5 text-xs text-slate-500 font-mono">
                            {previewOrigin}/s/{slugPreset === "custom" && customSlug ? customSlug : "…"}
                            </p>
                            </div>

                            {createError && (
                                <div className="p-3 rounded-lg bg-red-950/50 border border-red-800 text-red-300 text-xs flex items-center space-x-2">
                                <AlertTriangle className="w-4 h-4 shrink-0" />
                                <span>{createError}</span>
                                </div>
                            )}

                            <button
                            type="submit"
                            disabled={!canSubmit}
                            className="w-full h-11 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-semibold text-sm flex items-center justify-center space-x-2 disabled:opacity-40"
                            >
                            {creating ? (
                                <>
                                <RefreshCw className="w-4 h-4 animate-spin" />
                                <span>Creating…</span>
                                </>
                            ) : (
                                <span>Create short link & QR code</span>
                            )}
                            </button>
                            </form>

                            {createdLink && (
                                <div className="border border-emerald-800/40 bg-emerald-950/10 rounded-xl p-6 space-y-6">
                                <div className="flex items-center justify-between border-b border-emerald-900/40 pb-3">
                                <div className="flex items-center space-x-2">
                                <CheckCircle2 className="w-5 h-5 text-emerald-400" />
                                <span className="font-semibold text-emerald-300 text-sm">Short link ready</span>
                                </div>
                                <span className="text-xs font-mono text-slate-400">{createdLink.id}</span>
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
                                <div className="flex flex-col items-center p-4 bg-white rounded-xl">
                                <img src={createdLink.qr_code_url} alt={`QR code for ${createdLink.short_url}`} className="w-44 h-44 object-contain" />
                                <span className="text-[10px] text-slate-500 font-mono mt-2">ISO QR of the short URL</span>
                                </div>
                                <div className="md:col-span-2 space-y-4">
                                <div>
                                <span className="text-xs text-slate-400 uppercase tracking-wider">Short URL</span>
                                <div className="flex items-center space-x-2 mt-1">
                                <input
                                type="text"
                                readOnly
                                value={createdLink.short_url}
                                className="flex-1 h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-teal-300 font-mono text-sm"
                                />
                                <button
                                onClick={() => copyToClipboard(createdLink.short_url)}
                                className="h-10 px-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-xs font-semibold flex items-center space-x-1.5"
                                >
                                {copiedLink ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
                                <span>{copiedLink ? "Copied" : "Copy"}</span>
                                </button>
                                </div>
                                </div>
                                <div>
                                <span className="text-xs text-slate-400 uppercase tracking-wider">Destination</span>
                                <p className="text-sm font-mono text-slate-300 truncate mt-0.5">{createdLink.destination_url}</p>
                                </div>
                                <div className="flex flex-wrap gap-2">
                                <button
                                onClick={() => downloadQRPNG(createdLink.qr_code_url, `${createdLink.slug}-qr.png`)}
                                className="px-3 py-1.5 rounded-md bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium flex items-center space-x-1.5 border border-slate-700"
                                >
                                <Download className="w-3.5 h-3.5" />
                                <span>PNG 2048px</span>
                                </button>
                                <button
                                onClick={() => downloadQRSVG(createdLink.qr_code_url, `${createdLink.slug}-qr.svg`)}
                                className="px-3 py-1.5 rounded-md bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium flex items-center space-x-1.5 border border-slate-700"
                                >
                                <Download className="w-3.5 h-3.5" />
                                <span>SVG</span>
                                </button>
                                <a
                                href={`${createdLink.short_url}?qr=1`}
                                target="_blank"
                                rel="noreferrer"
                                className="px-3 py-1.5 rounded-md bg-brand-900/60 text-brand-100 text-xs font-medium flex items-center space-x-1.5 border border-brand-800"
                                >
                                <ExternalLink className="w-3.5 h-3.5" />
                                <span>Test redirect</span>
                                </a>
                                </div>
                                </div>
                                </div>
                                </div>
                            )}
                            </div>
                            </div>
                        )}

                        {activeTab === "links" && (
                            <div className="space-y-6">
                            <div className="flex items-center justify-between gap-3">
                            <div>
                            <h1 className="text-2xl font-semibold tracking-tight text-white">Your links</h1>
                            <p className="text-slate-400 text-sm">Clicks, unique visitors, countries, devices, and bot vs human traffic.</p>
                            </div>
                            <button
                            onClick={() => setActiveTab("create")}
                            className="px-3 py-1.5 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-xs font-semibold flex items-center space-x-1.5"
                            >
                            <Plus className="w-4 h-4" />
                            <span>Create link</span>
                            </button>
                            </div>

                            {!currentUser && (
                                <div className="rounded-xl border border-slate-800 bg-surface p-6 text-sm text-slate-300">
                                Sign in to see isolated analytics for your account.
                                </div>
                            )}

                            {currentUser && dashboardStats && (
                                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                                {[
                                    ["Total links", dashboardStats.total_links, "text-white"],
                                    ["Total clicks", dashboardStats.total_clicks, "text-teal-300"],
                                    ["Unique visitors", dashboardStats.unique_visitors, "text-sky-300"],
                                    ["Human clicks", dashboardStats.human_clicks, "text-emerald-400"],
                                    ["Bot hits", dashboardStats.bot_clicks, "text-amber-400"]
                                ].map(([label, value, color]) => (
                                    <div key={label} className="bg-surface border border-slate-800 rounded-lg p-4">
                                    <span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">{label}</span>
                                    <div className={`text-2xl font-semibold mt-1 tabular-nums ${color}`}>{value}</div>
                                    </div>
                                ))}
                                </div>
                            )}

                            {currentUser && (
                                <div className="bg-surface border border-slate-800 rounded-xl overflow-hidden">
                                <div className="overflow-x-auto">
                                <table className="w-full text-left text-sm">
                                <thead className="bg-slate-900/80 text-slate-400 text-xs uppercase tracking-wider border-b border-slate-800">
                                <tr>
                                <th className="px-4 py-3">Slug & title</th>
                                <th className="px-4 py-3">Destination</th>
                                <th className="px-4 py-3 text-right">Clicks</th>
                                <th className="px-4 py-3 text-right">Unique</th>
                                <th className="px-4 py-3">Status</th>
                                <th className="px-4 py-3 text-right">Actions</th>
                                </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-800">
                                {userLinks.map((l) => (
                                    <tr key={l.id} className="hover:bg-slate-800/40">
                                    <td className="px-4 py-3">
                                    <div className="flex items-center space-x-2">
                                    <span className="font-mono text-teal-300 font-semibold text-sm">/{l.slug}</span>
                                    <span className="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">{l.slug_type}</span>
                                    </div>
                                    {l.title && <div className="text-xs text-slate-400 truncate max-w-xs mt-0.5">{l.title}</div>}
                                    {l.short_origin && (
                                        <div className="text-[10px] font-mono text-slate-500 mt-0.5">
                                        {String(l.short_origin).replace(/^https?:\/\//, "")}
                                        </div>
                                    )}
                                    </td>
                                    <td className="px-4 py-3">
                                    <div className="font-mono text-xs text-slate-300 truncate max-w-xs">{l.destination_url}</div>
                                    </td>
                                    <td className="px-4 py-3 text-right font-mono font-semibold text-teal-300">{l.click_count || 0}</td>
                                    <td className="px-4 py-3 text-right font-mono text-slate-300">{l.unique_clicks || 0}</td>
                                    <td className="px-4 py-3">
                                    {l.is_abusive === 1 ? (
                                        <span className="px-2 py-0.5 rounded text-xs font-semibold bg-red-950/80 text-red-400 border border-red-800">Abusive</span>
                                    ) : l.status === "disabled" ? (
                                        <span className="px-2 py-0.5 rounded text-xs bg-slate-800 text-slate-400">Disabled</span>
                                    ) : (
                                        <span className="px-2 py-0.5 rounded text-xs bg-emerald-950/80 text-emerald-400 border border-emerald-800/60">Active</span>
                                    )}
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                    <div className="flex items-center justify-end space-x-1.5">
                                    <button onClick={() => openLinkAnalytics(l)} className="px-2.5 py-1 rounded bg-brand-900/60 text-brand-100 text-xs font-semibold border border-brand-800">
                                    Analytics
                                    </button>
                                    <button onClick={() => setQrModalLink(l)} className="p-1.5 rounded bg-slate-800 text-slate-300" title="QR code">
                                    <QrCode className="w-4 h-4" />
                                    </button>
                                    <button onClick={() => copyToClipboard(l.short_url)} className="p-1.5 rounded bg-slate-800 text-slate-300" title="Copy">
                                    <Copy className="w-4 h-4" />
                                    </button>
                                    <button onClick={() => toggleLinkStatus(l.id, l.status)} className="p-1.5 rounded bg-slate-800 text-slate-300" title="Toggle status">
                                    <Lock className="w-4 h-4" />
                                    </button>
                                    <button onClick={() => handleDeleteLink(l.id)} className="p-1.5 rounded bg-slate-800 text-slate-400 hover:text-red-400" title="Delete">
                                    <Trash2 className="w-4 h-4" />
                                    </button>
                                    </div>
                                    </td>
                                    </tr>
                                ))}
                                {userLinks.length === 0 && !linksLoading && (
                                    <tr>
                                    <td colSpan={6} className="py-12 text-center text-slate-400">
                                    No short links yet. Create one from the Create tab.
                                    </td>
                                    </tr>
                                )}
                                </tbody>
                                </table>
                                </div>
                                </div>
                            )}
                            </div>
                        )}

                        {activeTab === "admin" && currentUser?.role === "admin" && (
                            <div className="space-y-8">
                            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
                            <div>
                            <h1 className="text-2xl font-semibold tracking-tight text-white">Control Room</h1>
                            <p className="text-slate-400 text-sm mt-0.5">Platform-wide links, abuse flags, and account suspension.</p>
                            </div>
                            <button onClick={fetchAdminData} className="p-2 rounded bg-slate-800 text-slate-300" title="Refresh">
                            <RefreshCw className={`w-4 h-4 ${adminLoading ? "animate-spin" : ""}`} />
                            </button>
                            </div>

                            <div className="flex items-center space-x-2">
                            <Search className="w-4 h-4 text-slate-500" />
                            <input
                            type="search"
                            placeholder="Filter by slug, destination, or owner"
                            value={adminSearch}
                            onChange={(e) => setAdminSearch(e.target.value)}
                            className="flex-1 h-9 px-3 rounded-lg bg-slate-900 border border-slate-700 text-sm"
                            />
                            </div>

                            <div className="bg-surface border border-slate-800 rounded-xl overflow-hidden">
                            <div className="overflow-x-auto">
                            <table className="w-full text-left text-sm">
                            <thead className="bg-slate-900 text-slate-400 text-xs uppercase tracking-wider border-b border-slate-800">
                            <tr>
                            <th className="px-4 py-3">Slug / owner</th>
                            <th className="px-4 py-3">Destination</th>
                            <th className="px-4 py-3 text-right">Clicks</th>
                            <th className="px-4 py-3 text-right">Bot score</th>
                            <th className="px-4 py-3">Risk</th>
                            <th className="px-4 py-3 text-right">Actions</th>
                            </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-800">
                            {adminLinks
                                .filter((l) => {
                                    const q = adminSearch.toLowerCase();
                                    if (!q) return true;
                                    return (
                                        String(l.slug).toLowerCase().includes(q) ||
                                        String(l.destination_url).toLowerCase().includes(q) ||
                                        String(l.owner_email || "").toLowerCase().includes(q)
                                    );
                                })
                                .map((l) => (
                                    <tr key={l.id} className="hover:bg-slate-800/40">
                                    <td className="px-4 py-3">
                                    <div className="font-mono text-teal-300 font-semibold text-sm">/{l.slug}</div>
                                    <div className="text-xs text-slate-400 mt-0.5">
                                    Owner: <span className="text-slate-200">{l.owner_email || "Guest"}</span>
                                    </div>
                                    </td>
                                    <td className="px-4 py-3">
                                    <div className="font-mono text-xs text-slate-300 truncate max-w-xs">{l.destination_url}</div>
                                    </td>
                                    <td className="px-4 py-3 text-right font-mono">
                                    <div className="font-semibold text-white">{l.click_count || 0}</div>
                                    <div className="text-[10px] text-amber-400">{l.bot_click_count || 0} bots</div>
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                    <span
                                    className={`px-2 py-0.5 rounded text-xs font-mono font-bold ${
                                        l.avg_bot_score > 60
                                        ? "bg-red-950 text-red-400 border border-red-800"
                                        : l.avg_bot_score > 30
                                        ? "bg-amber-950 text-amber-400 border border-amber-800"
                                        : "bg-emerald-950 text-emerald-400 border border-emerald-800"
                                    }`}
                                    >
                                    {l.avg_bot_score}%
                                    </span>
                                    </td>
                                    <td className="px-4 py-3">
                                    {l.is_abusive === 1 ? (
                                        <span className="px-2 py-0.5 rounded text-xs font-bold bg-red-950 text-red-400 border border-red-800">FLAGGED</span>
                                    ) : l.is_suspicious ? (
                                        <span className="px-2 py-0.5 rounded text-xs bg-amber-950 text-amber-400 border border-amber-800">High bot signals</span>
                                    ) : (
                                        <span className="px-2 py-0.5 rounded text-xs bg-slate-800 text-slate-300">Clean</span>
                                    )}
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                    <div className="flex items-center justify-end space-x-2">
                                    {l.is_abusive === 1 ? (
                                        <button onClick={() => handleUnflagAbusive(l.id)} className="px-2 py-1 rounded bg-slate-800 text-slate-300 text-xs">
                                        Unflag
                                        </button>
                                    ) : (
                                        <button
                                        onClick={() => setFlagModalLink(l)}
                                        className="px-2.5 py-1 rounded bg-red-950 text-red-300 border border-red-800 text-xs font-semibold"
                                        >
                                        Flag abuse
                                        </button>
                                    )}
                                    <button onClick={() => openLinkAnalytics(l)} className="p-1.5 rounded bg-slate-800 text-slate-300" title="Analytics">
                                    <BarChart3 className="w-4 h-4" />
                                    </button>
                                    <button onClick={() => handleDeleteLink(l.id)} className="p-1.5 rounded bg-slate-800 text-slate-400 hover:text-red-400" title="Delete">
                                    <Trash2 className="w-4 h-4" />
                                    </button>
                                    </div>
                                    </td>
                                    </tr>
                                ))}
                                </tbody>
                                </table>
                                </div>
                                </div>

                                <div className="space-y-4 pt-4 border-t border-slate-800">
                                <h2 className="text-lg font-semibold text-slate-200 flex items-center space-x-2">
                                <User className="w-5 h-5 text-amber-400" />
                                <span>Accounts ({adminUsers.length})</span>
                                </h2>
                                <div className="bg-surface border border-slate-800 rounded-xl overflow-hidden">
                                <table className="w-full text-left text-sm">
                                <thead className="bg-slate-900 text-slate-400 text-xs uppercase tracking-wider border-b border-slate-800">
                                <tr>
                                <th className="px-4 py-3">Email</th>
                                <th className="px-4 py-3">Role</th>
                                <th className="px-4 py-3 text-right">Links</th>
                                <th className="px-4 py-3">Status</th>
                                <th className="px-4 py-3 text-right">Actions</th>
                                </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-800">
                                {adminUsers.map((u) => (
                                    <tr key={u.id} className="hover:bg-slate-800/40">
                                    <td className="px-4 py-3 font-medium text-white">{u.email}</td>
                                    <td className="px-4 py-3">
                                    <span className={`px-2 py-0.5 rounded text-xs font-semibold ${u.role === "admin" ? "bg-amber-950 text-amber-300 border border-amber-800" : "bg-slate-800 text-slate-300"}`}>
                                    {u.role.toUpperCase()}
                                    </span>
                                    </td>
                                    <td className="px-4 py-3 text-right font-mono text-slate-300">{u.link_count || 0}</td>
                                    <td className="px-4 py-3">
                                    {u.status === "banned" ? (
                                        <span className="px-2 py-0.5 rounded text-xs font-bold bg-red-950 text-red-400 border border-red-800">SUSPENDED</span>
                                    ) : (
                                        <span className="px-2 py-0.5 rounded text-xs bg-emerald-950 text-emerald-400 border border-emerald-800">Active</span>
                                    )}
                                    </td>
                                    <td className="px-4 py-3 text-right space-x-2">
                                    {u.role !== "admin" && (
                                        <>
                                        <button
                                        onClick={() => handleToggleUserBan(u.id, u.status === "banned")}
                                        className={`px-2.5 py-1 rounded text-xs font-semibold ${
                                            u.status === "banned"
                                            ? "bg-emerald-950 text-emerald-300 border border-emerald-800"
                                            : "bg-red-950 text-red-300 border border-red-800"
                                        }`}
                                        >
                                        {u.status === "banned" ? "Restore" : "Suspend"}
                                        </button>
                                        <button onClick={() => handlePurgeUser(u.id)} className="px-2.5 py-1 rounded text-xs font-semibold bg-slate-800 text-slate-300">
                                        Purge
                                        </button>
                                        </>
                                    )}
                                    </td>
                                    </tr>
                                ))}
                                </tbody>
                                </table>
                                </div>
                                </div>
                                </div>
                        )}

                        {activeTab === "docs" && (
                            <div className="max-w-4xl mx-auto space-y-8">
                            <div>
                            <h1 className="text-3xl font-semibold tracking-tight text-white">Architecture</h1>
                            <p className="text-slate-400 text-sm mt-1">Workers, one Durable Object with SQLite, and a 302 edge redirect. No external app servers.</p>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="bg-surface border border-slate-800 rounded-xl p-5 space-y-2">
                            <div className="flex items-center space-x-2 text-teal-300 font-semibold">
                            <LinkIcon className="w-5 h-5" />
                            <span>Durable Object (`App`)</span>
                            </div>
                            <p className="text-xs text-slate-300 leading-relaxed">
                            Single SQLite-backed object owns users, sessions, links, and click events. Redirects stay on the Worker.
                            </p>
                            </div>
                            <div className="bg-surface border border-slate-800 rounded-xl p-5 space-y-2">
                            <div className="flex items-center space-x-2 text-sky-300 font-semibold">
                            <BarChart3 className="w-5 h-5" />
                            <span>Click analytics</span>
                            </div>
                            <p className="text-xs text-slate-300 leading-relaxed">
                            Each 302 records IP, country, user-agent, device, referrer, and a bot score. Accounts only see their own data.
                            </p>
                            </div>
                            <div className="bg-surface border border-slate-800 rounded-xl p-5 space-y-2">
                            <div className="flex items-center space-x-2 text-amber-300 font-semibold">
                            <Bot className="w-5 h-5" />
                            <span>Bot scoring</span>
                            </div>
                            <p className="text-xs text-slate-300 leading-relaxed">
                            Signatures for Googlebot, Bingbot, cURL, Python, headless browsers, and uptime monitors, plus header checks.
                            </p>
                            </div>
                            <div className="bg-surface border border-slate-800 rounded-xl p-5 space-y-2">
                            <div className="flex items-center space-x-2 text-emerald-300 font-semibold">
                            <QrCode className="w-5 h-5" />
                            <span>Vector QR</span>
                            </div>
                            <p className="text-xs text-slate-300 leading-relaxed">
                            `/api/qr?text=` returns a scannable ISO/IEC 18004 SVG (ECC H, 4-module quiet zone). Export a 2048px PNG for print.
                            </p>
                            </div>
                            </div>
                            <div className="bg-surface border border-slate-800 rounded-xl p-6 space-y-4">
                            <h3 className="text-base font-semibold text-white">REST surface</h3>
                            <div className="space-y-3 font-mono text-xs">
                            <div className="p-3 bg-slate-900 rounded-lg border border-slate-800">
                            <span className="text-emerald-400 font-bold">POST</span> /api/links
                            <p className="text-slate-400 font-sans mt-1">Create a short link. destination_url, slug_preset, custom_slug, title.</p>
                            </div>
                            <div className="p-3 bg-slate-900 rounded-lg border border-slate-800">
                            <span className="text-sky-400 font-bold">GET</span> /api/analytics/link/:id
                            <p className="text-slate-400 font-sans mt-1">Owner or admin only. Supports limit and offset.</p>
                            </div>
                            <div className="p-3 bg-slate-900 rounded-lg border border-slate-800">
                            <span className="text-amber-400 font-bold">GET</span> /api/admin/links
                            <p className="text-slate-400 font-sans mt-1">Control Room list of every short link and abuse score.</p>
                            </div>
                            </div>
                            </div>
                            </div>
                        )}
                        </main>

                        <footer className="border-t border-slate-800 px-4 md:px-8 py-4 text-xs text-slate-500 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                        <span>A RegisterMySite.com product</span>
                        <span className="font-mono text-slate-600">{previewOrigin}</span>
                        </footer>

                        {selectedAnalyticsLink && (
                            <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex justify-end">
                            <div className="w-full max-w-4xl bg-surface border-l border-slate-800 h-full overflow-y-auto p-6 space-y-6">
                            <div className="flex items-start justify-between border-b border-slate-800 pb-4">
                            <div>
                            <div className="flex items-center space-x-2">
                            <span className="font-mono text-xl font-bold text-teal-300">/{selectedAnalyticsLink.slug}</span>
                            <span className="text-xs px-2 py-0.5 rounded bg-slate-800 text-slate-300">{selectedAnalyticsLink.slug_type}</span>
                            </div>
                            <p className="text-xs font-mono text-slate-400 truncate max-w-md mt-1">Target: {selectedAnalyticsLink.destination_url}</p>
                            </div>
                            <button onClick={() => setSelectedAnalyticsLink(null)} className="p-1.5 rounded-lg bg-slate-800 text-slate-400 hover:text-white" aria-label="Close analytics">
                            <X className="w-5 h-5" />
                            </button>
                            </div>

                            {analyticsLoading ? (
                                <div className="py-20 text-center space-y-3">
                                <RefreshCw className="w-6 h-6 animate-spin text-brand-500 mx-auto" />
                                <p className="text-slate-400 text-sm">Loading click analytics…</p>
                                </div>
                            ) : analyticsData ? (
                                <div className="space-y-6">
                                <div className="grid grid-cols-2 sm:grid-cols-5 gap-3">
                                {[
                                    ["Total clicks", analyticsData.stats.total_clicks, "text-white"],
                                    ["Human", analyticsData.stats.human_clicks, "text-emerald-400"],
                                    ["Bots", analyticsData.stats.bot_clicks, "text-amber-400"],
                                    ["Unique", analyticsData.stats.unique_visitors, "text-sky-300"],
                                    ["QR scans", analyticsData.stats.qr_clicks, "text-teal-300"]
                                ].map(([label, value, color]) => (
                                    <div key={label} className="p-3 bg-slate-900 rounded-lg border border-slate-800">
                                    <span className="text-[10px] text-slate-400 uppercase font-semibold">{label}</span>
                                    <div className={`text-xl font-semibold mt-1 font-mono ${color}`}>{value}</div>
                                    </div>
                                ))}
                                </div>

                                <div className="p-4 bg-slate-900/80 rounded-xl border border-slate-800 flex items-center justify-between">
                                <div className="flex items-center space-x-3">
                                <Bot className="w-5 h-5 text-amber-400" />
                                <div>
                                <div className="text-sm font-semibold text-white">Bot filter</div>
                                <div className="text-xs text-slate-400">Hide crawler and script traffic from the event list.</div>
                                </div>
                                </div>
                                <button
                                onClick={() => setHideBots(!hideBots)}
                                className={`px-3 py-1.5 rounded-lg text-xs font-semibold border ${
                                    hideBots ? "bg-emerald-950 text-emerald-300 border-emerald-800" : "bg-slate-800 text-slate-300 border-slate-700"
                                }`}
                                >
                                {hideBots ? "Showing humans only" : "Show all traffic"}
                                </button>
                                </div>

                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-3">
                                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center space-x-2">
                                <Globe className="w-4 h-4 text-teal-300" />
                                <span>Countries</span>
                                </h4>
                                <div className="space-y-2 max-h-44 overflow-y-auto">
                                {Object.entries(analyticsData.stats.countries).map(([code, info]) => (
                                    <div key={code} className="flex items-center justify-between text-xs py-1 border-b border-slate-800/50">
                                    <span className="flex items-center space-x-2">
                                    <span className="text-base">{info.flag || getFlagEmoji(code)}</span>
                                    <span className="font-mono text-slate-200">{code}</span>
                                    </span>
                                    <span className="font-mono text-teal-300 font-semibold">{info.count}</span>
                                    </div>
                                ))}
                                </div>
                                </div>
                                <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-3">
                                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center space-x-2">
                                <Monitor className="w-4 h-4 text-sky-300" />
                                <span>Devices</span>
                                </h4>
                                <div className="space-y-2">
                                {Object.entries(analyticsData.stats.devices).map(([dev, count]) => (
                                    <div key={dev} className="flex items-center justify-between text-xs py-1 border-b border-slate-800/50">
                                    <span className="text-slate-300">{dev}</span>
                                    <span className="font-mono text-sky-300 font-semibold">{count}</span>
                                    </div>
                                ))}
                                </div>
                                </div>
                                </div>

                                <div className="space-y-3">
                                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-300">Click events</h4>
                                <div className="bg-slate-900 rounded-xl border border-slate-800 overflow-hidden">
                                <table className="w-full text-left text-xs">
                                <thead className="bg-slate-950 text-slate-400 uppercase tracking-wider border-b border-slate-800">
                                <tr>
                                <th className="px-3 py-2.5">Time (UTC)</th>
                                <th className="px-3 py-2.5">IP</th>
                                <th className="px-3 py-2.5">Country</th>
                                <th className="px-3 py-2.5">Device</th>
                                <th className="px-3 py-2.5">Bot score</th>
                                </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-800">
                                {analyticsData.events
                                    .filter((e) => !hideBots || e.is_bot === 0)
                                    .map((evt) => (
                                        <tr key={evt.id} className="hover:bg-slate-800/50">
                                        <td className="px-3 py-2 font-mono text-slate-400">{new Date(evt.timestamp).toLocaleTimeString()}</td>
                                        <td className="px-3 py-2 font-mono text-slate-200">{evt.ip_address}</td>
                                        <td className="px-3 py-2 font-mono">
                                        <span className="mr-1.5">{evt.country_flag}</span>
                                        <span className="text-slate-300">{evt.country_code}</span>
                                        </td>
                                        <td className="px-3 py-2">
                                        <div className="text-slate-200">
                                        {evt.browser} on {evt.os}
                                        </div>
                                        <div className="text-[10px] text-slate-400 font-mono truncate max-w-xs">Ref: {evt.referrer}</div>
                                        </td>
                                        <td className="px-3 py-2">
                                        {evt.is_bot === 1 ? (
                                            <span className="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-amber-950 text-amber-300 border border-amber-800">
                                            Bot ({evt.bot_score}%)
                                            </span>
                                        ) : (
                                            <span className="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-emerald-950 text-emerald-300 border border-emerald-800">
                                            Human ({evt.bot_score}%)
                                            </span>
                                        )}
                                        </td>
                                        </tr>
                                    ))}
                                    </tbody>
                                    </table>
                                    </div>
                                    {analyticsData.pagination?.has_more && (
                                        <p className="text-[11px] text-slate-500">Showing the first {analyticsData.pagination.limit} events. Older rows remain stored.</p>
                                    )}
                                    </div>
                                    </div>
                            ) : null}
                            </div>
                            </div>
                        )}

                        {qrModalLink && (
                            <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
                            <div className="bg-surface border border-slate-800 rounded-xl p-6 max-w-md w-full space-y-4">
                            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                            <h3 className="font-semibold text-white text-base">QR code</h3>
                            <button onClick={() => setQrModalLink(null)} className="p-1 rounded bg-slate-800 text-slate-400" aria-label="Close">
                            <X className="w-4 h-4" />
                            </button>
                            </div>
                            <div className="flex flex-col items-center p-6 bg-white rounded-xl">
                            <img src={qrModalLink.qr_code_url} alt="QR code" className="w-56 h-56 object-contain" />
                            <span className="text-xs text-slate-600 font-mono mt-3 truncate max-w-xs">{qrModalLink.short_url}</span>
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                            <button
                            onClick={() => downloadQRPNG(qrModalLink.qr_code_url, `${qrModalLink.slug}-qr.png`)}
                            className="py-2 rounded-lg bg-brand-600 text-white text-xs font-semibold flex items-center justify-center space-x-1.5"
                            >
                            <Download className="w-3.5 h-3.5" />
                            <span>PNG 2048px</span>
                            </button>
                            <button
                            onClick={() => downloadQRSVG(qrModalLink.qr_code_url, `${qrModalLink.slug}-qr.svg`)}
                            className="py-2 rounded-lg bg-slate-800 text-slate-200 text-xs font-semibold flex items-center justify-center space-x-1.5 border border-slate-700"
                            >
                            <Download className="w-3.5 h-3.5" />
                            <span>SVG</span>
                            </button>
                            </div>
                            </div>
                            </div>
                        )}

                        {flagModalLink && (
                            <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
                            <div className="bg-surface border border-red-800/80 rounded-xl p-6 max-w-md w-full space-y-4">
                            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                            <h3 className="font-semibold text-red-400 text-base flex items-center space-x-2">
                            <ShieldAlert className="w-5 h-5" />
                            <span>Flag as abusive</span>
                            </h3>
                            <button onClick={() => setFlagModalLink(null)} className="p-1 rounded bg-slate-800 text-slate-400" aria-label="Close">
                            <X className="w-4 h-4" />
                            </button>
                            </div>
                            <p className="text-xs text-slate-300 leading-relaxed">
                            Flagging <code className="text-amber-300">/{flagModalLink.slug}</code> disables the redirect and shows a branded security block page.
                            </p>
                            <div>
                            <label className="block text-xs font-semibold uppercase text-slate-400 mb-1">Reason shown to visitors</label>
                            <textarea
                            rows={3}
                            placeholder="Suspected phishing destination or automated abuse."
                            value={flagReason}
                            onChange={(e) => setFlagReason(e.target.value)}
                            className="w-full p-2.5 rounded-lg bg-slate-900 border border-slate-800 text-xs text-white focus:outline-none focus:border-red-500"
                            />
                            </div>
                            <div className="flex items-center justify-end space-x-2">
                            <button onClick={() => setFlagModalLink(null)} className="px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300 text-xs">
                            Cancel
                            </button>
                            <button onClick={handleFlagAbusive} className="px-4 py-1.5 rounded-lg bg-red-600 text-white text-xs font-semibold">
                            Confirm flag
                            </button>
                            </div>
                            </div>
                            </div>
                        )}

                        {showAuthModal && (
                            <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
                            <div className="bg-surface border border-slate-800 rounded-xl p-6 max-w-sm w-full space-y-4">
                            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                            <h3 className="font-semibold text-white">{authMode === "register" ? "Create account" : "Sign in"}</h3>
                            <button onClick={() => setShowAuthModal(false)} className="p-1 rounded bg-slate-800 text-slate-400" aria-label="Close">
                            <X className="w-4 h-4" />
                            </button>
                            </div>
                            <form onSubmit={handleAuthSubmit} className="space-y-3">
                            <div>
                            <label className="block text-xs text-slate-400 mb-1" htmlFor="auth-email">Email</label>
                            <input
                            id="auth-email"
                            type="email"
                            required
                            value={authEmail}
                            onChange={(e) => setAuthEmail(e.target.value)}
                            className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-sm"
                            />
                            </div>
                            <div>
                            <label className="block text-xs text-slate-400 mb-1" htmlFor="auth-password">Password</label>
                            <input
                            id="auth-password"
                            type="password"
                            required
                            minLength={authMode === "register" ? 8 : 1}
                            value={authPassword}
                            onChange={(e) => setAuthPassword(e.target.value)}
                            className="w-full h-10 px-3 rounded-lg bg-slate-900 border border-slate-700 text-sm"
                            />
                            </div>
                            {authError && <p className="text-xs text-red-400">{authError}</p>}
                            <button type="submit" disabled={authBusy} className="w-full h-10 rounded-lg bg-brand-600 text-white text-sm font-semibold disabled:opacity-50">
                            {authBusy ? "Please wait…" : authMode === "register" ? "Create account" : "Sign in"}
                            </button>
                            </form>
                            <button
                            className="text-xs text-slate-400 hover:text-white"
                            onClick={() => {
                                setAuthMode(authMode === "register" ? "login" : "register");
                                setAuthError("");
                            }}
                            >
                            {authMode === "register" ? "Already have an account? Sign in" : "Need an account? Register"}
                            </button>
                            {config.demo_enabled && (
                                <div className="pt-2 border-t border-slate-800 flex gap-2">
                                <button onClick={() => demoLogin("admin")} className="flex-1 px-2 py-1.5 text-xs rounded bg-amber-900/50 text-amber-200 border border-amber-800">
                                Demo admin
                                </button>
                                <button onClick={() => demoLogin("user")} className="flex-1 px-2 py-1.5 text-xs rounded bg-slate-800 text-slate-200 border border-slate-700">
                                Demo member
                                </button>
                                </div>
                            )}
                            </div>
                            </div>
                        )}
                        </div>
            );
}

const rootElement = document.getElementById("root");
if (rootElement) {
    createRoot(rootElement).render(<App />);
}