import React, { useEffect, useMemo, useState } from "react"; export default function TopBar({ onOpenAI, onRefresh, lastUpdated, onEnvChange }) { const [open, setOpen] = useState(false); // admin auth const [adminKey, setAdminKey] = useState(""); const [adminSession, setAdminSession] = useState(""); // env + tokens const [envs, setEnvs] = useState(["default"]); const [selectedEnv, setSelectedEnv] = useState("default"); const [newEnvName, setNewEnvName] = useState(""); const [token, setToken] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); // helper: fetch env list after login async function loadEnvironments(session) { const r = await fetch("/api/admin/environments", { headers: { "X-Admin-Session": session }, }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); const list = data.environments?.length ? data.environments : ["default"]; setEnvs(list); // ако тековниот не постои, стави првиот од листата if (!list.includes(selectedEnv)) { setSelectedEnv(list[0]); onEnvChange?.(list[0]); } } async function login() { setError(""); setToken(""); if (!adminKey.trim()) { setError("Внеси admin key."); return; } setBusy(true); try { const r = await fetch("/api/admin/login", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ admin_key: adminKey.trim() }), }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); const session = data.session; setAdminSession(session); await loadEnvironments(session); } catch (e) { setError(String(e.message || e)); } finally { setBusy(false); } } function logout() { setAdminSession(""); setAdminKey(""); setToken(""); setError(""); setEnvs(["default"]); setSelectedEnv("default"); onEnvChange?.("default"); } async function createEnvironment() { setError(""); setToken(""); if (!newEnvName.trim()) { setError("Внеси име за environment."); return; } setBusy(true); try { const r = await fetch("/api/admin/environments", { method: "POST", headers: { "Content-Type": "application/json", "X-Admin-Session": adminSession, }, body: JSON.stringify({ name: newEnvName.trim() }), }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); // reload list, select new env await loadEnvironments(adminSession); setSelectedEnv(newEnvName.trim()); onEnvChange?.(newEnvName.trim()); setNewEnvName(""); } catch (e) { setError(String(e.message || e)); } finally { setBusy(false); } } async function generateToken() { setError(""); setToken(""); if (!selectedEnv) { setError("Избери environment."); return; } setBusy(true); try { const r = await fetch("/api/admin/tokens", { method: "POST", headers: { "Content-Type": "application/json", "X-Admin-Session": adminSession, }, body: JSON.stringify({ env: selectedEnv }), }); const data = await r.json(); if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); setToken(data.token || ""); } catch (e) { setError(String(e.message || e)); } finally { setBusy(false); } } async function copyToken() { if (!token) return; await navigator.clipboard.writeText(token); } function changeEnv(val) { setSelectedEnv(val); setToken(""); onEnvChange?.(val); } const prettyTime = useMemo(() => { if (!lastUpdated) return "Loading…"; try { return `Updated ${new Date(lastUpdated).toLocaleTimeString()}`; } catch { return "Updated"; } }, [lastUpdated]); return ( <> {/* TOPBAR */}
🛡️

LAN Security Monitor

Sysmon Edition • {prettyTime}

Env: {selectedEnv}
{/* MODAL */} {open && (
setOpen(false)}>
e.stopPropagation()}>
Admin Panel
Login ➜ Environments ➜ Generate token
{/* 1) LOGIN */} {!adminSession ? (
Step 1: Admin login
setAdminKey(e.target.value)} placeholder="Enter admin key" />
Admin key е само за логирање. После тоа користиме session token.
) : ( <> {/* 2) ENV SELECT */}
Step 2: Choose environment
Овој env ќе се користи за dashboard филтрирање + token generation.
{/* 3) CREATE ENV */}
Create new environment
setNewEnvName(e.target.value)} placeholder="e.g. school-lab / staging" />
{/* 4) TOKEN */}
Step 3: Generate token (for clients)
{token && ( <>
Token
{token.slice(0, 12)}…{token.slice(-10)}
Клиентот мора да праќа header: X-Env-Token со овој token на /receive.
)}
)} {error && (
Error
{error}
)}
)} ); }