@extends('admin.base-admin')

@section('page_title', 'Ativos | Admin TI')

@section('nav')
@include('admin.partials.nav-ti')
@endsection

@section('page-header')
    <h1>
        <i class="bi bi-hdd-network-fill mr-2" style="font-size:1.1rem;color:var(--dm-accent);"></i>
        Ativos
    </h1>
@endsection

@section('content')
<style>
    /* ── Toolbar ─────────────────────────────────────── */
    .ativos-toolbar {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap;
        margin-bottom: .75rem;
    }
    .ativos-search-wrap {
        position: relative;
        min-width: 220px;
        max-width: 320px;
        flex: 1;
    }
    .ativos-search-wrap .bi-search {
        position: absolute;
        left: .7rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--dm-text-muted);
        font-size: .8rem;
        pointer-events: none;
    }
    .ativos-search-wrap input {
        width: 100%;
        height: 38px;
        padding: 0 .85rem 0 2rem;
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 8px;
        color: var(--dm-text);
        font-size: .82rem;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
    }
    .ativos-search-wrap input::placeholder { color: var(--dm-text-muted); opacity: .6; }
    .ativos-search-wrap input:focus {
        border-color: var(--dm-accent);
        box-shadow: 0 0 0 3px rgba(77,124,245,.15);
    }

    /* ── Tab + toggle buttons (shared style) ─────────── */
    .status-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
    .status-tab, .toolbar-btn {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        height: 38px;
        padding: 0 .85rem;
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 8px;
        color: var(--dm-text-muted);
        font-size: .8rem;
        font-weight: 500;
        cursor: pointer;
        transition: all .15s;
        white-space: nowrap;
    }
    .status-tab:hover, .toolbar-btn:hover {
        background: var(--dm-surface-2);
        border-color: var(--dm-accent);
        color: var(--dm-text);
    }
    .status-tab.active, .toolbar-btn.active {
        background: var(--dm-surface-2);
        border-color: var(--dm-accent);
        color: var(--dm-text);
    }
    .tab-cnt {
        background: var(--dm-surface-2);
        border-radius: 99px;
        padding: 0 .45rem;
        font-size: .68rem;
        font-weight: 700;
        line-height: 1.6;
        color: var(--dm-text-muted);
        min-width: 1.4rem;
        text-align: center;
    }
    .status-tab.active .tab-cnt, .toolbar-btn.active .tab-cnt {
        background: var(--dm-accent);
        color: #fff;
    }

    /* ── Groups bar (collapsible horizontal chips) ───── */
    .groups-bar {
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 10px;
        padding: .65rem 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        align-items: center;
        margin-bottom: .75rem;
    }
    .groups-bar-label {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--dm-text-muted);
        margin-right: .15rem;
        white-space: nowrap;
    }
    .group-chip {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        height: 28px;
        padding: 0 .7rem;
        border-radius: 99px;
        font-size: .75rem;
        font-weight: 500;
        background: var(--dm-surface-2);
        border: 1px solid var(--dm-nav-border);
        color: var(--dm-text-muted);
        cursor: pointer;
        transition: all .12s;
        white-space: nowrap;
    }
    .group-chip:hover { border-color: var(--dm-accent); color: var(--dm-text); }
    .group-chip.active {
        background: rgba(77,124,245,.12);
        border-color: var(--dm-accent);
        color: var(--dm-accent);
    }
    .group-chip .chip-cnt { font-size: .65rem; font-weight: 700; opacity: .7; }

    /* ── Hosts panel ─────────────────────────────────── */
    .hosts-panel {
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 10px;
        overflow: hidden;
    }
    .hosts-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .65rem 1rem;
        border-bottom: 1px solid var(--dm-nav-border);
    }
    .hosts-panel-title {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--dm-text-muted);
    }
    #total-label { font-size: .75rem; color: var(--dm-text-muted); }

    /* ── Category tabs (inside panel header) ────────── */
    .panel-cat-tabs { display: flex; gap: .2rem; }
    .panel-cat-tab {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .3rem .8rem;
        border-radius: 7px;
        font-size: .8rem;
        font-weight: 500;
        color: var(--dm-text-muted);
        cursor: pointer;
        border: none;
        background: transparent;
        transition: all .12s;
        white-space: nowrap;
    }
    .panel-cat-tab:hover { background: var(--dm-surface-2); color: var(--dm-text); }
    .panel-cat-tab.active {
        background: var(--dm-surface-2);
        color: var(--dm-text);
        font-weight: 600;
    }
    .panel-cat-tab.active .tab-cnt { background: var(--dm-accent); color: #fff; }
    .panel-cat-tab .tab-cnt { background: var(--dm-surface-2); }

    /* ── Table header ────────────────────────────────── */
    .hosts-thead {
        display: grid;
        grid-template-columns: 28px 1fr 140px 1fr 24px;
        padding: .5rem 1rem;
        border-bottom: 1px solid var(--dm-nav-border);
        background: var(--dm-surface);
    }
    .hosts-thead span {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--dm-text-muted);
    }

    /* ── Host row ────────────────────────────────────── */
    .host-row {
        display: grid;
        grid-template-columns: 28px 1fr 140px 1fr 24px;
        align-items: center;
        padding: .7rem 1rem;
        border-bottom: 1px solid var(--dm-nav-border);
        border-left: 3px solid transparent;
        cursor: pointer;
        transition: background .1s, border-left-color .15s;
        user-select: none;
    }
    .host-row:hover { background: var(--dm-surface-2); }
    .host-row.expanded {
        background: var(--dm-surface-2);
        border-left-color: var(--dm-accent);
    }
    .host-name {
        font-size: .85rem;
        font-weight: 600;
        color: var(--dm-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .host-tech {
        font-size: .72rem;
        color: var(--dm-text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1px;
    }
    .host-ip {
        font-size: .78rem;
        font-family: 'Courier New', monospace;
        color: var(--dm-text-muted);
    }
    .group-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
    .group-tag {
        display: inline-block;
        font-size: .68rem;
        font-weight: 500;
        padding: .1rem .5rem;
        border-radius: 99px;
        background: rgba(77,124,245,.1);
        color: var(--dm-accent);
        border: 1px solid rgba(77,124,245,.2);
        white-space: nowrap;
    }
    .row-chevron {
        color: var(--dm-text-muted);
        font-size: .72rem;
        transition: transform .2s;
        justify-self: center;
    }
    .host-row.expanded .row-chevron { transform: rotate(90deg); }

    /* ── Expand panel ────────────────────────────────── */
    .host-expand {
        border-bottom: 1px solid var(--dm-nav-border);
        background: var(--dm-bg);
        padding: 1rem 1.1rem;
        display: none;
    }
    .expand-tabs {
        display: flex;
        align-items: center;
        gap: .25rem;
        margin-bottom: .85rem;
        border-bottom: 1px solid var(--dm-nav-border);
        padding-bottom: .5rem;
    }
    .expand-refresh-btn {
        margin-left: auto;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .25rem .6rem;
        border-radius: 6px;
        font-size: .72rem;
        font-weight: 500;
        color: var(--dm-text-muted);
        background: transparent;
        border: 1px solid var(--dm-nav-border);
        cursor: pointer;
        outline: none;
        width: auto;
        height: auto;
        transition: background .12s, color .12s, border-color .12s, opacity .12s;
    }
    .expand-refresh-btn:hover { background: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-accent); }
    .expand-refresh-btn:focus { outline: none; box-shadow: none; }
    .expand-refresh-btn.loading { opacity: .6; pointer-events: none; right: 4.5em;}
    .expand-refresh-btn.loading .bi { animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .expand-tab {
        padding: .3rem .75rem;
        border-radius: 6px;
        font-size: .75rem;
        font-weight: 500;
        color: var(--dm-text-muted);
        cursor: pointer;
        border: none;
        background: transparent;
        transition: all .12s;
    }
    .expand-tab:hover { background: var(--dm-surface); color: var(--dm-text); }
    .expand-tab.active { background: var(--dm-surface); color: var(--dm-accent); font-weight: 600; }

    /* ── Metric cards ────────────────────────────────── */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .65rem;
        margin-bottom: .9rem;
    }
    @media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px) { .metrics-grid { grid-template-columns: 1fr; } }

    .metric-card {
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 8px;
        padding: .75rem .9rem;
    }
    .metric-card-label {
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--dm-text-muted);
        margin-bottom: .35rem;
        display: flex;
        align-items: center;
        gap: .3rem;
    }
    .metric-card-value {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--dm-text);
        line-height: 1.1;
        margin-bottom: .35rem;
    }
    .metric-card-value.c-green  { color: #22c55e; }
    .metric-card-value.c-yellow { color: #f59e0b; }
    .metric-card-value.c-red    { color: #ef4444; }
    .metric-card-sub { font-size: .68rem; color: var(--dm-text-muted); margin-bottom: .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .metric-bar-track { height: 4px; background: var(--dm-surface-2); border-radius: 99px; overflow: hidden; }
    .metric-bar-fill  { height: 100%; border-radius: 99px; background: #22c55e; transition: width .4s; }
    .metric-bar-fill.warn { background: #f59e0b; }
    .metric-bar-fill.crit { background: #ef4444; }
    .metric-na { font-size: .78rem; color: var(--dm-text-muted); font-style: italic; padding-top: .2rem; }

    /* ── Interfaces section ──────────────────────────── */
    .iface-title {
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--dm-text-muted);
        margin-bottom: .45rem;
    }
    .iface-list { display: flex; flex-wrap: wrap; gap: .5rem; }
    .iface-item {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .3rem .65rem;
        background: var(--dm-surface);
        border: 1px solid var(--dm-nav-border);
        border-radius: 6px;
        font-size: .75rem;
    }
    .iface-ip  { font-family: 'Courier New', monospace; color: var(--dm-text); }
    .iface-type { color: var(--dm-text-muted); font-size: .68rem; }

    /* ── Telemetria items list ───────────────────────── */
    .items-list { max-height: 300px; overflow-y: auto; }
    .item-row {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 1rem;
        padding: .4rem .5rem;
        border-radius: 5px;
        font-size: .78rem;
        transition: background .1s;
    }
    .item-row:hover { background: var(--dm-surface); }
    .item-name  { color: var(--dm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .item-key   { font-family: monospace; font-size: .65rem; color: var(--dm-text-muted); }
    .item-age   { font-size: .68rem; color: var(--dm-text-muted); white-space: nowrap; }
    .item-value { color: var(--dm-accent); font-weight: 600; white-space: nowrap; font-family: monospace; font-size: .78rem; }

    /* ── Annotations placeholder ─────────────────────── */
    .annotations-placeholder {
        padding: 1.75rem 1rem;
        text-align: center;
        border: 1.5px dashed var(--dm-nav-border);
        border-radius: 8px;
    }
    .annotations-placeholder i { font-size: 1.8rem; color: var(--dm-text-muted); opacity: .5; display: block; margin-bottom: .5rem; }
    .annotations-placeholder p { font-size: .83rem; color: var(--dm-text-muted); margin: 0 0 .25rem; }
    .annotations-placeholder small { font-size: .72rem; color: var(--dm-text-muted); opacity: .65; }

    /* ── Availability dot ────────────────────────────── */
    .av-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .av-dot.available   { background: #22c55e; box-shadow: 0 0 5px #22c55e99; }
    .av-dot.unavailable { background: #ef4444; box-shadow: 0 0 5px #ef444499; }
    .av-dot.unknown     { background: var(--dm-text-muted); opacity: .5; }
    .av-dot.disabled    { background: var(--dm-nav-border); border: 1px solid var(--dm-text-muted); opacity: .6; }

    /* ── Skeleton ─────────────────────────────────────── */
    .sk { border-radius: 4px; background: var(--dm-surface-2); animation: sk-pulse 1.3s ease-in-out infinite; }
    @keyframes sk-pulse { 0%,100%{opacity:.45} 50%{opacity:.9} }

    /* ── State blocks ─────────────────────────────────── */
    .state-block { padding: 3rem 1rem; text-align: center; color: var(--dm-text-muted); }
    .state-block i { font-size: 2.2rem; display: block; margin-bottom: .6rem; }
    .state-block p { font-size: .85rem; margin: 0; }
    .state-block.err i, .state-block.err p { color: #ef4444; }

    /* ── Stats bar ────────────────────────────────────── */
    .stats-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        padding: .6rem 1rem;
        border-top: 1px solid var(--dm-nav-border);
        font-size: .75rem;
        color: var(--dm-text-muted);
    }
    .stats-bar span { display: inline-flex; align-items: center; gap: .35rem; }
    .stats-bar b { color: var(--dm-text); font-weight: 600; }

    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
</style>

<div class="container-fluid mt-4">

    {{-- Toolbar --}}
    <div class="ativos-toolbar mt-4">
        <div class="ativos-search-wrap">
            <i class="bi bi-search"></i>
            <input type="text" id="search-input" placeholder="Buscar host, IP...">
        </div>

        <div class="status-tabs" id="status-tabs">
            <button class="status-tab active" data-status="all">
                Todos <span class="tab-cnt" id="cnt-all">—</span>
            </button>
            <button class="status-tab" data-status="available">
                <span class="av-dot available"></span> Disponível
                <span class="tab-cnt" id="cnt-available">—</span>
            </button>
            <button class="status-tab" data-status="unavailable">
                <span class="av-dot unavailable"></span> Indisponível
                <span class="tab-cnt" id="cnt-unavailable">—</span>
            </button>
            <button class="status-tab" data-status="unknown">
                <span class="av-dot unknown" style="opacity:1;"></span> Desconhecido
                <span class="tab-cnt" id="cnt-unknown">—</span>
            </button>
            <button class="status-tab" data-status="disabled">
                <span class="av-dot disabled" style="opacity:1;"></span> Desabilitado
                <span class="tab-cnt" id="cnt-disabled">—</span>
            </button>
        </div>

        <button class="toolbar-btn" id="btn-groups" title="Filtrar por grupo" style="display:none;">
            <i class="bi bi-collection"></i> Grupos <span class="tab-cnt" id="cnt-groups">—</span>
        </button>

        <button class="saas-btn ml-auto" id="btn-refresh" title="Recarregar dados">
            <i class="bi bi-arrow-clockwise" id="refresh-icon"></i> Atualizar
        </button>
    </div>

    {{-- Groups bar (hidden; shown on demand) --}}
    <div class="groups-bar" id="groups-bar" style="display:none;">
        <span class="groups-bar-label">Grupo</span>
        <div id="groups-chips" style="display:flex;flex-wrap:wrap;gap:.4rem;"></div>
    </div>

    {{-- Hosts panel (full width) --}}
    <div class="hosts-panel">
        <div class="hosts-panel-header">
            <div class="panel-cat-tabs" id="panel-cat-tabs">
                <button class="panel-cat-tab active" data-cat="computers">
                    <i class="bi bi-pc-display-horizontal"></i> Computadores
                    <span class="tab-cnt" id="cnt-cat-computers">—</span>
                </button>
                <button class="panel-cat-tab" data-cat="servers">
                    <i class="bi bi-server"></i> Servidores
                    <span class="tab-cnt" id="cnt-cat-servers">—</span>
                </button>
                <button class="panel-cat-tab" data-cat="all">
                    Todos <span class="tab-cnt" id="cnt-cat-all">—</span>
                </button>
            </div>
            <span id="total-label">Carregando...</span>
        </div>
        <div class="hosts-thead">
            <span></span>
            <span>Nome</span>
            <span>IP</span>
            <span>Grupos</span>
            <span></span>
        </div>
        <div id="hosts-body">
            @for ($i = 0; $i < 8; $i++)
                <div class="host-row" style="cursor:default;border-left:3px solid transparent;">
                    <div><span class="sk" style="width:9px;height:9px;border-radius:50%;display:inline-block;"></span></div>
                    <div>
                        <span class="sk d-block" style="width:{{ 90 + $i * 20 }}px;height:13px;margin-bottom:4px;"></span>
                        <span class="sk d-block" style="width:{{ 60 + $i * 12 }}px;height:10px;"></span>
                    </div>
                    <div><span class="sk d-block" style="width:88px;height:13px;"></span></div>
                    <div><span class="sk d-block" style="width:{{ 50 + $i * 14 }}px;height:13px;"></span></div>
                    <div></div>
                </div>
            @endfor
        </div>
        <div class="stats-bar" id="stats-bar" style="display:none;">
            <span><b id="stat-total">0</b> total</span>
            <span><span class="av-dot available"></span> <b id="stat-available">0</b> disponível</span>
            <span><span class="av-dot unavailable"></span> <b id="stat-unavailable">0</b> indisponível</span>
            <span><span class="av-dot unknown" style="opacity:1;"></span> <b id="stat-unknown">0</b> desconhecido</span>
            <span><span class="av-dot disabled" style="opacity:1;"></span> <b id="stat-disabled">0</b> desabilitado</span>
        </div>
    </div>
</div>

<script>
(function () {
    const HOSTS_URL  = '/admin/zabbix/hosts';
    const GROUPS_URL = '/admin/zabbix/groups';
    const ITEMS_URL  = id => `/admin/zabbix/hosts/${id}/items`;

    let allHosts  = [];
    let allGroups = [];
    let state = { category: 'computers', group: null, status: 'all', search: '' };

    /** Patterns used to classify hosts into quick categories */
    const CAT_MATCH = {
        computers: n => /computer|computador|workstation|desktop|\bpc\b/i.test(n),
        servers:   n => /server|servidor/i.test(n),
        all:       () => true,
    };

    function matchesCategory(host) {
        if (state.category === 'all') return true;
        return (host.groups || []).some(g => CAT_MATCH[state.category](g.name));
    }

    /** Lazy item cache: hostId -> items[] | null (null = not yet fetched) */
    const itemsCache = new Map();

    /* ── Helpers ──────────────────────────────────────────────── */
    function avail(host) {
        if (host.status === '1') return 'disabled';
        const iface = (host.interfaces || []).find(i => i.main === '1');
        if (!iface) return 'unknown';
        return iface.available === '1' ? 'available' : iface.available === '2' ? 'unavailable' : 'unknown';
    }

    function mainIp(host) {
        const iface = (host.interfaces || []).find(i => i.main === '1');
        return iface ? (iface.ip || iface.dns || '—') : '—';
    }

    function esc(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function ifaceType(t) {
        return { '1':'Agent','2':'SNMP','3':'IPMI','4':'JMX' }[t] || t;
    }

    /* ── Item parsing ─────────────────────────────────────────── */
    function findItem(items, ...keys) {
        for (const k of keys) {
            const found = items.find(i => i.key_.toLowerCase().includes(k.toLowerCase()));
            if (found) return found;
        }
        return null;
    }

    function parseMetrics(items) {
        // CPU
        const cpu = findItem(items, 'system.cpu.util', 'cpu.util', 'cpu.load');

        // RAM — prefer direct % item, fall back to computing from bytes
        let ram = findItem(items, 'vm.memory.utilization');
        let ramMode = 'pct';
        if (!ram) {
            ram = items.find(i => i.key_.includes('vm.memory.size') && i.key_.includes('pavailable'));
            if (ram) ramMode = 'pavailable';
        }
        if (!ram) {
            const used  = items.find(i => i.key_.includes('vm.memory.size') && i.key_.includes('used]'));
            const total = items.find(i => i.key_.includes('vm.memory.size') && i.key_.includes('total]'));
            if (used && total) {
                const u = parseFloat(used.lastvalue), t = parseFloat(total.lastvalue);
                if (!isNaN(u) && !isNaN(t) && t > 0) {
                    ram = { ...used, _pct: (u / t) * 100, _usedBytes: u, _totalBytes: t };
                    ramMode = 'bytes';
                }
            }
        }

        // Disk — prefer % item, fall back to computing from bytes
        let disk = items.find(i => i.key_.includes('vfs.fs.size') && i.key_.includes('pused'));
        let diskMode = 'pct';
        if (!disk) {
            const used  = items.find(i => i.key_.includes('vfs.fs.size') && i.key_.includes(',used]'));
            const total = items.find(i => i.key_.includes('vfs.fs.size') && i.key_.includes(',total]'));
            if (used && total) {
                const u = parseFloat(used.lastvalue), t = parseFloat(total.lastvalue);
                if (!isNaN(u) && !isNaN(t) && t > 0) {
                    disk = { ...used, _pct: (u / t) * 100, _usedBytes: u, _totalBytes: t };
                    diskMode = 'bytes';
                }
            }
        }

        const uptime = findItem(items, 'system.uptime', 'uptime');
        return { cpu, ram, ramMode, disk, diskMode, uptime };
    }

    function pct(val) {
        const v = parseFloat(val);
        return isNaN(v) ? null : Math.min(100, Math.max(0, v));
    }

    function fmtBytes(b) {
        b = parseFloat(b);
        if (isNaN(b)) return '—';
        if (b >= 1073741824) return (b/1073741824).toFixed(1)+' GB';
        if (b >= 1048576)    return (b/1048576).toFixed(1)+' MB';
        return (b/1024).toFixed(1)+' KB';
    }

    function barCls(v)   { return v >= 90 ? 'crit' : v >= 75 ? 'warn' : ''; }
    function valColor(v) { return v >= 90 ? 'c-red' : v >= 75 ? 'c-yellow' : 'c-green'; }

    function fmtUptime(sec) {
        const s = parseInt(sec);
        if (isNaN(s)) return '—';
        const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60);
        return d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`;
    }

    function fmtValue(item) {
        if (!item || item.lastvalue === '') return null;
        const u = item.units || '', v = parseFloat(item.lastvalue), k = item.key_ || '';
        if (u === 'uptime' || k.includes('uptime')) return fmtUptime(item.lastvalue);
        if (u === 'B' || (u === '' && v > 1048576 && /vm\.memory\.size|vfs\.fs\.size|memory|disk\.used/.test(k)))
            return fmtBytes(v);
        if (u === '%') return v.toFixed(1) + '%';
        if (/^proc\.num/.test(k)) return v + ' processo' + (v !== 1 ? 's' : '');
        if (/^service\.info/.test(k)) {
            const states = { 0:'Executando', 1:'Pausado', 2:'Iniciando', 3:'Parando', 4:'Continuando', 5:'Pausando', 6:'Parado', 7:'Desconhecido' };
            return states[parseInt(v)] ?? item.lastvalue;
        }
        return u ? item.lastvalue + ' ' + u : item.lastvalue;
    }

    /* ── Load ─────────────────────────────────────────────────── */
    async function load() {
        setLoading(true);
        try {
            const [hRes, gRes] = await Promise.all([
                fetch(HOSTS_URL,  { headers:{ 'X-Requested-With':'XMLHttpRequest' } }),
                fetch(GROUPS_URL, { headers:{ 'X-Requested-With':'XMLHttpRequest' } }),
            ]);
            allHosts  = await hRes.json();
            allGroups = await gRes.json();
            if (allHosts.error)  throw new Error(allHosts.error);
            if (allGroups.error) throw new Error(allGroups.error);
            renderGroups();
            renderHosts();
            updateCounts();
        } catch (err) {
            renderError(err.message);
        } finally {
            setLoading(false);
        }
    }

    async function fetchItems(hostId) {
        if (itemsCache.has(hostId)) return itemsCache.get(hostId);
        try {
            const res   = await fetch(ITEMS_URL(hostId), { headers:{ 'X-Requested-With':'XMLHttpRequest' } });
            const items = await res.json();
            const list  = Array.isArray(items) ? items : [];
            itemsCache.set(hostId, list);
            return list;
        } catch {
            itemsCache.set(hostId, []);
            return [];
        }
    }

    /* ── Groups ───────────────────────────────────────────────── */
    function renderGroups() {
        const chips = document.getElementById('groups-chips');
        const cnt   = gid => allHosts.filter(h => (h.groups||[]).some(g => g.groupid === gid)).length;
        const items = [
            { id: null, name: 'Todos', count: allHosts.length },
            ...allGroups.map(g => ({ id: g.groupid, name: g.name, count: cnt(g.groupid) })),
        ];
        document.getElementById('cnt-groups').textContent = allGroups.length;
        chips.innerHTML = items.map(g => `
            <button class="group-chip${state.group === g.id ? ' active' : ''}" data-gid="${g.id ?? ''}">
                ${esc(g.name)} <span class="chip-cnt">${g.count}</span>
            </button>`).join('');
        chips.querySelectorAll('.group-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                state.group = chip.dataset.gid || null;
                chips.querySelectorAll('.group-chip').forEach(c => c.classList.remove('active'));
                chip.classList.add('active');
                renderHosts();
            });
        });
    }

    /* ── Render hosts ─────────────────────────────────────────── */
    function renderHosts() {
        const body     = document.getElementById('hosts-body');
        const filtered = applyFilters();

        document.getElementById('total-label').textContent =
            `${filtered.length} host${filtered.length !== 1 ? 's' : ''}`;

        if (!filtered.length) {
            body.innerHTML = `<div class="state-block"><i class="bi bi-inbox"></i><p>Nenhum host encontrado</p></div>`;
            document.getElementById('stats-bar').style.display = 'none';
            return;
        }

        body.innerHTML = filtered.map(h => {
            const a    = avail(h);
            const ip   = mainIp(h);
            const tags = (h.groups||[]).map(g => `<span class="group-tag">${esc(g.name)}</span>`).join('');
            const ifaces = (h.interfaces||[]).map(iface => {
                const addr = iface.ip || iface.dns || '—';
                const ac   = iface.available === '1' ? 'available' : iface.available === '2' ? 'unavailable' : 'unknown';
                return `<div class="iface-item">
                    <span class="av-dot ${ac}"></span>
                    <span class="iface-ip">${esc(addr)}</span>
                    <span class="iface-type">${esc(ifaceType(iface.type))}</span>
                </div>`;
            }).join('') || '<span class="metric-na">Nenhuma interface registrada</span>';

            return `
            <div class="host-row" data-hostid="${esc(h.hostid)}">
                <div><span class="av-dot ${a}" title="${a}"></span></div>
                <div>
                    <div class="host-name">${esc(h.name)}</div>
                    ${h.name !== h.host ? `<div class="host-tech">${esc(h.host)}</div>` : ''}
                </div>
                <div><span class="host-ip">${esc(ip)}</span></div>
                <div><div class="group-tags">${tags}</div></div>
                <div style="justify-self:center;"><i class="bi bi-chevron-right row-chevron"></i></div>
            </div>
            <div class="host-expand" id="expand-${esc(h.hostid)}">
                <div class="expand-tabs">
                    <button class="expand-tab active" data-tab="overview">Visão Geral</button>
                    <button class="expand-tab" data-tab="telemetria">Telemetria</button>
                    <button class="expand-tab" data-tab="anotacoes">Anotações</button>
                    <button type="button" class="expand-refresh-btn" data-hostid="${esc(h.hostid)}" title="Atualizar dados deste ativo">
                        <i class="bi bi-arrow-clockwise"></i> Atualizar
                    </button>
                </div>
                <div data-tab-pane="overview">
                    <div class="metrics-grid" id="metrics-${esc(h.hostid)}">${skMetrics()}</div>
                    <div>
                        <div class="iface-title">Interfaces</div>
                        <div class="iface-list">${ifaces}</div>
                    </div>
                </div>
                <div data-tab-pane="telemetria" style="display:none;">
                    <div class="items-list" id="items-${esc(h.hostid)}">
                        <div class="state-block" style="padding:1.5rem 1rem;">
                            <i class="bi bi-layers" style="font-size:1.3rem;"></i>
                            <p>Abrir aba para carregar dados de telemetria</p>
                        </div>
                    </div>
                </div>
                <div data-tab-pane="anotacoes" style="display:none;">
                    {{-- Future: load annotations from local DB via /admin/ativos/{hostid}/anotacoes --}}
                    <div class="annotations-placeholder">
                        <i class="bi bi-journal-text"></i>
                        <p>Anotações sobre este ativo</p>
                        <small>Integração com banco local — disponível em breve</small>
                    </div>
                </div>
            </div>`;
        }).join('');

        document.getElementById('stats-bar').style.display = 'flex';

        body.querySelectorAll('.host-row').forEach(row => {
            row.addEventListener('click', () => toggleRow(row));
        });

        body.querySelectorAll('.expand-tab').forEach(tab => {
            tab.addEventListener('click', e => {
                e.stopPropagation();
                const panel  = tab.closest('.host-expand');
                const pane   = tab.dataset.tab;
                const hostId = panel.id.replace('expand-', '');

                panel.querySelectorAll('.expand-tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                panel.querySelectorAll('[data-tab-pane]').forEach(p => {
                    p.style.display = p.dataset.tabPane === pane ? '' : 'none';
                });

                if (pane === 'telemetria') openTelemetria(hostId);
            });
        });

        body.querySelectorAll('.expand-refresh-btn').forEach(btn => {
            btn.addEventListener('click', e => {
                e.stopPropagation();
                refreshHost(btn.dataset.hostid, btn);
            });
        });
    }

    async function refreshHost(hostId, btn) {
        if (btn) btn.classList.add('loading');
        itemsCache.delete(hostId);

        const items = await fetchItems(hostId);

        const panel = document.getElementById('expand-' + hostId);
        if (!panel) return;

        renderMetrics(hostId, items);

        const activeTab = panel.querySelector('.expand-tab.active');
        if (activeTab && activeTab.dataset.tab === 'telemetria') {
            renderItemsList(hostId, items);
        }

        if (btn) btn.classList.remove('loading');
    }

    function skMetrics() {
        return ['CPU','RAM','Disco','Uptime'].map(l => `
            <div class="metric-card">
                <div class="metric-card-label">${l}</div>
                <div class="sk" style="width:60%;height:30px;border-radius:4px;margin-bottom:.45rem;"></div>
                <div class="sk" style="width:100%;height:4px;border-radius:99px;"></div>
            </div>`).join('');
    }

    /* ── Row expand / collapse ────────────────────────────────── */
    async function toggleRow(row) {
        const hostId  = row.dataset.hostid;
        const panel   = document.getElementById('expand-' + hostId);
        const open    = row.classList.contains('expanded');

        if (open) {
            row.classList.remove('expanded');
            panel.style.display = 'none';
        } else {
            row.classList.add('expanded');
            panel.style.display = 'block';
            if (!itemsCache.has(hostId)) {
                const items = await fetchItems(hostId);
                renderMetrics(hostId, items);
            } else {
                renderMetrics(hostId, itemsCache.get(hostId));
            }
        }
    }

    /* ── Metric cards ─────────────────────────────────────────── */
    function renderMetrics(hostId, items) {
        const grid = document.getElementById('metrics-' + hostId);
        if (!grid) return;
        const m = parseMetrics(items);

        let cpuVal = m.cpu ? pct(m.cpu.lastvalue) : null;

        let ramVal = null, ramSub = null;
        if (m.ram) {
            if (m.ramMode === 'bytes') {
                ramVal = m.ram._pct;
                ramSub = fmtBytes(m.ram._usedBytes) + ' / ' + fmtBytes(m.ram._totalBytes);
            } else if (m.ramMode === 'pavailable') {
                const v = pct(m.ram.lastvalue);
                ramVal = v !== null ? 100 - v : null;
                ramSub = m.ram.name;
            } else {
                ramVal = pct(m.ram.lastvalue);
                ramSub = m.ram.name;
            }
        }

        let diskVal = null, diskSub = null;
        if (m.disk) {
            if (m.diskMode === 'bytes') {
                diskVal = m.disk._pct;
                diskSub = fmtBytes(m.disk._usedBytes) + ' / ' + fmtBytes(m.disk._totalBytes);
            } else {
                diskVal = pct(m.disk.lastvalue);
                diskSub = m.disk.name;
            }
        }

        grid.innerHTML = [
            mCardPct('CPU',   'bi-cpu',    cpuVal,  m.cpu ? m.cpu.name : null),
            mCardPct('RAM',   'bi-memory', ramVal,  ramSub),
            mCardPct('Disco', 'bi-hdd',    diskVal, diskSub),
            mCardUptime(m.uptime),
        ].join('');
    }

    function mCardPct(label, icon, val, sub) {
        if (val === null) return `
            <div class="metric-card">
                <div class="metric-card-label"><i class="bi ${icon}"></i> ${label}</div>
                <div class="metric-na">Não disponível</div>
            </div>`;
        const bc = barCls(val), vc = valColor(val);
        return `
            <div class="metric-card">
                <div class="metric-card-label"><i class="bi ${icon}"></i> ${label}</div>
                <div class="metric-card-value ${vc}">${val.toFixed(1)}<span style="font-size:.6em;font-weight:400;color:var(--dm-text-muted)">%</span></div>
                ${sub ? `<div class="metric-card-sub" title="${esc(sub)}">${esc(sub)}</div>` : ''}
                <div class="metric-bar-track"><div class="metric-bar-fill ${bc}" style="width:${Math.min(100,val)}%"></div></div>
            </div>`;
    }

    function mCardUptime(item) {
        const val = item ? fmtUptime(item.lastvalue) : null;
        return `
            <div class="metric-card">
                <div class="metric-card-label"><i class="bi bi-clock-history"></i> Uptime</div>
                ${val
                    ? `<div class="metric-card-value c-green" style="font-size:1rem;">${esc(val)}</div>`
                    : '<div class="metric-na">Não disponível</div>'
                }
            </div>`;
    }

    /* ── Telemetria tab ───────────────────────────────────────── */
    async function openTelemetria(hostId) {
        const el = document.getElementById('items-' + hostId);
        if (!el) return;
        if (!itemsCache.has(hostId)) {
            el.innerHTML = `<div class="state-block" style="padding:1.5rem 1rem;"><i class="bi bi-hourglass-split" style="font-size:1.3rem;"></i><p>Carregando itens...</p></div>`;
            renderItemsList(hostId, await fetchItems(hostId));
        } else {
            renderItemsList(hostId, itemsCache.get(hostId));
        }
    }

    function renderItemsList(hostId, items) {
        const el = document.getElementById('items-' + hostId);
        if (!el) return;
        if (!items || !items.length) {
            el.innerHTML = `<div class="state-block" style="padding:1.5rem 1rem;"><i class="bi bi-inbox"></i><p>Nenhum item disponível</p></div>`;
            return;
        }
        const now   = Math.floor(Date.now() / 1000);
        const sorted = [...items].sort((a, b) => parseInt(b.lastclock||0) - parseInt(a.lastclock||0));
        el.innerHTML = sorted.map(item => {
            const val  = fmtValue(item);
            const diff = item.lastclock ? now - parseInt(item.lastclock) : null;
            const age  = diff === null ? '' : diff < 60 ? 'agora' : diff < 3600 ? `${Math.floor(diff/60)}m` : `${Math.floor(diff/3600)}h`;
            return `
            <div class="item-row">
                <div>
                    <div class="item-name" title="${esc(item.name)}">${esc(item.name)}</div>
                    <div class="item-key">${esc(item.key_)}</div>
                </div>
                <div class="item-age">${esc(age)}</div>
                <div class="item-value">${val !== null ? esc(val) : '<span style="color:var(--dm-text-muted);font-style:italic;font-size:.7rem;">sem dado</span>'}</div>
            </div>`;
        }).join('');
    }

    /* ── Filters ──────────────────────────────────────────────── */
    function applyFilters() {
        const q = state.search.toLowerCase();
        return allHosts.filter(h => {
            if (!matchesCategory(h)) return false;
            if (state.group && !(h.groups||[]).some(g => g.groupid === state.group)) return false;
            if (state.status !== 'all' && avail(h) !== state.status) return false;
            if (q && !h.name.toLowerCase().includes(q) &&
                     !h.host.toLowerCase().includes(q) &&
                     !mainIp(h).includes(q)) return false;
            return true;
        });
    }

    /* ── Counts ───────────────────────────────────────────────── */
    function updateCounts() {
        // category totals always count from all hosts
        ['computers','servers','all'].forEach(cat => {
            const el = document.getElementById('cnt-cat-' + cat);
            if (el) el.textContent = allHosts.filter(h =>
                cat === 'all' ? true : (h.groups||[]).some(g => CAT_MATCH[cat](g.name))
            ).length;
        });

        // availability counts scoped to the active category (not the status filter)
        const inCat = allHosts.filter(h => matchesCategory(h));
        const c = { all: inCat.length, available: 0, unavailable: 0, unknown: 0, disabled: 0 };
        inCat.forEach(h => c[avail(h)]++);
        ['all','available','unavailable','unknown','disabled'].forEach(k => {
            const el = document.getElementById('cnt-' + k);
            if (el) el.textContent = c[k];
        });
        ['total','available','unavailable','unknown','disabled'].forEach(k => {
            const el = document.getElementById('stat-' + k);
            if (el) el.textContent = k === 'total' ? c.all : c[k];
        });
    }

    /* ── Error ────────────────────────────────────────────────── */
    function renderError(msg) {
        document.getElementById('hosts-body').innerHTML =
            `<div class="state-block err"><i class="bi bi-exclamation-triangle"></i><p>${esc(msg)}</p></div>`;
        document.getElementById('total-label').textContent = 'Erro';
    }

    /* ── Loading ──────────────────────────────────────────────── */
    function setLoading(val) {
        const icon = document.getElementById('refresh-icon');
        const btn  = document.getElementById('btn-refresh');
        icon.style.animation = val ? 'spin 1s linear infinite' : '';
        btn.disabled = val;
    }

    /* ── Events ───────────────────────────────────────────────── */
    document.getElementById('search-input').addEventListener('input', e => {
        state.search = e.target.value;
        renderHosts();
    });

    document.getElementById('status-tabs').addEventListener('click', e => {
        const tab = e.target.closest('.status-tab');
        if (!tab) return;
        document.querySelectorAll('.status-tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        state.status = tab.dataset.status;
        renderHosts();
    });

    document.getElementById('panel-cat-tabs').addEventListener('click', e => {
        const tab = e.target.closest('.panel-cat-tab');
        if (!tab) return;
        document.querySelectorAll('.panel-cat-tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        state.category = tab.dataset.cat;
        state.group    = null;

        // groups button + bar only visible in "Todos"
        const btnGroups = document.getElementById('btn-groups');
        const groupsBar = document.getElementById('groups-bar');
        if (state.category === 'all') {
            btnGroups.style.display = '';
        } else {
            btnGroups.style.display  = 'none';
            btnGroups.classList.remove('active');
            groupsBar.style.display  = 'none';
        }

        document.querySelectorAll('.group-chip').forEach(c => c.classList.remove('active'));
        const allChip = document.querySelector('.group-chip[data-gid=""]');
        if (allChip) allChip.classList.add('active');
        renderHosts();
        updateCounts();
    });

    document.getElementById('btn-groups').addEventListener('click', () => {
        const bar  = document.getElementById('groups-bar');
        const btn  = document.getElementById('btn-groups');
        const show = bar.style.display === 'none';
        bar.style.display = show ? 'flex' : 'none';
        btn.classList.toggle('active', show);
    });

    document.getElementById('btn-refresh').addEventListener('click', () => {
        itemsCache.clear();
        load();
    });

    load();
})();
</script>
@endsection