import React, {useEffect, useMemo, useState} from "react";
import "./styles/theme.css";
import "./styles/netinel.css";

import Login from "./components/Login";
import TopBar from "./components/TopBar";
import ComputerCard from "./components/ComputerCard";
import ComputerDetailsModal from "./components/ComputerDetailsModal";
import AIAssistantDrawer from "./components/AIAssistantDrawer";
import NetIntelViz from "./components/NetIntelViz.jsx";
import SideMenu from "./components/SideMenu";


export default function App() {
    const [stats, setStats] = useState(null);
    const [computers, setComputers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [lastUpdated, setLastUpdated] = useState(null);

    const [query, setQuery] = useState("");
    const [status, setStatus] = useState("");

    const [selectedComputer, setSelectedComputer] = useState(null);
    const [aiOpen, setAiOpen] = useState(false);
    const [aiScope, setAiScope] = useState(null);
    const [selectedEnv, setSelectedEnv] = useState("default");

    const [me, setMe] = useState(null);
    const [meLoading, setMeLoading] = useState(true);

    const [activeView, setActiveView] = useState("dashboard");
// "dashboard" | "visualizations" | "account"


    // NEW: environment setting (switch)
    const [saveProcHistory, setSaveProcHistory] = useState(false);

    async function loadMe() {
        setMeLoading(true);
        try {
            const r = await fetch("/api/me", {credentials: "include"});
            if (r.ok) {
                const data = await r.json();
                setMe(data.user);
            } else {
                setMe(null);
            }
        } catch (e) {
            console.error("loadMe error", e);
            setMe(null);
        } finally {
            setMeLoading(false);
        }
    }

    async function refresh() {
        try {
            setLoading(true);
            const [s, c] = await Promise.all([
                fetch("/api/stats", {credentials: "include"}).then((r) => r.json()),
                fetch("/api/computers", {
                    credentials: "include",
                    headers: {"X-Env": selectedEnv},
                }).then((r) => r.json()),
            ]);

            setStats(s);
            setComputers(Array.isArray(c) ? c : []);
            setLastUpdated(new Date().toISOString());
        } catch (e) {
            console.error("refresh error", e);
        } finally {
            setLoading(false);
        }
    }

    // NEW: load env settings (switch state) for selected env
    async function loadEnvSettings(env) {
        try {
            // само admin ќе има пристап (ако не си admin, ќе падне во else и ќе стане false)
            const r = await fetch(`/api/admin/env-settings/${encodeURIComponent(env)}`, {
                credentials: "include",
            });

            if (r.ok) {
                const data = await r.json();
                setSaveProcHistory(!!data.save_process_history);
            } else {
                setSaveProcHistory(false);
            }
        } catch (e) {
            console.error("loadEnvSettings error", e);
            setSaveProcHistory(false);
        }
    }

    // NEW: set env setting (toggle)
    async function setEnvProcessHistory(env, enabled) {
        // optimistic UI
        setSaveProcHistory(enabled);

        try {
            const r = await fetch(`/api/admin/env-settings/${encodeURIComponent(env)}`, {
                method: "POST",
                credentials: "include",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({save_process_history: enabled}),
            });

            if (r.ok) {
                const data = await r.json();
                setSaveProcHistory(!!data.save_process_history);
            } else {
                // rollback
                setSaveProcHistory(!enabled);
                console.error("setEnvProcessHistory failed", await r.text());
            }
        } catch (e) {
            setSaveProcHistory(!enabled);
            console.error("setEnvProcessHistory error", e);
        }
    }

    // on mount: check session
    useEffect(() => {
        loadMe();
    }, []);

    // when logged in OR env changed, refresh data + load env switch state
    useEffect(() => {
        if (!me) return;
        loadEnvSettings(selectedEnv);
        refresh();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [me, selectedEnv]);

    const filtered = useMemo(() => {
        const q = query.trim().toLowerCase();
        return (computers || [])
            .filter((c) => (status ? c.status === status : true))
            .filter((c) => {
                if (!q) return true;
                const hay = [c.name, c.user, c.ip, c.os, c.status]
                    .filter(Boolean)
                    .join(" ")
                    .toLowerCase();
                return hay.includes(q);
            });
    }, [computers, query, status]);

    // Gate UI
    if (meLoading) return <div style={{padding: 20}}>Loading…</div>;
    if (!me) return <Login onDone={loadMe}/>;

    return (
        <div className="app-shell">
            <div className="layout">
                <SideMenu activeView={activeView} setActiveView={setActiveView}/>
                <main className="content">
                    {/* TopBar + pages */}
                </main>
            </div>

            <div className="cont">
                <TopBar
                    onOpenAI={() => setAiOpen(true)}
                    onRefresh={refresh}
                    lastUpdated={lastUpdated}
                    onEnvChange={(env) => setSelectedEnv(env)}
                    selectedEnv={selectedEnv}
                    me={me}
                    onLoggedOut={loadMe}
                    saveProcHistory={saveProcHistory}
                    onToggleProcHistory={(enabled) => setEnvProcessHistory(selectedEnv, enabled)}
                />

                <div className="app-main">
                    {/* ====== VIEW SWITCH ====== */}
                    {activeView === "dashboard" && (
                        <>
                            {/* STATS */}
                            <div className="stats-grid">
                                <div className="stat-card">
                                    <div className="label">Total Computers</div>
                                    <div className="value">{computers.length}</div>
                                    <div className="sub">Monitored Systems</div>
                                </div>

                                <div className="stat-card">
                                    <div className="label">Sysmon Events (24h)</div>
                                    <div className="value">{stats?.total_sysmon_events ?? "—"}</div>
                                    <div className="sub">Security Events</div>
                                </div>

                                <div className="stat-card">
                                    <div className="label">Network Connections (24h)</div>
                                    <div className="value">{stats?.total_network_connections ?? "—"}</div>
                                    <div className="sub">Captured Connections</div>
                                </div>
                            </div>

                            {/* FILTERS */}
                            <div className="panel" style={{marginBottom: 14}}>
                                <div className="panel-head">
                                    <div className="panel-title">Filters</div>
                                    <div style={{color: "var(--dim)", fontSize: 12}}>
                                        {loading ? "Refreshing…" : `${filtered.length} shown`}
                                    </div>
                                </div>
                                <div className="panel-body">
                                    <div className="filters">
                                        <input
                                            className="input"
                                            value={query}
                                            onChange={(e) => setQuery(e.target.value)}
                                            placeholder="Search by name / user / ip / os…"
                                        />

                                        <select
                                            className="select"
                                            value={status}
                                            onChange={(e) => setStatus(e.target.value)}
                                        >
                                            <option value="">All status</option>
                                            <option value="online">Online</option>
                                            <option value="idle">Idle</option>
                                            <option value="offline">Offline</option>
                                        </select>

                                        <button className="btn primary" onClick={refresh}>
                                            Refresh
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {/* COMPUTERS */}
                            <div className="panel">
                                <div className="panel-head">
                                    <div className="panel-title">Connected Computers</div>
                                    <div style={{display: "flex", gap: 10, alignItems: "center"}}>
                                        <span className="pill">{filtered.length} computers</span>
                                        <button
                                            className="btn"
                                            onClick={() => {
                                                setQuery("");
                                                setStatus("");
                                            }}
                                        >
                                            Reset
                                        </button>
                                    </div>
                                </div>
                                <div className="panel-body">
                                    <div className="computers-grid">
                                        {filtered.map((c) => (
                                            <ComputerCard
                                                key={c.name}
                                                c={c}
                                                onOpen={(pc) => {
                                                    setSelectedComputer(pc);
                                                    setAiScope(pc.name);
                                                }}
                                            />
                                        ))}
                                        {filtered.length === 0 && (
                                            <div style={{color: "var(--dim)"}}>
                                                No computers match filter.
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </>
                    )}

                    {activeView === "visualizations" && (
                        <>
                            <div className="panel" style={{marginBottom: 14}}>
                                <div className="panel-head">
                                    <div className="panel-title">Visualizations</div>
                                    <div style={{color: "var(--dim)", fontSize: 12}}>
                                        Network graphs / charts / tables
                                    </div>
                                </div>
                                <div className="panel-body">
                                    <NetIntelViz baseUrl="http://localhost:5555"/>
                                </div>
                            </div>
                        </>
                    )}

                    {activeView === "account" && (
                        <div className="panel">
                            <div className="panel-head">
                                <div className="panel-title">Account</div>
                                <div style={{color: "var(--dim)", fontSize: 12}}>
                                    Profile info
                                </div>
                            </div>
                            <div className="panel-body">
                                <div style={{display: "grid", gap: 10}}>
                                    <div className="pill">Email: {me.email}</div>
                                    <div className="pill">Role: {me.role}</div>
                                    <div className="pill">Tenant ID: {me.tenant_id}</div>
                                    <div className="pill">Name: {me.name || "—"}</div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>

                {/* DETAILS MODAL */}
                <ComputerDetailsModal
                    open={!!selectedComputer}
                    computer={selectedComputer}
                    onClose={() => setSelectedComputer(null)}
                    onAskAI={(name) => {
                        setAiScope(name);
                        setAiOpen(true);
                    }}
                />

                {/* AI DRAWER */}
                <AIAssistantDrawer
                    open={aiOpen}
                    onClose={() => setAiOpen(false)}
                    computers={computers}
                    scope={aiScope}
                    setScope={setAiScope}
                    apiBase={import.meta.env.VITE_API_BASE}
                />
            </div>
        </div>
    );
}
