<?php
declare(strict_types=1);

error_reporting(0);
ini_set('display_errors', '0');

require_once __DIR__ . '/api/session.php';
require_once __DIR__ . '/api/config.php';

function painel_json(array $data, int $status = 200): void {
    http_response_code($status);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}

function require_panel_auth(): void {
    if (empty($_SESSION['auth'])) {
        painel_json(['ok' => false, 'error' => 'Não autenticado.'], 401);
    }
}

function table_has_column(PDO $pdo, string $table, string $column): bool {
    try {
        $stmt = $pdo->prepare("SHOW COLUMNS FROM {$table} LIKE ?");
        $stmt->execute([$column]);
        return (bool)$stmt->fetch(PDO::FETCH_ASSOC);
    } catch (Throwable $e) {
        return false;
    }
}

function ensure_schema(PDO $pdo): void {
    $pdo->exec("
        CREATE TABLE IF NOT EXISTS indicadores (
            id BIGINT PRIMARY KEY,
            eixo_id BIGINT NULL,
            p TEXT,
            u TEXT,
            o TEXT,
            i TEXT,
            per TEXT,
            ten TEXT,
            um TEXT,
            metas LONGTEXT,
            realizado LONGTEXT,
            status VARCHAR(50) DEFAULT 'Não Iniciada',
            financeiro_json LONGTEXT,
            justificativa TEXT,
            escopo TEXT,
            vinculo_ppa TEXT,
            riscos_json LONGTEXT,
            objetivos_bsc_json LONGTEXT,
            programas_json LONGTEXT,
            parceiros_json LONGTEXT,
            compromissos_json LONGTEXT,
            boas_praticas_json LONGTEXT,
            licoes_aprendidas_json LONGTEXT
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    ");

    $pdo->exec("
        CREATE TABLE IF NOT EXISTS reports (
            id BIGINT AUTO_INCREMENT PRIMARY KEY,
            indicador_id BIGINT,
            texto TEXT,
            usuario VARCHAR(100),
            data_hora DATETIME DEFAULT CURRENT_TIMESTAMP,
            ano VARCHAR(10) DEFAULT 'Geral'
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    ");

    $pdo->exec("
        CREATE TABLE IF NOT EXISTS eixos (
            id BIGINT AUTO_INCREMENT PRIMARY KEY,
            nome TEXT,
            descricao TEXT
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    ");

    $pdo->exec("
        CREATE TABLE IF NOT EXISTS programas (
            id BIGINT AUTO_INCREMENT PRIMARY KEY,
            eixo_id BIGINT NOT NULL,
            nome VARCHAR(255) NOT NULL,
            descricao TEXT,
            status VARCHAR(50) DEFAULT 'Não Iniciado',
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
    ");

    $additionalColumns = [
        'eixo_id' => "ALTER TABLE indicadores ADD COLUMN eixo_id BIGINT NULL",
        'justificativa' => "ALTER TABLE indicadores ADD COLUMN justificativa TEXT",
        'escopo' => "ALTER TABLE indicadores ADD COLUMN escopo TEXT",
        'vinculo_ppa' => "ALTER TABLE indicadores ADD COLUMN vinculo_ppa TEXT",
        'riscos_json' => "ALTER TABLE indicadores ADD COLUMN riscos_json LONGTEXT",
        'objetivos_bsc_json' => "ALTER TABLE indicadores ADD COLUMN objetivos_bsc_json LONGTEXT",
        'programas_json' => "ALTER TABLE indicadores ADD COLUMN programas_json LONGTEXT",
        'parceiros_json' => "ALTER TABLE indicadores ADD COLUMN parceiros_json LONGTEXT",
        'compromissos_json' => "ALTER TABLE indicadores ADD COLUMN compromissos_json LONGTEXT",
        'boas_praticas_json' => "ALTER TABLE indicadores ADD COLUMN boas_praticas_json LONGTEXT",
        'licoes_aprendidas_json' => "ALTER TABLE indicadores ADD COLUMN licoes_aprendidas_json LONGTEXT"
    ];

    foreach ($additionalColumns as $column => $sql) {
        if (!table_has_column($pdo, 'indicadores', $column)) {
            try {
                $pdo->exec($sql);
            } catch (Throwable $e) {
            }
        }
    }
}

function decode_json_field($value, array $default = []): array {
    if (!is_string($value) || trim($value) === '') {
        return $default;
    }
    $decoded = json_decode($value, true);
    return is_array($decoded) ? $decoded : $default;
}

function sanitize_text($value): string {
    return trim((string)$value);
}

$pdo = pdo();
ensure_schema($pdo);

if (isset($_GET['api'])) {
    require_panel_auth();
    $act = (string)($_GET['api'] ?? '');
    $input = json_decode(file_get_contents('php://input') ?: '', true) ?: [];

    try {
        if ($act === 'get_eixos') {
            $stmt = $pdo->query("SELECT * FROM eixos ORDER BY id ASC");
            painel_json(['ok' => true, 'eixos' => $stmt->fetchAll(PDO::FETCH_ASSOC)]);
        }

        if ($act === 'save_eixo') {
            $nome = sanitize_text($input['nome'] ?? '');
            $desc = sanitize_text($input['descricao'] ?? '');
            if ($nome === '') {
                painel_json(['ok' => false, 'error' => 'Nome obrigatório.'], 400);
            }
            $stmt = $pdo->prepare("INSERT INTO eixos (nome, descricao) VALUES (?, ?)");
            $stmt->execute([$nome, $desc]);
            painel_json(['ok' => true]);
        }

        if ($act === 'del_eixo') {
            $id = (int)($input['id'] ?? 0);
            if ($id <= 0) {
                painel_json(['ok' => false, 'error' => 'ID inválido.'], 400);
            }
            $stmt = $pdo->prepare("DELETE FROM eixos WHERE id = ?");
            $stmt->execute([$id]);
            painel_json(['ok' => true]);
        }

        if ($act === 'get_programas') {
            $stmt = $pdo->query("SELECT * FROM programas ORDER BY id DESC");
            painel_json(['ok' => true, 'programas' => $stmt->fetchAll(PDO::FETCH_ASSOC)]);
        }

        if ($act === 'save_programa') {
            $eixo_id = (int)($input['eixo_id'] ?? 0);
            $nome = sanitize_text($input['nome'] ?? '');
            $descricao = sanitize_text($input['descricao'] ?? '');
            $status = sanitize_text($input['status'] ?? 'Não Iniciado');
            if ($eixo_id <= 0 || $nome === '') {
                painel_json(['ok' => false, 'error' => 'Informe eixo e nome do programa.'], 400);
            }
            $stmt = $pdo->prepare("INSERT INTO programas (eixo_id, nome, descricao, status) VALUES (?, ?, ?, ?)");
            $stmt->execute([$eixo_id, $nome, $descricao, $status]);
            painel_json(['ok' => true]);
        }

        if ($act === 'get') {
            $stmt = $pdo->query("SELECT * FROM indicadores ORDER BY id DESC");
            $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $out = [];
            foreach ($rows as $r) {
                $r['metas'] = decode_json_field($r['metas'] ?? '{}');
                $r['realizado'] = decode_json_field($r['realizado'] ?? '{}');
                $r['financeiro'] = decode_json_field($r['financeiro_json'] ?? '[]');
                $r['riscos'] = decode_json_field($r['riscos_json'] ?? '[]');
                $r['objetivos_bsc'] = decode_json_field($r['objetivos_bsc_json'] ?? '[]');
                $r['programas'] = decode_json_field($r['programas_json'] ?? '[]');
                $r['parceiros'] = decode_json_field($r['parceiros_json'] ?? '[]');
                $r['compromissos'] = decode_json_field($r['compromissos_json'] ?? '[]');
                $r['boas_praticas'] = decode_json_field($r['boas_praticas_json'] ?? '[]');
                $r['licoes_aprendidas'] = decode_json_field($r['licoes_aprendidas_json'] ?? '[]');
                $out[] = $r;
            }
            painel_json(['ok' => true, 'payload' => $out]);
        }

        if ($act === 'save') {
            $payload = $input['payload'] ?? null;
            if (!is_array($payload)) {
                painel_json(['ok' => false, 'error' => 'Payload inválido.'], 400);
            }

            $stmt = $pdo->prepare("
                INSERT INTO indicadores (
                    id, eixo_id, p, u, o, i, per, ten, um, metas, realizado, status, financeiro_json,
                    justificativa, escopo, vinculo_ppa, riscos_json, objetivos_bsc_json, programas_json,
                    parceiros_json, compromissos_json, boas_praticas_json, licoes_aprendidas_json
                ) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)
                ON DUPLICATE KEY UPDATE
                    eixo_id=VALUES(eixo_id),
                    p=VALUES(p),
                    u=VALUES(u),
                    o=VALUES(o),
                    i=VALUES(i),
                    per=VALUES(per),
                    ten=VALUES(ten),
                    um=VALUES(um),
                    metas=VALUES(metas),
                    realizado=VALUES(realizado),
                    status=VALUES(status),
                    financeiro_json=VALUES(financeiro_json),
                    justificativa=VALUES(justificativa),
                    escopo=VALUES(escopo),
                    vinculo_ppa=VALUES(vinculo_ppa),
                    riscos_json=VALUES(riscos_json),
                    objetivos_bsc_json=VALUES(objetivos_bsc_json),
                    programas_json=VALUES(programas_json),
                    parceiros_json=VALUES(parceiros_json),
                    compromissos_json=VALUES(compromissos_json),
                    boas_praticas_json=VALUES(boas_praticas_json),
                    licoes_aprendidas_json=VALUES(licoes_aprendidas_json)
            ");

            foreach ($payload as $i) {
                $id = (int)($i['id'] ?? 0);
                if ($id <= 0) continue;
                $stmt->execute([
                    $id,
                    isset($i['eixo_id']) && $i['eixo_id'] !== '' ? (int)$i['eixo_id'] : null,
                    sanitize_text($i['p'] ?? ''),
                    sanitize_text($i['u'] ?? ''),
                    sanitize_text($i['o'] ?? ''),
                    sanitize_text($i['i'] ?? ''),
                    sanitize_text($i['per'] ?? ''),
                    sanitize_text($i['ten'] ?? ''),
                    sanitize_text($i['um'] ?? ''),
                    json_encode($i['metas'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['realizado'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    sanitize_text($i['status'] ?? 'Não Iniciada'),
                    json_encode($i['financeiro'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    sanitize_text($i['justificativa'] ?? ''),
                    sanitize_text($i['escopo'] ?? ''),
                    sanitize_text($i['vinculo_ppa'] ?? ''),
                    json_encode($i['riscos'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['objetivos_bsc'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['programas'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['parceiros'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['compromissos'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['boas_praticas'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES),
                    json_encode($i['licoes_aprendidas'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
                ]);
            }

            painel_json(['ok' => true]);
        }

        if ($act === 'delete') {
            $id = (int)($input['id'] ?? 0);
            if ($id <= 0) {
                painel_json(['ok' => false, 'error' => 'ID inválido.'], 400);
            }
            $stmt = $pdo->prepare("DELETE FROM indicadores WHERE id = ?");
            $stmt->execute([$id]);
            $stmt = $pdo->prepare("DELETE FROM reports WHERE indicador_id = ?");
            $stmt->execute([$id]);
            painel_json(['ok' => true]);
        }

        if ($act === 'reports') {
            $id = (int)($_GET['id'] ?? 0);
            $stmt = $pdo->prepare("SELECT * FROM reports WHERE indicador_id = ? ORDER BY data_hora DESC");
            $stmt->execute([$id]);
            painel_json(['ok' => true, 'reports' => $stmt->fetchAll(PDO::FETCH_ASSOC)]);
        }

        if ($act === 'save_report') {
            $id = (int)($input['id'] ?? 0);
            $txt = sanitize_text($input['texto'] ?? '');
            $ano = sanitize_text($input['ano'] ?? 'Geral');
            if ($id <= 0 || $txt === '') {
                painel_json(['ok' => false, 'error' => 'Dados inválidos.'], 400);
            }
            $stmt = $pdo->prepare("INSERT INTO reports (indicador_id, texto, usuario, ano) VALUES (?, ?, ?, ?)");
            $stmt->execute([$id, $txt, $_SESSION['username'] ?? 'Admin', $ano]);
            painel_json(['ok' => true]);
        }

        painel_json(['ok' => false, 'error' => 'Ação inválida.'], 400);
    } catch (Throwable $e) {
        error_log('Erro painel.php API: ' . $e->getMessage());
        painel_json(['ok' => false, 'error' => 'Erro interno no servidor.'], 500);
    }
}

if (empty($_SESSION['auth'])) {
    header('Location: /api/login_test.html');
    exit;
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SEDET 360 - Painel Estratégico</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .screen { display: none; opacity: 0; transition: opacity 0.3s ease; }
        .screen.active { display: block; opacity: 1; }
        body { background-color: #f8fafc; color: #0f172a; font-family: sans-serif; font-size: 14px; }
        .cell-target { font-weight: 800; color: #1e293b; font-size: 13px; line-height: 1.2; }
        .cell-real { font-weight: 700; color: #2563eb; font-size: 13px; border-top: 1px solid #e2e8f0; margin-top: 4px; padding-top: 2px; }
        .edit-input { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; font-weight: bold; width: 100%; color: #1e293b; }
        .report-card { background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #2563eb; padding: 16px; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .status-select { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1); cursor: pointer; outline: none; width: 100%; text-align: center; }
        .fin-row { background: #fff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 15px; margin-bottom: 10px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .fin-label { font-size: 10px; font-weight: bold; color: #64748b; text-transform: uppercase; margin-bottom: 4px; display: block; }
        .fin-input { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px; font-weight: bold; font-size: 13px; color: #1e293b; }
        .btn-remove-fin { position: absolute; top: 10px; right: 10px; color: #ef4444; font-weight: bold; cursor: pointer; font-size: 18px; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 50%; }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
<header class="bg-slate-900 text-white p-5 shadow-xl sticky top-0 z-50">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center gap-4 cursor-pointer" onclick="navegar('tela0')">
            <div class="bg-blue-600 px-3 py-1 rounded font-black text-xl">SEDET</div>
            <div>
                <h1 class="text-lg font-bold uppercase">Monitoramento PEI</h1>
                <p class="text-blue-400 text-xs font-bold uppercase tracking-widest">Painel Estratégico</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="navegar('telaEixos')" class="bg-slate-700 hover:bg-slate-600 px-3 py-2 rounded-lg font-bold text-xs uppercase transition">Eixos</button>
            <button onclick="navegar('tela0')" class="text-slate-300 hover:text-white px-3 font-bold uppercase text-xs">Início</button>
            <button onclick="navegar('tela1')" class="text-slate-300 hover:text-white px-3 font-bold uppercase text-xs">Lista</button>
            <button onclick="preparaNovo()" class="bg-green-600 px-4 py-2 rounded-lg font-bold text-xs hover:bg-green-500 uppercase">+ Adicionar</button>
            <button onclick="logoutPainel()" class="bg-red-600 px-4 py-2 rounded-lg font-bold text-xs hover:bg-red-500 uppercase">Sair</button>
        </div>
    </div>
</header>

<div id="tela0" class="screen active container mx-auto p-6">
    <div class="mb-10">
        <h2 class="text-2xl font-black text-slate-800 uppercase mb-6 border-b pb-2">Mapa Estratégico <span class="text-xs text-slate-400 font-normal normal-case ml-2">(Clique para filtrar)</span></h2>
        <div id="mapaContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"></div>
    </div>
    <div class="bg-white rounded-3xl shadow-xl p-8 border border-slate-200">
        <h2 class="text-xl font-black text-slate-800 uppercase mb-6">Monitoramento Geral</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-slate-100 p-6 rounded-2xl text-center border-2 border-slate-200 cursor-pointer hover:bg-slate-200 transition duration-300" onclick="filtrarStatus('Todos')">
                <div class="text-sm font-bold text-slate-500 uppercase mb-2">Total de Indicadores</div>
                <div id="dashTotal" class="text-5xl font-black text-slate-900">0</div>
            </div>
            <div class="col-span-2 grid grid-cols-2 gap-4">
                <div class="p-4 rounded-xl border flex justify-between items-center cursor-pointer transition duration-300 hover:scale-105 hover:shadow-lg bg-emerald-50 border-emerald-100 hover:bg-emerald-100" onclick="filtrarStatus('Concluidos')"><span class="text-emerald-800 font-bold uppercase text-xs">Concluídos/Ativos</span><span id="dashConcluido" class="text-2xl font-black text-emerald-600">0</span></div>
                <div class="p-4 rounded-xl border flex justify-between items-center cursor-pointer transition duration-300 hover:scale-105 hover:shadow-lg bg-blue-50 border-blue-100 hover:bg-blue-100" onclick="filtrarStatus('Andamento')"><span class="text-blue-800 font-bold uppercase text-xs">Em Andamento</span><span id="dashAndamento" class="text-2xl font-black text-blue-600">0</span></div>
                <div class="p-4 rounded-xl border flex justify-between items-center cursor-pointer transition duration-300 hover:scale-105 hover:shadow-lg bg-yellow-50 border-yellow-100 hover:bg-yellow-100" onclick="filtrarStatus('Atencao')"><span class="text-yellow-800 font-bold uppercase text-xs">Atenção/Início</span><span id="dashIniciado" class="text-2xl font-black text-yellow-600">0</span></div>
                <div class="p-4 rounded-xl border flex justify-between items-center cursor-pointer transition duration-300 hover:scale-105 hover:shadow-lg bg-slate-50 border-slate-200 hover:bg-slate-100" onclick="filtrarStatus('Parados')"><span class="text-slate-500 font-bold uppercase text-xs">Paralisados/Outros</span><span id="dashNaoIniciado" class="text-2xl font-black text-slate-400">0</span></div>
            </div>
        </div>
    </div>
</div>

<div id="telaFiltro" class="screen container mx-auto p-6">
    <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200">
        <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-blue-50">
            <div><span class="text-xs font-bold text-blue-500 uppercase tracking-widest">Filtro Ativo</span><h2 id="tituloFiltro" class="text-2xl font-black text-blue-900 uppercase">...</h2></div>
            <button onclick="navegar('tela0')" class="bg-white text-blue-600 px-4 py-2 rounded-lg font-bold text-xs uppercase border border-blue-100 shadow-sm hover:bg-blue-50">Voltar ao Mapa</button>
        </div>
        <div class="overflow-x-auto"><table class="w-full text-left"><thead id="theadFiltro" class="bg-slate-900 text-white text-xs uppercase font-black"></thead><tbody id="tabelaFiltroCorpo"></tbody></table></div>
    </div>
</div>

<div id="tela1" class="screen container mx-auto p-6">
    <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200">
        <div class="p-6 border-b border-slate-100 flex justify-between items-center"><h2 class="text-xl font-black text-slate-800 uppercase">Lista Completa</h2><button onclick="location.reload()" class="text-blue-600 font-bold text-xs uppercase hover:underline">Atualizar</button></div>
        <div class="overflow-x-auto"><table class="w-full text-left"><thead id="theadPrincipal" class="bg-slate-900 text-white text-xs uppercase font-black"></thead><tbody id="tabelaCorpo"></tbody></table></div>
    </div>
</div>

<div id="telaEixos" class="screen container mx-auto p-6">
    <div class="max-w-4xl mx-auto bg-white rounded-3xl shadow-xl p-8 border border-slate-200">
        <div class="flex justify-between items-center mb-8"><h2 class="text-2xl font-black text-slate-900 uppercase">Gerenciar Eixos</h2><button onclick="navegar('tela0')" class="text-slate-400 hover:text-red-500 font-bold text-sm uppercase">Voltar</button></div>
        <div class="bg-slate-100 p-6 rounded-xl mb-8"><h3 class="text-xs font-black text-blue-800 uppercase mb-4">Novo Eixo</h3><div class="grid grid-cols-3 gap-4"><input id="novoEixoNome" placeholder="Nome" class="edit-input col-span-1"><input id="novoEixoDesc" placeholder="Descrição" class="edit-input col-span-2"></div><button onclick="salvarEixo()" class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg font-bold uppercase text-xs hover:bg-blue-500">Adicionar</button></div>
        <div id="listaEixos" class="space-y-3"></div>
    </div>
</div>

<div id="tela2" class="screen container mx-auto p-6">
    <div class="max-w-3xl mx-auto bg-white rounded-3xl shadow-xl p-8 border border-slate-200">
        <div class="flex justify-between items-center mb-8"><h2 class="text-2xl font-black text-slate-900 uppercase">Novo Indicador</h2><button onclick="navegar('tela1')" class="text-slate-400 hover:text-red-500 font-bold text-sm uppercase">Cancelar</button></div>
        <form onsubmit="salvarNovo(event)" class="space-y-4">
            <div class="grid grid-cols-2 gap-4"><div><label class="text-xs font-bold text-slate-500 uppercase">Perspectiva</label><select id="addP" class="edit-input" required><option value="">Carregando...</option></select></div><div><label class="text-xs font-bold text-slate-500 uppercase">Unidade / Setor</label><input id="addU" class="edit-input" required></div></div>
            <div><label class="text-xs font-bold text-slate-500 uppercase">Objetivo</label><input id="addO" class="edit-input" required></div><div><label class="text-xs font-bold text-slate-500 uppercase">Indicador</label><input id="addI" class="edit-input" required></div>
            <div class="grid grid-cols-3 gap-4"><div><label class="text-xs font-bold text-slate-500 uppercase">Periodicidade</label><input id="addPer" class="edit-input"></div><div><label class="text-xs font-bold text-slate-500 uppercase">Tendência</label><input id="addTen" class="edit-input"></div><div><label class="text-xs font-bold text-slate-500 uppercase">U. Medida</label><input id="addUM" class="edit-input"></div></div>
            <div class="bg-blue-50 p-6 rounded-xl mt-4"><h3 class="text-xs font-black text-blue-800 uppercase mb-4">Metas</h3><div id="metasContainer" class="grid grid-cols-6 gap-2"></div></div>
            <div class="flex justify-end gap-3 pt-6 border-t mt-4"><button type="submit" class="bg-emerald-600 text-white px-8 py-3 rounded-xl font-bold uppercase hover:bg-emerald-500 shadow-lg">Salvar</button></div>
        </form>
    </div>
</div>

<div id="tela3" class="screen container mx-auto p-6">
    <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200 min-h-[80vh] flex flex-col">
        <div class="p-8 border-b bg-slate-50 flex justify-between items-start"><div id="detHeader"></div><button onclick="voltarDoDetalhe()" class="text-slate-400 hover:text-blue-600 font-bold text-sm uppercase flex items-center gap-2"><span>← Voltar</span></button></div>
        <div class="flex-1 flex flex-col lg:flex-row">
            <div class="w-full lg:w-2/3 p-8 border-r border-slate-100">
                <div class="bg-slate-50 p-6 rounded-2xl border mb-8">
                    <h3 class="font-black text-blue-900 uppercase text-xs mb-4">Planejamento e Alinhamento Estratégico (BSC)</h3>
                    <div class="space-y-4">
                        <div><label class="text-[10px] font-bold text-slate-500 uppercase">Justificativa</label><textarea id="detJustificativa" class="edit-input h-20" onchange="updateContext('justificativa', this.value)"></textarea></div>
                        <div><label class="text-[10px] font-bold text-slate-500 uppercase">Vínculo PPA / Plano de Governo</label><input id="detPpa" class="edit-input" onchange="updateContext('vinculo_ppa', this.value)"></div>
                    </div>
                </div>
                <div class="bg-blue-50 p-6 rounded-2xl border border-blue-100 mb-8">
                    <div class="flex justify-between items-center mb-4"><h3 class="font-black text-blue-800 uppercase text-xs">Acompanhamento Físico-Financeiro</h3><button onclick="addFinanceiroRow()" class="bg-blue-600 text-white px-3 py-1 rounded text-xs font-bold">+ Adicionar Programa</button></div>
                    <div id="financeiroContainer"></div>
                </div>
                <div class="bg-white border rounded-3xl p-4 shadow-sm h-72 mb-8"><canvas id="chartDetail"></canvas></div>
                <h3 class="text-sm font-black text-slate-500 uppercase mb-4 tracking-widest border-b pb-2">Lançamento de Realizado</h3>
                <div class="grid grid-cols-3 gap-4" id="inputsGrid"></div>
                <div class="bg-red-50 p-6 rounded-2xl border border-red-100 mt-8">
                    <h3 class="font-black text-red-800 uppercase text-xs mb-4">Gestão de Riscos (ISO 31000)</h3>
                    <div id="riscosContainer"></div>
                    <button onclick="addRisco()" class="w-full mt-4 bg-red-600 text-white py-2 rounded text-xs font-bold">Mapear Novo Risco</button>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-8 bg-slate-50 flex flex-col">
                <h3 class="text-sm font-black text-slate-500 uppercase mb-4 tracking-widest">Histórico</h3>
                <div id="reportList" class="flex-1 overflow-y-auto mb-4 space-y-3 pr-2 max-h-96"></div>
                <div class="mt-auto bg-white p-4 rounded-xl border shadow-sm">
                    <label class="block text-xs font-bold text-slate-500 mb-2 uppercase">Referência:</label>
                    <select id="reportAno" class="w-full p-2 border rounded-lg mb-2 font-bold text-blue-700"></select>
                    <textarea id="reportTxt" class="w-full p-3 border rounded-lg text-sm h-24 focus:border-blue-500 outline-none resize-none mb-3" placeholder="Texto..."></textarea>
                    <button onclick="saveReport()" class="w-full bg-blue-600 text-white py-2 rounded-lg font-bold uppercase hover:bg-blue-700 shadow transition text-xs">Salvar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const CONFIG_PAINEL = { anoInicial: 2025, quantidadeAnos: 6 };
function gerarAnos() { return Array.from({ length: CONFIG_PAINEL.quantidadeAnos }, (_, i) => CONFIG_PAINEL.anoInicial + i); }
let ANOS = gerarAnos();
const STATUS_LIST = ['Ativo', 'Atrasada', 'Concluida', 'Cancelada', 'Em Andamento', 'Em Projeto', 'Não Iniciada', 'Paralisada', 'Suspensa'];
let db = [], curId = null, chart = null, eixos = [], programas = [], ultimaTelaLista = 'tela1';

function renderMetasNovoIndicador() {
    const container = document.getElementById('metasContainer');
    if (!container) return;
    container.className = ANOS.length <= 6 ? 'grid grid-cols-6 gap-2' : 'grid grid-cols-4 md:grid-cols-6 gap-2';
    container.innerHTML = ANOS.map(ano => `<div><label class="block text-[10px] font-bold text-blue-500 text-center mb-1">${ano}</label><input id="nM${ano}" class="edit-input text-center" placeholder="0"></div>`).join('');
}

function renderHeaders() {
    const principal = document.getElementById('theadPrincipal');
    const filtro = document.getElementById('theadFiltro');
    if (!principal || !filtro) return;
    principal.innerHTML = `<tr><th class="p-6 text-sm">Unidade / Indicador</th>${ANOS.map(() => '<th class="p-3 text-center border-l border-slate-700">Ano</th>').join('')}<th class="p-3 text-center border-l border-slate-700 w-40">Status</th><th class="p-3 text-center border-l border-slate-700">Ações</th></tr><tr><th class="p-2 text-xs bg-slate-800"></th>${ANOS.map(a => `<th class="p-2 text-center border-l border-slate-700 bg-slate-800">${a}</th>`).join('')}<th class="p-2 bg-slate-800"></th><th class="p-2 bg-slate-800"></th></tr>`;
    filtro.innerHTML = `<tr><th class="p-6 text-sm">Unidade / Indicador</th>${ANOS.slice(0, Math.min(ANOS.length, 2)).map(a => `<th class="p-3 text-center">${a}</th>`).join('')}<th class="p-3 text-center">Status</th><th class="p-3 text-center">Ações</th></tr>`;
}

function renderReportAnoOptions() {
    const select = document.getElementById('reportAno');
    if (!select) return;
    select.innerHTML = '<option value="Geral">Geral</option>' + ANOS.map(a => `<option value="${a}">${a}</option>`).join('');
}

function getStatusColor(st) {
    switch (st) {
        case 'Ativo': return 'bg-emerald-100 text-emerald-700';
        case 'Concluida': return 'bg-emerald-200 text-emerald-800';
        case 'Em Andamento': return 'bg-blue-100 text-blue-700';
        case 'Em Projeto': return 'bg-purple-100 text-purple-700';
        case 'Atrasada': return 'bg-red-100 text-red-700';
        case 'Cancelada': return 'bg-gray-100 text-gray-500';
        case 'Paralisada': return 'bg-orange-100 text-orange-700';
        case 'Suspensa': return 'bg-yellow-100 text-yellow-700';
        default: return 'bg-slate-100 text-slate-500';
    }
}

function navegar(telaId) {
    document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
    const tela = document.getElementById(telaId);
    if (tela) tela.classList.add('active');
    window.scrollTo(0, 0);
    if (telaId === 'tela0') renderMapa();
    if (telaId === 'tela1') { ultimaTelaLista = 'tela1'; renderTable(db, 'tabelaCorpo'); }
    if (telaId === 'telaEixos') carregarEixos();
}

function voltarDoDetalhe() { navegar(ultimaTelaLista); }
async function logoutPainel() { try { await fetch('/api/logout.php', { credentials: 'include' }); } catch (e) {} window.location.href = '/api/login_test.html'; }

async function req(act, body = null) {
    const opt = body ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) } : {};
    try {
        const r = await fetch(`?api=${act}` + (curId ? `&id=${curId}` : ''), opt);
        return await r.json();
    } catch (e) {
        return { ok: false, error: 'Falha de comunicação.' };
    }
}

async function carregarEixos() {
    const res = await req('get_eixos');
    if (res.ok && res.eixos) {
        eixos = res.eixos;
        renderListaEixos();
        atualizarSelectEixos();
        renderMapa();
    }
}

async function carregarProgramas() {
    const res = await req('get_programas');
    if (res.ok && res.programas) programas = res.programas;
}

function renderMapa() {
    const mapa = document.getElementById('mapaContainer');
    if (!mapa) return;
    mapa.innerHTML = eixos.length ? eixos.map(e => `<div class="bg-white p-6 rounded-xl shadow-lg border border-slate-100 flex flex-col items-center justify-center text-center hover:scale-105 transition duration-300 cursor-pointer hover:border-blue-300 hover:shadow-xl" onclick="filtrarEixo('${String(e.nome).replace(/'/g, "\\'")}')"><h3 class="text-lg font-black text-blue-900 mb-2">${e.nome}</h3><p class="text-xs text-slate-500">${e.descricao || ''}</p></div>`).join('') : '<div class="col-span-4 text-center text-slate-400">Sem eixos.</div>';
    calcularDashboard();
}

function filtrarEixo(nome) {
    ultimaTelaLista = 'telaFiltro';
    const filtrados = db.filter(d => d.p === nome);
    document.getElementById('tituloFiltro').innerText = 'Perspectiva: ' + nome;
    renderTable(filtrados, 'tabelaFiltroCorpo', true);
    document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
    document.getElementById('telaFiltro').classList.add('active');
    window.scrollTo(0, 0);
}

function filtrarStatus(grupo) {
    ultimaTelaLista = 'telaFiltro';
    let filtrados = [];
    let titulo = '';
    if (grupo === 'Todos') { filtrados = db; titulo = 'Todos os Indicadores'; }
    else if (grupo === 'Concluidos') { filtrados = db.filter(d => d.status === 'Concluida' || d.status === 'Ativo'); titulo = 'Concluídos / Ativos'; }
    else if (grupo === 'Andamento') { filtrados = db.filter(d => d.status === 'Em Andamento'); titulo = 'Em Andamento'; }
    else if (grupo === 'Atencao') { filtrados = db.filter(d => d.status === 'Em Projeto' || d.status === 'Não Iniciada' || d.status === 'Atrasada'); titulo = 'Atenção / Início'; }
    else if (grupo === 'Parados') { filtrados = db.filter(d => d.status === 'Paralisada' || d.status === 'Suspensa' || d.status === 'Cancelada'); titulo = 'Paralisados / Outros'; }
    document.getElementById('tituloFiltro').innerText = titulo;
    renderTable(filtrados, 'tabelaFiltroCorpo', true);
    document.querySelectorAll('.screen').forEach(el => el.classList.remove('active'));
    document.getElementById('telaFiltro').classList.add('active');
    window.scrollTo(0, 0);
}

function renderTable(dados, tabelaId, isFiltro = false) {
    const tbody = document.getElementById(tabelaId);
    if (!tbody) return;
    const anosExibidos = isFiltro ? ANOS.slice(0, Math.min(ANOS.length, 2)) : ANOS;
    tbody.innerHTML = dados.map(d => `<tr class="border-b hover:bg-slate-50 cursor-pointer transition group" onclick="abrirMonitoramento(${d.id})"><td class="p-4 pl-6"><div class="text-[10px] font-black text-blue-600 uppercase tracking-widest">${d.u || ''}</div><div class="font-bold text-slate-800 leading-tight group-hover:text-blue-700">${d.i || ''}</div><div class="text-[10px] text-slate-400 mt-1 font-bold uppercase tracking-wider">${d.p || ''}</div></td>${anosExibidos.map(a => `<td class="text-center p-2 border-l border-slate-100"><div class="cell-target">${(d.metas && d.metas[a] !== undefined) ? d.metas[a] : '-'}</div><div class="cell-real">${(d.realizado && d.realizado[a] !== undefined) ? d.realizado[a] : 0}</div></td>`).join('')}<td class="text-center p-2 border-l border-slate-100" onclick="event.stopPropagation()"><select onchange="updateStatus(${d.id}, this.value)" class="status-select ${getStatusColor(d.status)}">${STATUS_LIST.map(st => `<option value="${st}" ${d.status === st ? 'selected' : ''}>${st}</option>`).join('')}</select></td><td class="text-center p-2 border-l border-slate-100"><button onclick="deletarIndicador(${d.id}, event)" class="text-red-400 hover:text-red-600 font-bold text-xs uppercase p-2 hover:bg-red-50 rounded">Excluir</button></td></tr>`).join('');
}

function updateStatus(id, novoStatus) {
    const item = db.find(x => x.id == id);
    if (item) {
        item.status = novoStatus;
        req('save', { payload: db });
        if (document.getElementById('tela1').classList.contains('active')) renderTable(db, 'tabelaCorpo');
        calcularDashboard();
    }
}

function calcularDashboard() {
    document.getElementById('dashTotal').textContent = db.length;
    let concluidos = 0, iniciados = 0, andamento = 0, naoIniciados = 0;
    db.forEach(d => {
        const st = d.status;
        if (st === 'Concluida' || st === 'Ativo') concluidos++;
        else if (st === 'Em Andamento') andamento++;
        else if (st === 'Em Projeto' || st === 'Não Iniciada' || st === 'Atrasada') iniciados++;
        else naoIniciados++;
    });
    document.getElementById('dashConcluido').textContent = concluidos;
    document.getElementById('dashAndamento').textContent = andamento;
    document.getElementById('dashIniciado').textContent = iniciados;
    document.getElementById('dashNaoIniciado').textContent = naoIniciados;
}

function renderListaEixos() {
    document.getElementById('listaEixos').innerHTML = eixos.map(e => `<div class="flex justify-between items-center bg-slate-50 p-3 rounded-lg border"><div><div class="font-bold text-sm">${e.nome}</div><div class="text-xs text-slate-500">${e.descricao || ''}</div></div><button onclick="deletarEixo(${e.id})" class="text-red-400 hover:text-red-600 font-bold text-xs uppercase">Excluir</button></div>`).join('');
}

function atualizarSelectEixos() {
    const select = document.getElementById('addP');
    if (!select) return;
    select.innerHTML = '<option value="">Selecione...</option>' + eixos.map(e => `<option value="${e.id}">${e.nome}</option>`).join('');
}

async function salvarEixo() {
    const nome = document.getElementById('novoEixoNome').value;
    const desc = document.getElementById('novoEixoDesc').value;
    if (!nome) return alert('Nome obrigatório');
    await req('save_eixo', { nome, descricao: desc });
    document.getElementById('novoEixoNome').value = '';
    document.getElementById('novoEixoDesc').value = '';
    carregarEixos();
}

async function deletarEixo(id) {
    if (confirm('Tem certeza?')) {
        await req('del_eixo', { id });
        carregarEixos();
    }
}

async function deletarIndicador(id, event) {
    event.stopPropagation();
    if (confirm('Tem certeza?')) {
        await req('delete', { id });
        const res = await req('get');
        if (res.ok && res.payload) {
            db = res.payload;
            renderTable(db, 'tabelaCorpo');
            calcularDashboard();
        }
    }
}

function preparaNovo() {
    carregarEixos();
    document.querySelectorAll('#tela2 input').forEach(i => i.value = '');
    renderMetasNovoIndicador();
    navegar('tela2');
}

function salvarNovo(e) {
    e.preventDefault();
    const eixoSelecionado = document.getElementById('addP').value;
    const eixoObj = eixos.find(e => String(e.id) === String(eixoSelecionado));
    const n = {
        id: Date.now(),
        p: eixoObj ? eixoObj.nome : '',
        eixo_id: eixoObj ? eixoObj.id : null,
        u: document.getElementById('addU').value,
        o: document.getElementById('addO').value,
        i: document.getElementById('addI').value,
        per: document.getElementById('addPer').value,
        ten: document.getElementById('addTen').value,
        um: document.getElementById('addUM').value,
        status: 'Não Iniciada',
        metas: {},
        realizado: {},
        financeiro: [],
        justificativa: '',
        escopo: '',
        vinculo_ppa: '',
        riscos: [],
        objetivos_bsc: [],
        programas: [],
        parceiros: [],
        compromissos: [],
        boas_praticas: [],
        licoes_aprendidas: []
    };
    ANOS.forEach(a => {
        const el = document.getElementById('nM' + a);
        const v = el ? el.value.replace(',', '.') : '';
        n.metas[a] = (v === '' || isNaN(v)) ? 0 : parseFloat(v);
        n.realizado[a] = 0;
    });
    db.unshift(n);
    req('save', { payload: db }).then((res) => {
        if (res && res.ok) {
            navegar('tela1');
            renderTable(db, 'tabelaCorpo');
            calcularDashboard();
        } else {
            alert(res?.error || 'Falha ao salvar.');
        }
    });
}

function abrirMonitoramento(id) {
    curId = id;
    const d = db.find(x => x.id == id);
    if (!d) return;
    document.getElementById('detHeader').innerHTML = `<div><div class="flex gap-2 mb-2"><span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest">${d.u || ''}</span><span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-bold uppercase">${d.p || ''}</span></div><h2 class="text-3xl font-black text-slate-900 mt-3">${d.i || ''}</h2><p class="text-slate-500 mt-2 font-medium italic border-l-4 border-slate-200 pl-3">${d.o || ''}</p></div>`;
    renderFinanceiroRows();
    const inputsGrid = document.getElementById('inputsGrid');
    if (inputsGrid) {
        inputsGrid.innerHTML = ANOS.map(a => `<div class="bg-slate-100 p-4 rounded-xl text-center border hover:border-blue-300 transition"><p class="text-lg font-black text-slate-500 mb-2">${a} (Meta: ${(d.metas && d.metas[a] !== undefined) ? d.metas[a] : 0})</p><input type="number" class="w-full text-center bg-white border-2 border-blue-200 rounded-xl text-blue-700 font-black text-4xl p-4 shadow-sm focus:ring-4 focus:ring-blue-500 outline-none" value="${(d.realizado && d.realizado[a] !== undefined) ? d.realizado[a] : 0}" onchange="updateVal(${d.id}, ${a}, this.value)"></div>`).join('');
    }
    document.getElementById('detJustificativa').value = d.justificativa || '';
    document.getElementById('detPpa').value = d.vinculo_ppa || '';
    navegar('tela3');
    loadReports();
    renderReportAnoOptions();
    setTimeout(() => initChart(d), 50);
    renderRiscos();
}

function renderFinanceiroRows() {
    const d = db.find(x => x.id == curId);
    const container = document.getElementById('financeiroContainer');
    if (!container || !d) return;
    if (!d.financeiro || d.financeiro.length === 0) {
        container.innerHTML = '<div class="text-center text-xs text-blue-400 italic">Nenhum programa financeiro adicionado.</div>';
        return;
    }
    container.innerHTML = d.financeiro.map((f, idx) => `<div class="fin-row"><span class="btn-remove-fin" onclick="removeFinanceiroRow(${idx})">×</span><div class="mb-3"><label class="fin-label">Programa de Trabalho</label><input type="text" class="fin-input bg-blue-50" value="${f.programa || ''}" placeholder="Ex: Gestão Administrativa..." onchange="updateFinanceiroRow(${idx}, 'programa', this.value)"></div><div class="grid grid-cols-5 gap-2"><div><label class="fin-label">Autorizado por LEI</label><input type="text" class="fin-input" value="${f.lei || ''}" onchange="updateFinanceiroRow(${idx}, 'lei', this.value)"></div><div><label class="fin-label">Despesa Autorizada</label><input type="text" class="fin-input" value="${f.autorizada || ''}" onchange="updateFinanceiroRow(${idx}, 'autorizada', this.value)"></div><div><label class="fin-label">Empenhado</label><input type="text" class="fin-input" value="${f.empenhado || ''}" onchange="updateFinanceiroRow(${idx}, 'empenhado', this.value)"></div><div><label class="fin-label">Liquidado</label><input type="text" class="fin-input" value="${f.liquidado || ''}" onchange="updateFinanceiroRow(${idx}, 'liquidado', this.value)"></div><div><label class="fin-label">Planejado</label><input type="text" class="fin-input" value="${f.planejado || ''}" onchange="updateFinanceiroRow(${idx}, 'planejado', this.value)"></div></div></div>`).join('');
}

function addFinanceiroRow() {
    const d = db.find(x => x.id == curId);
    if (!d) return;
    if (!d.financeiro) d.financeiro = [];
    d.financeiro.push({ programa: '', lei: '', autorizada: '', empenhado: '', liquidado: '', planejado: '' });
    renderFinanceiroRows();
    req('save', { payload: db });
}

function removeFinanceiroRow(idx) {
    const d = db.find(x => x.id == curId);
    if (!d || !d.financeiro) return;
    d.financeiro.splice(idx, 1);
    renderFinanceiroRows();
    req('save', { payload: db });
}

function updateFinanceiroRow(idx, field, value) {
    const d = db.find(x => x.id == curId);
    if (!d || !d.financeiro || !d.financeiro[idx]) return;
    d.financeiro[idx][field] = value;
    req('save', { payload: db });
}

function updateVal(id, a, val) {
    const item = db.find(x => x.id == id);
    if (!item) return;
    item.realizado[a] = parseFloat(val) || 0;
    initChart(item);
    req('save', { payload: db });
    calcularDashboard();
}

async function loadReports() {
    const list = document.getElementById('reportList');
    if (!list) return;
    list.innerHTML = '<div class="text-center text-slate-400 py-4 text-xs">Carregando...</div>';
    const res = await req('reports');
    list.innerHTML = res.ok && res.reports && res.reports.length ? res.reports.map(r => `<div class="report-card"><div class="flex justify-between items-center mb-2"><span class="bg-slate-200 text-slate-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider">${r.ano || 'GERAL'}</span><span class="text-[10px] text-slate-400 font-bold">${new Date(r.data_hora).toLocaleDateString()}</span></div><div class="text-slate-800 text-sm leading-relaxed">${r.texto}</div><div class="text-[10px] text-slate-400 mt-2 font-bold uppercase">Por: ${r.usuario || 'Admin'}</div></div>`).join('') : '<div class="text-center text-slate-400 py-10 italic text-sm">Vazio.</div>';
}

async function saveReport() {
    const txt = document.getElementById('reportTxt').value.trim();
    const ano = document.getElementById('reportAno').value;
    if (txt) {
        const res = await req('save_report', { id: curId, texto: txt, ano: ano });
        if (res.ok) {
            document.getElementById('reportTxt').value = '';
            loadReports();
        }
    }
}

function initChart(d) {
    const canvas = document.getElementById('chartDetail');
    if (!canvas) return;
    if (chart) chart.destroy();
    chart = new Chart(canvas, {
        type: 'line',
        data: { labels: ANOS, datasets: [{ label: 'Meta', data: ANOS.map(a => (d.metas && d.metas[a] !== undefined) ? d.metas[a] : 0), borderColor: '#94a3b8', borderDash: [5,5], tension: 0.3 }, { label: 'Realizado', data: ANOS.map(a => (d.realizado && d.realizado[a] !== undefined) ? d.realizado[a] : 0), borderColor: '#2563eb', backgroundColor: 'rgba(37,99,235,0.1)', fill: true, tension: 0.3 }] },
        options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'METAS - Projetadas x Realizadas', font: { size: 18, weight: 'bold' }, color: '#1e293b', padding: { top: 10, bottom: 30 } } } }
    });
}

function updateContext(field, value) {
    const item = db.find(x => x.id == curId);
    if (item) {
        item[field] = value;
        req('save', { payload: db });
    }
}

function addRisco() {
    const item = db.find(x => x.id == curId);
    if (!item) return;
    if (!item.riscos) item.riscos = [];
    item.riscos.push({ desc: 'Novo Risco', impacto: 'Médio', plano: '' });
    renderRiscos();
    req('save', { payload: db });
}

function renderRiscos() {
    const item = db.find(x => x.id == curId);
    const container = document.getElementById('riscosContainer');
    if (!container || !item) return;
    container.innerHTML = (item.riscos || []).map((r, i) => `<div class="bg-white p-3 rounded shadow-sm border-l-4 border-red-500 mb-2"><input class="w-full font-bold text-xs outline-none" value="${r.desc || ''}" onchange="updateRisco(${i}, 'desc', this.value)"><select class="text-[10px] mt-1 text-red-600" onchange="updateRisco(${i}, 'impacto', this.value)"><option ${r.impacto === 'Alto' ? 'selected' : ''}>Alto</option><option ${r.impacto === 'Médio' ? 'selected' : ''}>Médio</option><option ${r.impacto === 'Baixo' ? 'selected' : ''}>Baixo</option></select></div>`).join('');
}

function updateRisco(idx, field, val) {
    const item = db.find(x => x.id == curId);
    if (!item || !item.riscos || !item.riscos[idx]) return;
    item.riscos[idx][field] = val;
    req('save', { payload: db });
}

window.onload = async () => {
    renderHeaders();
    renderMetasNovoIndicador();
    renderReportAnoOptions();
    const [resIndicadores] = await Promise.all([req('get'), carregarEixos(), carregarProgramas()]);
    if (resIndicadores.ok && resIndicadores.payload) db = resIndicadores.payload;
    renderTable(db, 'tabelaCorpo');
    calcularDashboard();
};
</script>
</body>
</html>