import { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import {
  Network,
  Plus,
  Loader2,
  Search,
  MoreHorizontal,
  ChevronRight,
  Users,
  Trash2,
  Pencil,
  Eye,
  CheckCircle,
  Ban,
  Zap,
  Download,
  RefreshCw,
  AlertCircle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useToast } from "@/hooks/use-toast";
import {
  api,
  ApiError,
  AvailableZtNetwork,
  PortalNetwork,
  NetworkEnvironment,
  NetworkRequestMode,
} from "@/lib/api";
import { useCurrentOrganizationId } from "@/hooks/useCurrentOrganization";

const ENVIRONMENTS: { value: NetworkEnvironment; label: string }[] = [
  { value: "production", label: "Production" },
  { value: "staging", label: "Staging" },
  { value: "development", label: "Development" },
  { value: "lab", label: "Lab" },
];

const REQUEST_MODES: { value: NetworkRequestMode; label: string }[] = [
  { value: "open", label: "Open — anyone can join" },
  { value: "approval_required", label: "Approval Required" },
  { value: "invite_only", label: "Invite Only" },
];

function formatDate(d: string | null | undefined) {
  if (!d) return "—";
  return new Date(d).toLocaleDateString(undefined, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

function EnvironmentBadge({ env }: { env: NetworkEnvironment }) {
  const colors: Record<NetworkEnvironment, string> = {
    production: "bg-red-500/10 text-red-600 border-red-200",
    staging: "bg-yellow-500/10 text-yellow-600 border-yellow-200",
    development: "bg-green-500/10 text-green-600 border-green-200",
    lab: "bg-blue-500/10 text-blue-600 border-blue-200",
  };
  return (
    <Badge className={cn("text-xs", colors[env])}>
      {env.charAt(0).toUpperCase() + env.slice(1)}
    </Badge>
  );
}

function RequestModeBadge({ mode }: { mode: NetworkRequestMode }) {
  if (mode === "open") return <Badge variant="outline" className="text-xs text-green-600 border-green-300">Open</Badge>;
  if (mode === "approval_required") return <Badge variant="outline" className="text-xs text-yellow-600 border-yellow-300">Approval Required</Badge>;
  return <Badge variant="outline" className="text-xs text-purple-600 border-purple-300">Invite Only</Badge>;
}

function cn(...classes: (string | boolean | undefined | null)[]) {
  return classes.filter(Boolean).join(" ");
}

export default function NetworksPage() {
  const { orgId } = useCurrentOrganizationId();
  const { toast } = useToast();
  const navigate = useNavigate();

  const [networks, setNetworks] = useState<PortalNetwork[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");

  const [showCreate, setShowCreate] = useState(false);
  const [createName, setCreateName] = useState("");
  const [createZtId, setCreateZtId] = useState("");
  const [createDesc, setCreateDesc] = useState("");
  const [createEnv, setCreateEnv] = useState<NetworkEnvironment>("development");
  const [createMode, setCreateMode] = useState<NetworkRequestMode>("approval_required");
  const [createDefaultLifetime, setCreateDefaultLifetime] = useState("480");
  const [createMaxLifetime, setCreateMaxLifetime] = useState("");
  const [isCreating, setIsCreating] = useState(false);
  const [createError, setCreateError] = useState<string | null>(null);

  const [editingNetwork, setEditingNetwork] = useState<PortalNetwork | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [editName, setEditName] = useState("");
  const [editDesc, setEditDesc] = useState("");
  const [editEnv, setEditEnv] = useState<NetworkEnvironment>("development");
  const [editMode, setEditMode] = useState<NetworkRequestMode>("approval_required");
  const [editDefaultLifetime, setEditDefaultLifetime] = useState("480");
  const [editMaxLifetime, setEditMaxLifetime] = useState("");
  const [editError, setEditError] = useState<string | null>(null);

  const [deleteNetwork, setDeleteNetwork] = useState<PortalNetwork | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  // ZeroTier network picker
  const [showZtPicker, setShowZtPicker] = useState(false);
  const [ztNetworks, setZtNetworks] = useState<AvailableZtNetwork[]>([]);
  const [isLoadingZtNetworks, setIsLoadingZtNetworks] = useState(false);
  const [ztNetworksError, setZtNetworksError] = useState<string | null>(null);
  const [ztPickerSearch, setZtPickerSearch] = useState("");

  const fetchNetworks = useCallback(async () => {
    if (!orgId) { setIsLoading(false); return; }
    setIsLoading(true);
    setError(null);
    try {
      const res = await api.zerotier.listNetworks(orgId);
      setNetworks(res.networks || []);
    } catch (err) {
      setError("Failed to load networks. Please try again.");
    } finally {
      setIsLoading(false);
    }
  }, [orgId]);

  useEffect(() => {
    setNetworks([]);
    fetchNetworks();
  }, [fetchNetworks]);

  const openZtPicker = async () => {
    if (!orgId) return;
    setShowZtPicker(true);
    setZtPickerSearch("");
    setZtNetworksError(null);
    setIsLoadingZtNetworks(true);
    try {
      const res = await api.zerotier.listAvailableZtNetworks(orgId);
      setZtNetworks(res.networks || []);
      if (res.zt_error) {
        setZtNetworksError(`ZeroTier API error: ${res.zt_error}`);
      }
    } catch (err) {
      setZtNetworksError(
        err instanceof ApiError ? err.message : "Failed to load ZeroTier networks.",
      );
      setZtNetworks([]);
    } finally {
      setIsLoadingZtNetworks(false);
    }
  };

  /** Pre-fill the Create Network dialog with data from a ZT network and close the picker. */
  const importZtNetwork = (ztNet: AvailableZtNetwork) => {
    setCreateZtId(ztNet.id);
    setCreateName(ztNet.name && ztNet.name !== ztNet.id ? ztNet.name : "");
    setCreateDesc(ztNet.description ?? "");
    setShowZtPicker(false);
    setShowCreate(true);
  };

  const handleCreate = async () => {
    if (!orgId) return;
    setCreateError(null);
    if (!createName.trim()) { setCreateError("Network name is required."); return; }
    if (!createZtId.trim()) { setCreateError("ZeroTier Network ID is required."); return; }
    setIsCreating(true);
    try {
      await api.zerotier.createNetwork(orgId, {
        name: createName.trim(),
        zerotier_network_id: createZtId.trim(),
        description: createDesc.trim() || undefined,
        environment: createEnv,
        request_mode: createMode,
        default_activation_lifetime_minutes: parseInt(createDefaultLifetime) || 480,
        max_activation_lifetime_minutes: createMaxLifetime ? parseInt(createMaxLifetime) : undefined,
      });
      toast({ title: "Network created", description: `${createName} has been added.` });
      setShowCreate(false);
      setCreateName(""); setCreateZtId(""); setCreateDesc("");
      setCreateEnv("development"); setCreateMode("approval_required");
      setCreateDefaultLifetime("480"); setCreateMaxLifetime("");
      fetchNetworks();
    } catch (err) {
      setCreateError(err instanceof ApiError ? err.message : "Failed to create network.");
    } finally {
      setIsCreating(false);
    }
  };

  const openEditDialog = (network: PortalNetwork) => {
    setEditingNetwork(network);
    setEditName(network.name);
    setEditDesc(network.description || "");
    setEditEnv(network.environment);
    setEditMode(network.request_mode);
    setEditDefaultLifetime(String(network.default_activation_lifetime_minutes));
    setEditMaxLifetime(network.max_activation_lifetime_minutes ? String(network.max_activation_lifetime_minutes) : "");
    setEditError(null);
  };

  const handleEdit = async () => {
    if (!orgId || !editingNetwork) return;
    setEditError(null);
    setIsEditing(true);
    try {
      await api.zerotier.updateNetwork(orgId, editingNetwork.id, {
        name: editName.trim(),
        description: editDesc.trim() || undefined,
        environment: editEnv,
        request_mode: editMode,
        default_activation_lifetime_minutes: parseInt(editDefaultLifetime) || 480,
        max_activation_lifetime_minutes: editMaxLifetime ? parseInt(editMaxLifetime) : undefined,
      });
      toast({ title: "Network updated", description: `${editName} has been updated.` });
      setEditingNetwork(null);
      fetchNetworks();
    } catch (err) {
      setEditError(err instanceof ApiError ? err.message : "Failed to update network.");
    } finally {
      setIsEditing(false);
    }
  };

  const handleDelete = async () => {
    if (!orgId || !deleteNetwork) return;
    setIsDeleting(true);
    try {
      await api.zerotier.deleteNetwork(orgId, deleteNetwork.id);
      toast({ title: "Network deleted", description: `${deleteNetwork.name} has been removed.` });
      setDeleteNetwork(null);
      fetchNetworks();
    } catch (err) {
      toast({ variant: "destructive", title: "Failed to delete network", description: err instanceof ApiError ? err.message : "Something went wrong." });
    } finally {
      setIsDeleting(false);
    }
  };

  const filteredNetworks = networks.filter((n) => {
    const q = search.toLowerCase();
    return (
      n.name.toLowerCase().includes(q) ||
      n.zerotier_network_id.toLowerCase().includes(q) ||
      (n.description?.toLowerCase().includes(q) ?? false)
    );
  });

  return (
    <div className="page-container">
      <div className="page-header">
        <h1 className="page-title">ZeroTier Networks</h1>
        <p className="page-description">Manage ZeroTier portal networks and monitor access</p>
      </div>

      <div className="mb-4 flex items-center gap-4">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
          <Input
            placeholder="Search networks…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="pl-10"
          />
        </div>
        <Button variant="outline" onClick={openZtPicker} className="gap-2">
          <Download className="w-4 h-4" /> Import from ZeroTier
        </Button>
        <Button onClick={() => setShowCreate(true)} className="gap-2">
          <Plus className="w-4 h-4" /> Add Network
        </Button>
      </div>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2">
            <Network className="w-4 h-4" />
            Portal Networks
            {!isLoading && <Badge variant="secondary" className="ml-1">{networks.length}</Badge>}
          </CardTitle>
          <CardDescription>Click a network to manage members, devices, and access requests</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="flex items-center justify-center p-8">
              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
              <span className="ml-2 text-muted-foreground">Loading networks…</span>
            </div>
          ) : error ? (
            <div className="p-8 text-center text-destructive">{error}</div>
          ) : filteredNetworks.length === 0 ? (
            <div className="p-8 text-center text-muted-foreground">
              {search ? "No networks match your search." : "No networks configured yet. Add one to get started."}
            </div>
          ) : (
            <div className="divide-y">
              {filteredNetworks.map((network) => (
                <button
                  key={network.id}
                  className="w-full flex items-center gap-4 p-4 text-left hover:bg-accent/50 transition-colors"
                  onClick={() => navigate(`/org/zerotier/networks/${network.id}`)}
                >
                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Network className="w-5 h-5 text-primary" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <p className="font-medium text-foreground truncate">{network.name}</p>
                      <EnvironmentBadge env={network.environment} />
                      <RequestModeBadge mode={network.request_mode} />
                      {!network.is_active && (
                        <Badge variant="outline" className="text-xs text-red-600 border-red-300 bg-red-50">
                          <Ban className="w-3 h-3 mr-1" />Inactive
                        </Badge>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground font-mono">{network.zerotier_network_id}</p>
                  </div>
                  <div className="flex items-center gap-6 text-sm text-muted-foreground flex-shrink-0">
                    <div className="flex items-center gap-1" title="Approved users">
                      <Users className="w-4 h-4" />
                      <span>{network.approved_user_count ?? 0}</span>
                    </div>
                    <div className="flex items-center gap-1" title="Active devices">
                      <Zap className="w-4 h-4 text-green-500" />
                      <span>{network.active_membership_count ?? 0}</span>
                    </div>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                      <Button variant="ghost" size="icon" className="flex-shrink-0" onClick={(e) => e.stopPropagation()}>
                        <MoreHorizontal className="w-4 h-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); navigate(`/org/zerotier/networks/${network.id}`); }}>
                        <Eye className="w-4 h-4 mr-2" /> View details
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); openEditDialog(network); }}>
                        <Pencil className="w-4 h-4 mr-2" /> Edit
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem
                        className="text-destructive"
                        onClick={(e) => { e.stopPropagation(); setDeleteNetwork(network); }}
                      >
                        <Trash2 className="w-4 h-4 mr-2" /> Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                  <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                </button>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* ZeroTier Network Picker */}
      <Sheet open={showZtPicker} onOpenChange={(open) => { if (!open) setShowZtPicker(false); }}>
        <SheetContent className="w-full sm:max-w-xl overflow-y-auto flex flex-col">
          <SheetHeader className="mb-4">
            <SheetTitle className="flex items-center gap-2">
              <Download className="w-5 h-5 text-primary" />
              Import from ZeroTier
            </SheetTitle>
            <SheetDescription>
              Networks found in your ZeroTier account. Click one to import it into Secuird.
            </SheetDescription>
          </SheetHeader>

          {/* Search + refresh */}
          <div className="flex items-center gap-2 mb-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
              <Input
                placeholder="Search ZeroTier networks…"
                value={ztPickerSearch}
                onChange={(e) => setZtPickerSearch(e.target.value)}
                className="pl-10"
              />
            </div>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="icon" onClick={openZtPicker} disabled={isLoadingZtNetworks}>
                    <RefreshCw className={cn("w-4 h-4", isLoadingZtNetworks && "animate-spin")} />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Refresh list</TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>

          {isLoadingZtNetworks ? (
            <div className="flex items-center justify-center py-16">
              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground mr-2" />
              <span className="text-muted-foreground">Loading ZeroTier networks…</span>
            </div>
          ) : ztNetworksError ? (
            <div className="flex flex-col items-center gap-3 py-12 text-center px-4">
              <AlertCircle className="w-8 h-8 text-destructive" />
              <p className="text-sm text-destructive font-medium">Could not load ZeroTier networks</p>
              <p className="text-xs text-muted-foreground">{ztNetworksError}</p>
              <p className="text-xs text-muted-foreground mt-1">
                Make sure your ZeroTier credentials are configured under{" "}
                <strong>Settings → ZeroTier Configuration</strong>.
              </p>
            </div>
          ) : ztNetworks.length === 0 ? (
            <div className="flex flex-col items-center gap-2 py-12 text-center text-muted-foreground">
              <Network className="w-8 h-8" />
              <p className="text-sm font-medium">No ZeroTier networks found</p>
              <p className="text-xs">Your ZeroTier account has no networks yet.</p>
            </div>
          ) : (
            <div className="space-y-2 flex-1 overflow-y-auto">
              {ztNetworks
                .filter((n) => {
                  const q = ztPickerSearch.toLowerCase();
                  return !q || n.name.toLowerCase().includes(q) || n.id.toLowerCase().includes(q);
                })
                .map((ztNet) => (
                  <div
                    key={ztNet.id}
                    className={cn(
                      "flex items-center gap-3 p-3 border rounded-lg",
                      ztNet.already_managed
                        ? "bg-muted/40 opacity-70"
                        : "hover:bg-accent/50 cursor-pointer transition-colors",
                    )}
                    onClick={() => !ztNet.already_managed && importZtNetwork(ztNet)}
                    role={ztNet.already_managed ? undefined : "button"}
                    tabIndex={ztNet.already_managed ? undefined : 0}
                    onKeyDown={(e) => {
                      if (!ztNet.already_managed && (e.key === "Enter" || e.key === " ")) {
                        importZtNetwork(ztNet);
                      }
                    }}
                  >
                    <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                      <Network className="w-4 h-4 text-primary" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <p className="font-medium text-sm truncate">{ztNet.name}</p>
                        {ztNet.already_managed && (
                          <Badge className="text-xs bg-green-500/10 text-green-700 border-green-200">
                            <CheckCircle className="w-3 h-3 mr-1" />
                            {ztNet.portal_network_name
                              ? `Managed as "${ztNet.portal_network_name}"`
                              : "Already managed"}
                          </Badge>
                        )}
                      </div>
                      <p className="text-xs text-muted-foreground font-mono">{ztNet.id}</p>
                      {(ztNet.online_member_count > 0 || ztNet.total_member_count > 0) && (
                        <p className="text-xs text-muted-foreground mt-0.5">
                          {ztNet.online_member_count} online · {ztNet.total_member_count} total members
                        </p>
                      )}
                    </div>
                    {!ztNet.already_managed && (
                      <Button
                        size="sm"
                        variant="outline"
                        className="flex-shrink-0 gap-1"
                        onClick={(e) => { e.stopPropagation(); importZtNetwork(ztNet); }}
                      >
                        <Plus className="w-3 h-3" />
                        Import
                      </Button>
                    )}
                  </div>
                ))}
            </div>
          )}
        </SheetContent>
      </Sheet>

      {/* Create Network Dialog */}
      <Dialog open={showCreate} onOpenChange={(open) => { if (!open) setShowCreate(false); }}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Add Portal Network</DialogTitle>
            <DialogDescription>Link a ZeroTier network to your organization.</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-2">
              <Label>Network Name *</Label>
              <Input placeholder="Production VPN" value={createName} onChange={(e) => setCreateName(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>ZeroTier Network ID *</Label>
              <Input placeholder="d6578dd03c894448" value={createZtId} onChange={(e) => setCreateZtId(e.target.value)} />
              <p className="text-xs text-muted-foreground">16-character hexadecimal network ID from your ZeroTier controller.</p>
            </div>
            <div className="space-y-2">
              <Label>Description</Label>
              <Input placeholder="Production network for engineering" value={createDesc} onChange={(e) => setCreateDesc(e.target.value)} />
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Environment</Label>
                <Select value={createEnv} onValueChange={(v) => setCreateEnv(v as NetworkEnvironment)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {ENVIRONMENTS.map((e) => <SelectItem key={e.value} value={e.value}>{e.label}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Request Mode</Label>
                <Select value={createMode} onValueChange={(v) => setCreateMode(v as NetworkRequestMode)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    {REQUEST_MODES.map((m) => <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Default Activation (minutes)</Label>
                <Input type="number" placeholder="480" value={createDefaultLifetime} onChange={(e) => setCreateDefaultLifetime(e.target.value)} />
              </div>
              <div className="space-y-2">
                <Label>Max Activation (minutes)</Label>
                <Input type="number" placeholder="No limit" value={createMaxLifetime} onChange={(e) => setCreateMaxLifetime(e.target.value)} />
              </div>
            </div>
            {createError && <p className="text-sm text-destructive">{createError}</p>}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowCreate(false)} disabled={isCreating}>Cancel</Button>
            <Button onClick={handleCreate} disabled={isCreating}>
              {isCreating && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              Create Network
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Edit Network Dialog */}
      <Dialog open={!!editingNetwork} onOpenChange={(open) => { if (!open) setEditingNetwork(null); }}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Edit Network</DialogTitle>
            <DialogDescription>Update network settings.</DialogDescription>
          </DialogHeader>
          {editingNetwork && (
            <div className="space-y-4 py-2">
              <div className="space-y-2">
                <Label>Network Name *</Label>
                <Input value={editName} onChange={(e) => setEditName(e.target.value)} />
              </div>
              <div className="space-y-2">
                <Label>Description</Label>
                <Input value={editDesc} onChange={(e) => setEditDesc(e.target.value)} />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Environment</Label>
                  <Select value={editEnv} onValueChange={(v) => setEditEnv(v as NetworkEnvironment)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      {ENVIRONMENTS.map((e) => <SelectItem key={e.value} value={e.value}>{e.label}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Request Mode</Label>
                  <Select value={editMode} onValueChange={(v) => setEditMode(v as NetworkRequestMode)}>
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      {REQUEST_MODES.map((m) => <SelectItem key={m.value} value={m.value}>{m.label}</SelectItem>)}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Default Activation (minutes)</Label>
                  <Input type="number" value={editDefaultLifetime} onChange={(e) => setEditDefaultLifetime(e.target.value)} />
                </div>
                <div className="space-y-2">
                  <Label>Max Activation (minutes)</Label>
                  <Input type="number" placeholder="No limit" value={editMaxLifetime} onChange={(e) => setEditMaxLifetime(e.target.value)} />
                </div>
              </div>
              {editError && <p className="text-sm text-destructive">{editError}</p>}
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingNetwork(null)} disabled={isEditing}>Cancel</Button>
            <Button onClick={handleEdit} disabled={isEditing}>
              {isEditing && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              Save Changes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation */}
      <Dialog open={!!deleteNetwork} onOpenChange={(open) => { if (!open) setDeleteNetwork(null); }}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Network</DialogTitle>
            <DialogDescription>
              Are you sure you want to remove "{deleteNetwork?.name}"? This does not affect the ZeroTier network itself.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteNetwork(null)} disabled={isDeleting}>Cancel</Button>
            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
              {isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
              Delete Network
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}