<?php
session_start();
require 'conexao.php';
require 'valida_licenca.php';

// Proteção: Somente Administrador
if (!isset($_SESSION['usuario_id'])) {
    if (isset($_COOKIE['ultimo_slug_acessado']) && $_COOKIE['ultimo_slug_acessado'] !== 'admin') {
        $slug_salvo = $_COOKIE['ultimo_slug_acessado'];
        header("Location: /" . $slug_salvo);
    } else {
        header("Location: /");
    }
    exit;
}   

$id_empresa_sessao = $_SESSION['id_empresa_logada'] ?? 1;
$cor_primaria = $_SESSION['cor_primaria'] ?? '#00f2fe';
$logo_url = $_SESSION['logo_url'] ?? 'img/logo.png';
$nome_empresa = $_SESSION['nome_empresa'] ?? 'Consult JA Vision';

$mensagem = '';

// =========================================================================
// CHAVES FIXAS PARA AGILIZAR O SEU TRABALHO
// =========================================================================
$chave_api_padrao = "Xux863Be2JHfBQEfOHCats049H0sTs";
$chave_group_padrao = "iCcleTn2WW";

// =========================================================================
// 1. Processa o Cadastro (INSERT) ou Edição (UPDATE) com CLONE ABSOLUTO
// =========================================================================
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $id_camera = $_POST['id_camera'] ?? ''; 
    $id_loja = $_POST['id_loja'];
    $nome_camera = $_POST['nome_camera'];
    $api_key = $_POST['api_key'];
    $group_key = $_POST['group_key'];
    $visivel_cliente = $_POST['visivel_cliente']; 
    
    // NOVO: Puxa o status da câmera (1 = Ativa, 0 = Desativada)
    $status_camera = $_POST['status_camera'] ?? 1;
    
    $rtsp_link = trim($_POST['rtsp_link']);
    $modo_gravacao = $_POST['modo_gravacao'];
    $dias_retencao = $_POST['dias_retencao'];
    $timeout_gravacao = !empty($_POST['timeout_gravacao']) ? $_POST['timeout_gravacao'] : '5'; 
    
    $codec_video = $_POST['codec_video'] ?? 'copy';
    
    // A GAMBI PREMIUM: Agendamento Inteligente e Áudio
    $modo_hibrido_post = $_POST['modo_hibrido'] ?? 0;
    $captura_audio = $_POST['captura_audio'] ?? 0; // Puxa a chave do Áudio

    // =========================================================================
    // NOVO: O GERADOR DE MONITOR ID AMIGÁVEL (NOME DA CÂMERA + HASH DE SEGURANÇA)
    // =========================================================================
    if (!empty($_POST['monitor_id'])) {
        $monitor_id = $_POST['monitor_id']; // Se for edição, mantém o original intacto
    } else {
        // Mapeia e tira acentos das letras
        $mapa_acentos = array(
            'á'=>'a','à'=>'a','ã'=>'a','â'=>'a','é'=>'e','ê'=>'e','í'=>'i','ó'=>'o','ô'=>'o','õ'=>'o','ú'=>'u','ç'=>'c',
            'Á'=>'A','À'=>'A','Ã'=>'A','Â'=>'A','É'=>'E','Ê'=>'E','Í'=>'I','Ó'=>'O','Ô'=>'O','Õ'=>'O','Ú'=>'U','Ç'=>'C'
        );
        $nome_limpo = strtr($_POST['nome_camera'], $mapa_acentos);
        
        // Remove tudo que não for letra ou número e deixa minúsculo (Remove traços, espaços, pontos...)
        $nome_limpo = preg_replace('/[^a-zA-Z0-9]/', '', strtolower($nome_limpo)); 
        
        // Se a pessoa tiver digitado só símbolos e o nome ficar vazio, a gente bota um padrão
        if (empty($nome_limpo)) $nome_limpo = "cam";
        
        // Colamos 4 letrinhas randômicas no final pra evitar a catástrofe de IDs repetidos no Shinobi
        $monitor_id = "cam_" . $nome_limpo . "_" . substr(md5(uniqid()), 0, 4);
    }

    // =========================================================================
    // O DESMEMBRADOR DE RTSP
    // =========================================================================
    $partes_url = parse_url($rtsp_link);
    $rtsp_host = $partes_url['host'] ?? $rtsp_link;
    $rtsp_port = $partes_url['port'] ?? '554';
    $rtsp_user = $partes_url['user'] ?? '';
    $rtsp_pass = $partes_url['pass'] ?? '';
    $rtsp_path = $partes_url['path'] ?? '';
    if (isset($partes_url['query'])) {
        $rtsp_path .= '?' . $partes_url['query'];
    }

    // =========================================================================
    // A TÉCNICA DO CLONE COM OS ZEROS CORRIGIDOS
    // =========================================================================
    $json_molde = '{"mode":"start","mid":"","name":"","type":"h264","protocol":"rtsp","host":"","port":"554","path":"","height":"480","width":"640","ext":"mp4","fps":"1","details":{"max_keep_days":"","notes":"","dir":"","rtmp_key":"","auto_host_enable":"1","auto_host":"","rtsp_transport":"tcp","muser":"","mpass":"","port_force":"0","fatal_max":"0","skip_ping":null,"is_onvif":null,"onvif_non_standard":null,"onvif_port":"","primary_input":"0:0","aduration":"1000000","probesize":"1000000","stream_loop":"0","sfps":"","wall_clock_timestamp_ignore":null,"accelerator":"0","hwaccel":"auto","hwaccel_vcodec":"","hwaccel_device":"","stream_type":"hls","stream_flv_type":"ws","stream_flv_maxLatency":"","stream_mjpeg_clients":"","stream_vcodec":"copy","stream_acodec":"no","hls_time":"2","hls_list_size":"3","preset_stream":"ultrafast","stream_quality":"15","stream_fps":"2","stream_scale_x":"","stream_scale_y":"","stream_rotate":null,"signal_check":"10","signal_check_log":"0","stream_vf":"","tv_channel":"0","tv_channel_id":"","tv_channel_group_title":"","stream_timestamp":"0","stream_timestamp_font":"","stream_timestamp_font_size":"","stream_timestamp_color":"","stream_timestamp_box_color":"","stream_timestamp_x":"","stream_timestamp_y":"","stream_watermark":"0","stream_watermark_location":"","stream_watermark_position":"tr","snap":"0","snap_fps":"","snap_scale_x":"","snap_scale_y":"","snap_vf":"","vcodec":"copy","crf":"1","preset_record":"","acodec":"no","record_scale_y":"","record_scale_x":"","cutoff":"15","rotate":null,"vf":"","timestamp":"0","timestamp_font":"","timestamp_font_size":"10","timestamp_color":"white","timestamp_box_color":"0x00000000@1","timestamp_x":"(w-tw)/2","timestamp_y":"0","watermark":"0","watermark_location":"","watermark_position":"tr","record_timelapse":null,"record_timelapse_mp4":null,"record_timelapse_fps":null,"record_timelapse_scale_x":"","record_timelapse_scale_y":"","record_timelapse_vf":"","record_timelapse_watermark":null,"record_timelapse_watermark_location":"","record_timelapse_watermark_position":null,"cust_input":"","cust_stream":"","cust_snap":"","cust_record":"","cust_detect":"","cust_detect_object":"","cust_sip_record":"","custom_output":"","detector":"0","detector_http_api":null,"detector_send_frames":"1","detector_fps":"","detector_scale_x":"640","detector_scale_y":"480","detector_lock_timeout":"","detector_save":"0","detector_record_method":"sip","detector_trigger":"1","detector_trigger_record_fps":"","detector_timeout":"5","detector_send_video_length":"","watchdog_reset":"0","detector_delete_motionless_videos":"0","det_multi_trig":null,"group_detector_multi":"","detector_webhook":"0","detector_webhook_timeout":"","detector_webhook_url":"","detector_webhook_method":null,"detector_command_enable":"0","detector_command":"","detector_command_timeout":"","snap_seconds_inward":"","detector_mail":"0","detector_mail_timeout":"","use_detector_filters":null,"use_detector_filters_object":null,"cords":"[]","detector_filters":"","detector_pam":"1","detector_sensitivity":"","detector_max_sensitivity":"","detector_threshold":"1","detector_color_threshold":"","inverse_trigger":null,"detector_frame":"0","detector_noise_filter":null,"detector_noise_filter_range":"","detector_notrigger":"0","detector_notrigger_mail":"0","detector_notrigger_discord":null,"detector_notrigger_timeout":"","detector_notrigger_webhook":null,"detector_notrigger_webhook_url":"","detector_notrigger_webhook_method":null,"detector_notrigger_command_enable":null,"detector_notrigger_command":"","detector_notrigger_command_timeout":"","detector_audio":null,"detector_audio_min_db":"","detector_audio_max_db":"","detector_use_detect_object":"0","detector_send_frames_object":null,"detector_obj_count_in_region":null,"detector_obj_region":null,"detector_use_motion":"1","detector_fps_object":"","detector_scale_x_object":"","detector_scale_y_object":"","detector_lisence_plate":"0","detector_lisence_plate_country":"us","detector_buffer_vcodec":"auto","detector_buffer_acodec":null,"detector_buffer_fps":"","event_record_scale_x":"","event_record_scale_y":"","detector_buffer_hls_time":"","detector_buffer_hls_list_size":"","detector_buffer_start_number":"","detector_buffer_live_start_index":"","control":"0","control_base_url":"","control_url_method":null,"control_digest_auth":null,"control_stop":"0","control_url_stop_timeout":"","control_turn_speed":"","detector_ptz_follow":null,"detector_ptz_follow_target":"","detector_obj_count":null,"control_url_center":"","control_url_left":"","control_url_left_stop":"","control_url_right":"","control_url_right_stop":"","control_url_up":"","control_url_up_stop":"","control_url_down":"","control_url_down_stop":"","control_url_enable_nv":"","control_url_disable_nv":"","control_url_zoom_out":"","control_url_zoom_out_stop":"","control_url_zoom_in":"","control_url_zoom_in_stop":"","control_invert_y":null,"groups":"[]","notify_email":null,"notify_onUnexpectedExit":null,"loglevel":"warning","sqllog":"0","detector_cascades":"","stream_channels":"","input_maps":"","input_map_choices":""},"shto":"[]","shfr":"[]"}';

    // Transforma o molde num Array
    $config_shinobi = json_decode($json_molde, true);

    // =========================================================================
    // INJETANDO OS DADOS BÁSICOS E O FILTRO MÁGICO
    // =========================================================================
    $config_shinobi['mid'] = $monitor_id;
    $config_shinobi['name'] = $nome_camera;
    $config_shinobi['host'] = $rtsp_host;
    $config_shinobi['port'] = $rtsp_port;
    $config_shinobi['path'] = $rtsp_path;
    
    $config_shinobi['details']['auto_host'] = $rtsp_link;
    $config_shinobi['details']['muser'] = $rtsp_user;
    $config_shinobi['details']['mpass'] = $rtsp_pass;
    $config_shinobi['details']['max_keep_days'] = $dias_retencao;

    // =========================================================================
    // INJEÇÃO DA CHAVE SELETORA (COPY vs AUTO) - PADRÃO DATACENTER HÍBRIDO
    // =========================================================================
    if ($codec_video === 'auto') {
        $config_shinobi['details']['stream_vcodec'] = "no"; 
        $config_shinobi['details']['preset_stream'] = "ultrafast"; 
        $config_shinobi['details']['stream_quality'] = "28"; 
        $config_shinobi['details']['stream_fps'] = "5"; 
        $config_shinobi['details']['snap'] = "1"; 
        
        $config_shinobi['details']['vcodec'] = "libx264"; 
        $config_shinobi['details']['preset_record'] = "ultrafast";
        $config_shinobi['details']['crf'] = "28"; 
    } else {
        $config_shinobi['details']['stream_vcodec'] = "copy"; 
        $config_shinobi['details']['preset_stream'] = "ultrafast"; 
        $config_shinobi['details']['stream_quality'] = "15";
        $config_shinobi['details']['stream_fps'] = "2"; 
        $config_shinobi['details']['snap'] = "0"; 
        
        $config_shinobi['details']['vcodec'] = "copy"; 
    }

    // =========================================================================
    // 🚨 A MÁGICA DO ÁUDIO + BLINDAGEM ANTI-PICOTE 🚨
    // =========================================================================
    if ($captura_audio == 1) {
        $config_shinobi['details']['acodec'] = "aac";        
        $config_shinobi['details']['stream_acodec'] = "aac"; 
        $flag_audio = ""; // Se tem áudio, não cortamos na entrada!
    } else {
        $config_shinobi['details']['acodec'] = "no";         
        $config_shinobi['details']['stream_acodec'] = "no";  
        $flag_audio = "-an "; // Se não tem áudio, corta na raiz pra poupar CPU
    }

    // A CURA DEFINITIVA PARA INTELBRAS PICOTANDO EM CENA DE MOVIMENTO
    // Removido o 'nobuffer' que rasgava a imagem e adicionado correção de timestamps.
    $config_shinobi['details']['cust_input'] = $flag_audio . "-rtsp_transport tcp -fflags +genpts+discardcorrupt"; 
    
    $config_shinobi['details']['detector_webhook'] = "1";
    $config_shinobi['details']['detector_webhook_url'] = "https://vision.consultja.net.br/webhook_telegram.php";

    // =========================================================================
    // O VOCABULÁRIO PERFEITO DOS MODOS E TIMEOUT
    // =========================================================================
    if ($modo_gravacao === 'motion') {
        $config_shinobi['mode'] = 'start';             
        $config_shinobi['details']['detector'] = "1";
        $config_shinobi['details']['detector_send_frames'] = "1";
        $config_shinobi['details']['detector_trigger'] = "1";
        $config_shinobi['details']['detector_timeout'] = $timeout_gravacao; 
        $config_shinobi['details']['record_timeout'] = $timeout_gravacao;   
        $config_shinobi['details']['detector_record_method'] = "sip";
        $comando_boot = "start"; 
        
    } elseif ($modo_gravacao === 'watch') {
        $config_shinobi['mode'] = 'start';             
        $config_shinobi['details']['detector'] = "0";
        $config_shinobi['details']['detector_send_frames'] = "0";
        $config_shinobi['details']['detector_trigger'] = "0"; 
        $comando_boot = "start"; 
        
    } else {
        $config_shinobi['mode'] = 'record';            
        $config_shinobi['details']['detector'] = "0";
        $config_shinobi['details']['detector_send_frames'] = "0";
        $config_shinobi['details']['detector_trigger'] = "0"; 
        $comando_boot = "record"; 
    }

    // =========================================================================
    // O BOTÃO DE PÂNICO: FORÇA A PARADA TOTAL SE DESATIVADA
    // =========================================================================
    if ($status_camera == 0) {
        $config_shinobi['mode'] = 'stop';
        $comando_boot = 'stop'; // Isso vai fazer o Shinobi cortar a conexão na raiz
    }

    // =========================================================================
    // CONFIGURANDO NO SHINOBI
    // =========================================================================
    $url_api_shinobi = "http://127.0.0.1:8080/{$api_key}/configureMonitor/{$group_key}/{$monitor_id}";
    $payload = http_build_query(['data' => json_encode($config_shinobi)]);

    $ch = curl_init($url_api_shinobi);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
    $resposta_shinobi = curl_exec($ch);
    $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($http_status == 200 || strpos(strtolower($resposta_shinobi), 'ok') !== false) {
        
        // Passo 1: Desliga o monitor 
        $url_stop = "http://127.0.0.1:8080/{$api_key}/monitor/{$group_key}/{$monitor_id}/stop";
        $ch_stop = curl_init($url_stop);
        curl_setopt($ch_stop, CURLOPT_RETURNTRANSFER, true);
        curl_exec($ch_stop);
        curl_close($ch_stop);

        sleep(2); // Respira

        // Passo 2: Liga o monitor respeitando a vontade do usuário (Ou mantém em STOP)
        $url_start = "http://127.0.0.1:8080/{$api_key}/monitor/{$group_key}/{$monitor_id}/{$comando_boot}";
        $ch_start = curl_init($url_start);
        curl_setopt($ch_start, CURLOPT_RETURNTRANSFER, true);
        curl_exec($ch_start);
        curl_close($ch_start);

        try {
            if (!empty($id_camera)) {
                $stmt = $pdo->prepare("UPDATE cameras SET id_loja=?, nome_camera=?, api_key=?, group_key=?, monitor_id=?, visivel_cliente=?, status_camera=?, rtsp_link=?, modo_gravacao=?, dias_retencao=?, timeout_gravacao=?, codec_video=?, modo_hibrido=?, captura_audio=? WHERE id=?");
                $stmt->execute([$id_loja, $nome_camera, $api_key, $group_key, $monitor_id, $visivel_cliente, $status_camera, $rtsp_link, $modo_gravacao, $dias_retencao, $timeout_gravacao, $codec_video, $modo_hibrido_post, $captura_audio, $id_camera]);
                
                registrar_log($pdo, $_SESSION['usuario_id'], $id_empresa_sessao, 'CONFIG_CAMERA', "Câmera $nome_camera atualizada e sincronizada.");
                $mensagem = "<span style='color: var(--brand-color);'><i class='fa-solid fa-server'></i> Configuração salva e sincronizada com sucesso!</span>";
            } else {
                $stmt = $pdo->prepare("INSERT INTO cameras (id_loja, nome_camera, api_key, group_key, monitor_id, visivel_cliente, status_camera, rtsp_link, modo_gravacao, dias_retencao, timeout_gravacao, codec_video, modo_hibrido, captura_audio) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
                $stmt->execute([$id_loja, $nome_camera, $api_key, $group_key, $monitor_id, $visivel_cliente, $status_camera, $rtsp_link, $modo_gravacao, $dias_retencao, $timeout_gravacao, $codec_video, $modo_hibrido_post, $captura_audio]);
                
                registrar_log($pdo, $_SESSION['usuario_id'], $id_empresa_sessao, 'ADD_CAMERA', "Nova câmera integrada via Zero-Touch: $nome_camera");
                $mensagem = "<span style='color: var(--brand-color);'><i class='fa-solid fa-bolt'></i> Câmera provisionada no servidor!</span>";
            }
        } catch (PDOException $e) {
            $mensagem = "<span style='color: #ff4b4b;'><i class='fa-solid fa-triangle-exclamation'></i> Erro no banco: " . $e->getMessage() . "</span>";
        }
    } else {
        $mensagem = "<span style='color: #ff4b4b;'><i class='fa-solid fa-plug-circle-xmark'></i> Erro de Comunicação (Status: $http_status). Resposta: $resposta_shinobi</span>";
    }
}

// =========================================================================
// 2. Processa a Exclusão
// =========================================================================
if (isset($_GET['excluir'])) {
    $id_excluir = $_GET['excluir'];
    try {
        $stmt_info = $pdo->prepare("SELECT nome_camera, api_key, group_key, monitor_id FROM cameras WHERE id = ?");
        $stmt_info->execute([$id_excluir]);
        $cam_info = $stmt_info->fetch(PDO::FETCH_ASSOC);
        
        if ($cam_info) {
            $url_del = "http://127.0.0.1:8080/{$cam_info['api_key']}/configureMonitor/{$cam_info['group_key']}/{$cam_info['monitor_id']}/delete";
            $ch_del = curl_init($url_del);
            curl_setopt($ch_del, CURLOPT_RETURNTRANSFER, true);
            curl_exec($ch_del);
            curl_close($ch_del);

            $stmt = $pdo->prepare("DELETE FROM cameras WHERE id = ?");
            $stmt->execute([$id_excluir]);
            
            registrar_log($pdo, $_SESSION['usuario_id'], $id_empresa_sessao, 'DELETE_CAMERA', "Câmera excluída: {$cam_info['nome_camera']}");
            $mensagem = "<span style='color: #00ffa2;'><i class='fa-solid fa-trash-check'></i> Câmera e Gravações removidas de toda a infraestrutura!</span>";
        }
    } catch (PDOException $e) {
        $mensagem = "<span style='color: #ff4b4b;'><i class='fa-solid fa-triangle-exclamation'></i> Erro ao excluir: " . $e->getMessage() . "</span>";
    }
}

// =========================================================================
// 3. Carrega Dados para Edição OU Cópia
// =========================================================================
$cam_edit = null;
$is_copy = false;

if (isset($_GET['editar'])) {
    $stmt = $pdo->prepare("SELECT * FROM cameras WHERE id = ?");
    $stmt->execute([$_GET['editar']]);
    $cam_edit = $stmt->fetch(PDO::FETCH_ASSOC);
} elseif (isset($_GET['copiar'])) {
    $stmt = $pdo->prepare("SELECT * FROM cameras WHERE id = ?");
    $stmt->execute([$_GET['copiar']]);
    $cam_edit = $stmt->fetch(PDO::FETCH_ASSOC);
    if ($cam_edit) {
        $is_copy = true;
        // Coloca um sufixo para você saber que é a cópia
        $cam_edit['nome_camera'] .= ' (Cópia)';
    }
}

// 4. Buscas com Filtro SaaS
if ($id_empresa_sessao == 1) {
    $lojas = $pdo->query("SELECT * FROM lojas ORDER BY nome_loja")->fetchAll(PDO::FETCH_ASSOC);
    $cameras = $pdo->query("SELECT c.*, l.nome_loja FROM cameras c JOIN lojas l ON c.id_loja = l.id ORDER BY l.nome_loja, c.nome_camera")->fetchAll(PDO::FETCH_ASSOC);
} else {
    $stmt_l = $pdo->prepare("SELECT * FROM lojas WHERE id_empresa = ? ORDER BY nome_loja");
    $stmt_l->execute([$id_empresa_sessao]);
    $lojas = $stmt_l->fetchAll(PDO::FETCH_ASSOC);

    $stmt_c = $pdo->prepare("SELECT c.*, l.nome_loja FROM cameras c JOIN lojas l ON c.id_loja = l.id WHERE l.id_empresa = ? ORDER BY l.nome_loja, c.nome_camera");
    $stmt_c->execute([$id_empresa_sessao]);
    $cameras = $stmt_c->fetchAll(PDO::FETCH_ASSOC);
}

// 5. Agrupando para a Sanfona
$cameras_agrupadas = [];
foreach ($cameras as $c) {
    $cameras_agrupadas[$c['nome_loja']][] = $c;
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerenciar Câmeras - <?php echo $nome_empresa; ?></title>
    <link rel="icon" type="image/png" href="img/favicon.png">   
    <base href="/">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --bg-body: #0b131a; --bg-sidebar: rgba(255, 255, 255, 0.03); --bg-main: #080d12;
            --text-main: #fff; --text-muted: #b3b3b3; --border-color: rgba(255, 255, 255, 0.05);
            --card-bg: rgba(255, 255, 255, 0.02); --top-controls: rgba(255, 255, 255, 0.02);
            --brand-color: <?php echo $cor_primaria; ?>;
            --brand-color-hover: <?php echo $cor_primaria; ?>4D;
            --user-box: rgba(255, 255, 255, 0.02);
            --input-bg: rgba(0, 0, 0, 0.3); --table-header: rgba(0, 242, 254, 0.05);
        }

        [data-theme="light"] {
            --bg-body: #f0f2f5; --bg-sidebar: rgba(255, 255, 255, 0.8); --bg-main: #e4e6eb;
            --text-main: #1c1e21; --text-muted: #606770; --border-color: rgba(0, 0, 0, 0.1);
            --card-bg: #fff; --top-controls: rgba(255, 255, 255, 0.9);
            --brand-color: #0093e9; --user-box: rgba(0, 0, 0, 0.05);
            --input-bg: rgba(255, 255, 255, 0.8); --table-header: rgba(0, 147, 233, 0.1);
        }

        body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background: var(--bg-body); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: 0.3s; }
        
        .sidebar { width: 260px; background: var(--bg-sidebar); backdrop-filter: blur(10px); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: space-between; padding: 25px 20px; box-sizing: border-box; transition: 0.4s ease; white-space: nowrap; overflow: hidden; }
        .sidebar.collapsed { width: 0; padding: 25px 0; border-right: none; opacity: 0; }
        
        .logo-container { background: rgba(255, 255, 255, 0.02); border: 2px solid var(--brand-color-hover); border-radius: 12px; padding: 15px 10px; text-align: center; margin-bottom: 35px; box-shadow: 0 0 15px var(--brand-color-hover); transition: 0.3s; display: flex; justify-content: center; align-items: center; min-height: 50px; }
        .logo-container:hover { border-color: var(--brand-color); }
        .logo-container img { max-width: 100%; height: auto; display: block; }

        /* 🚨 NOVO MENU LATERAL MODERNIZADO 🚨 */
        .menu-items { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
        .menu-link { 
            display: flex; align-items: center; gap: 15px; padding: 14px 18px; 
            color: var(--text-muted); text-decoration: none; border-radius: 10px; 
            transition: all 0.3s ease; font-weight: 500; font-size: 15px;
            position: relative; overflow: hidden; background: transparent;
        }
        .menu-link i { font-size: 18px; width: 24px; text-align: center; transition: 0.3s; }
        
        /* Efeito Hover Glassmorphism */
        .menu-link:hover { 
            background: rgba(255, 255, 255, 0.05); 
            color: var(--text-main); 
            box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.02);
        }
        
        /* Escorregada do Ícone no Hover */
        .menu-link:hover i { transform: translateX(4px); color: var(--brand-color); }
        
        /* O Link Ativo */
        .menu-link.active { 
            background: linear-gradient(90deg, var(--brand-color-hover) 0%, transparent 100%);
            color: var(--brand-color); 
            border-left: 4px solid var(--brand-color); 
            font-weight: 600;
        }
        .menu-link.active i { color: var(--brand-color); }
        
        .user-box { background: var(--user-box); padding: 15px; border-radius: 10px; border: 1px solid var(--border-color); font-size: 13px; }
        .btn-sair { display: block; text-align: center; background: rgba(255, 75, 75, 0.1); border: 1px solid rgba(255, 75, 75, 0.3); color: #ff4b4b; padding: 10px; border-radius: 6px; text-decoration: none; margin-top: 15px; font-weight: bold; transition: 0.3s; }
        .btn-sair:hover { background: #ff4b4b; color: #fff; }

        .main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; transition: 0.4s ease; background: var(--bg-main); }
        .top-controls { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background: var(--top-controls); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(5px); }
        .left-controls { display: flex; align-items: center; gap: 15px; }
        .title-header { font-size: 18px; font-weight: 600; color: var(--text-main); margin: 0; }
        .right-controls { display: flex; gap: 15px; align-items: center; }
        .btn-action { background: var(--brand-color-hover); border: 1px solid var(--brand-color); color: var(--brand-color); padding: 8px 15px; border-radius: 6px; cursor: pointer; font-weight: 600; transition: 0.3s; display: flex; align-items: center; justify-content: center; outline: none; gap: 8px; }
        .btn-action:hover { opacity: 0.8; }
        .btn-menu { font-size: 18px; padding: 5px 12px; }
        
        .scroll-area { padding: 30px; overflow-y: auto; flex-grow: 1; box-sizing: border-box; }

        .content-box { background: var(--card-bg); border: 1px solid var(--border-color); padding: 25px; border-radius: 14px; margin-bottom: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }
        label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
        input, select { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); box-sizing: border-box; outline: none; transition: 0.3s; }
        input:focus, select:focus { border-color: var(--brand-color); }
        
        .btn-salvar { background: var(--brand-color); border: none; padding: 12px 25px; color: #000; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; justify-content: center; }
        .btn-salvar:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 5px 15px var(--brand-color-hover); }
        .btn-cancelar { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--text-main); padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; text-align: center; }
        .btn-cancelar:hover { background: rgba(255,255,255,0.2); }
        
        .accordion-item { margin-bottom: 10px; }
        .accordion-header { background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); padding: 15px 20px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; transition: 0.3s; }
        .accordion-header:hover { border-color: var(--brand-color); background: var(--brand-color-hover); color: var(--brand-color); }
        .accordion-header.active { background: var(--brand-color-hover); border-color: var(--brand-color); color: var(--brand-color); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
        .accordion-content { display: none; background: var(--card-bg); border: 1px solid var(--brand-color); border-top: none; padding: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; overflow-x: auto; }
        .accordion-content.active { display: block; }
        
        table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; }
        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
        th { background: rgba(0, 0, 0, 0.2); color: var(--brand-color); font-weight: 600; }
        
        .btn-excluir, .btn-editar, .btn-copiar { padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 13px; transition: 0.3s; display: inline-block; margin: 0 2px; border: 1px solid transparent; }
        .btn-excluir { color: #ff4b4b; background: rgba(255, 75, 75, 0.1); border-color: rgba(255, 75, 75, 0.2); }
        .btn-excluir:hover { background: #ff4b4b; color: #fff; }
        
        .btn-editar { color: var(--brand-color); background: var(--brand-color-hover); border-color: var(--brand-color-hover); }
        .btn-editar:hover { filter: brightness(1.2); }
        
        .btn-copiar { color: #b052ff; background: rgba(176, 82, 255, 0.1); border-color: rgba(176, 82, 255, 0.2); }
        .btn-copiar:hover { background: #b052ff; color: #fff; }
        
        .badge-visivel { background: rgba(0, 255, 162, 0.1); color: #00ffa2; padding: 3px 8px; border-radius: 4px; font-size: 11px; border: 1px solid rgba(0, 255, 162, 0.3); }
        .badge-oculto { background: rgba(255, 165, 0, 0.1); color: #ffa500; padding: 3px 8px; border-radius: 4px; font-size: 11px; border: 1px solid rgba(255, 165, 0, 0.3); }
        .badge-modo { background: rgba(176, 82, 255, 0.1); color: #b052ff; padding: 3px 8px; border-radius: 4px; font-size: 11px; border: 1px solid rgba(176, 82, 255, 0.3); font-weight: bold; }
        .badge-status-off { background: rgba(255, 75, 75, 0.1); color: #ff4b4b; padding: 3px 8px; border-radius: 4px; font-size: 11px; border: 1px solid rgba(255, 75, 75, 0.3); font-weight: bold; }

        @media (max-width: 1000px) {
            .sidebar { position: absolute; z-index: 1000; height: 100%; } 
            .scroll-area { padding: 15px; } 
        }
        .btn-logout { 
            background: rgba(255, 75, 75, 0.1); 
            border: 1px solid rgba(255, 75, 75, 0.3); 
            color: #ff4b4b; 
            text-decoration: none;
        }
        .btn-logout:hover { 
            background: #ff4b4b; 
            color: #fff; 
        }

        /* MODAL GUIA RTSP (CHEAT SHEET) */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 2000; display: flex; justify-content: center; align-items: center; }
        .modal-content { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; width: 90%; max-width: 600px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); animation: popModal 0.3s ease; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; }
        .modal-header h3 { margin: 0; color: var(--brand-color); font-size: 18px; display: flex; align-items: center; gap: 10px; }
        .btn-close-modal { background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; transition: 0.3s; }
        .btn-close-modal:hover { color: #ff4b4b; transform: scale(1.1); }
        
        .guia-item { margin-bottom: 15px; background: var(--input-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); }
        .guia-item h4 { margin: 0 0 8px 0; color: var(--text-main); font-size: 14px; }
        .guia-code-box { display: flex; align-items: center; gap: 10px; }
        .guia-code-box code { flex-grow: 1; background: #000; color: #00ffa2; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 12px; user-select: all; overflow-x: auto; white-space: nowrap; }
        .btn-copy-code { background: var(--brand-color-hover); color: var(--brand-color); border: 1px solid var(--brand-color); padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: 0.3s; font-size: 12px; font-weight: bold; }
        .btn-copy-code:hover { background: var(--brand-color); color: #000; }
        
        @keyframes popModal { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    </style>
</head>
<body>

    <div class="sidebar" id="sidebar">
        <div>
            <div class="logo-container">
                <img src="<?php echo $logo_url; ?>" alt="<?php echo $nome_empresa; ?>" onerror="this.style.display='none'; this.parentNode.innerHTML='<span style=\'color: var(--brand-color); font-weight: bold; font-size: 20px; text-transform: uppercase; text-align: center;\'> <?php echo $nome_empresa; ?></span>';">
            </div>

            <div class="menu-items">
                <a href="dashboard.php" class="menu-link"><i class="fa-solid fa-table-cells-large"></i> Mosaico</a>
                <a href="saude.php" class="menu-link"><i class="fa-solid fa-heart-pulse"></i> Monitoramento</a>
                <a href="gravacoes.php" class="menu-link"><i class="fa-solid fa-clock-rotate-left"></i> Gravações</a>
                
                <?php if ($_SESSION['nivel'] === 'admin'): ?>
                    <?php if ($_SESSION['id_empresa_logada'] == 1): ?>
                        <a href="empresas.php" class="menu-link"><i class="fa-solid fa-building-shield"></i> Empresas</a>
                    <?php endif; ?>
                    <a href="lojas.php" class="menu-link"><i class="fa-solid fa-store"></i> Filiais</a>
                    <a href="cameras.php" class="menu-link active"><i class="fa-solid fa-video"></i> Câmeras</a>
                    <a href="usuarios.php" class="menu-link"><i class="fa-solid fa-users-gear"></i> Usuários</a>
                    <a href="auditoria.php" class="menu-link"><i class="fa-solid fa-user-secret"></i> Auditoria</a>
                    <a href="relatorios.php" class="menu-link"><i class="fa-solid fa-chart-pie"></i> Relatorios</a>
                <?php endif; ?>
            </div>
        </div>
        <div class="user-box">
            <div style="text-align: center;">Olá, <strong><?php echo $_SESSION['nome']; ?></strong></div>
        </div>
    </div>

    <div class="main-content">
        <div class="top-controls">
            <div class="left-controls">
                <button class="btn-action btn-menu" id="toggleMenu"><i class="fa-solid fa-bars"></i></button>
                <h2 class="title-header">Configuração de Dispositivos</h2>
            </div>
            
            <div class="right-controls">
                <button class="btn-action" id="themeToggle" title="Trocar Tema"><i class="fa-solid fa-sun"></i></button>
                
                <a href="logout.php" class="btn-action btn-logout" title="Sair do Sistema">
                    <i class="fa-solid fa-power-off"></i> Sair
                </a>
            </div>
        </div>

        <div class="scroll-area">
            
            <?php if($mensagem): ?>
                <div style="margin-bottom: 20px; font-weight: bold; font-size: 15px;">
                    <?php echo $mensagem; ?>
                </div>
            <?php endif; ?>

            <div class="content-box">
                <h3 style="margin-top:0; color: var(--brand-color);">
                    <?php 
                        if ($cam_edit && !$is_copy) echo '<i class="fa-solid fa-pen-to-square"></i> Editar Câmera no Servidor'; 
                        elseif ($is_copy) echo '<i class="fa-solid fa-copy"></i> Clonar Câmera no Servidor'; 
                        else echo '<i class="fa-solid fa-plus"></i> Integrar Nova Câmera'; 
                    ?>
                </h3>
                
                <form method="POST" action="cameras.php">
                    <?php if($cam_edit && !$is_copy): ?>
                        <input type="hidden" name="id_camera" value="<?php echo $cam_edit['id']; ?>">
                        <input type="hidden" name="monitor_id" value="<?php echo $cam_edit['monitor_id']; ?>">
                    <?php endif; ?>

                    <div class="form-row">
                        <div>
                            <label>Filial / Loja</label>
                            <select name="id_loja" required>
                                <?php foreach($lojas as $l): ?>
                                    <option value="<?php echo $l['id']; ?>" <?php echo ($cam_edit && $cam_edit['id_loja'] == $l['id']) ? 'selected' : ''; ?>>
                                        <?php echo $l['nome_loja']; ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div>
                            <label>Identificação da Câmera</label>
                            <input type="text" name="nome_camera" value="<?php echo $cam_edit['nome_camera'] ?? ''; ?>" placeholder="Ex: Caixa 01, Corredor 3" required>
                        </div>
                        <div>
                            <label>Visível para o Dono?</label>
                            <select name="visivel_cliente">
                                <option value="1" <?php echo ($cam_edit && $cam_edit['visivel_cliente'] == 1) ? 'selected' : ''; ?>>Sim (Público)</option>
                                <option value="0" <?php echo ($cam_edit && $cam_edit['visivel_cliente'] == 0) ? 'selected' : ''; ?>>Não (Suporte / Admin)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div style="grid-column: span 2;">
                            <label style="display: flex; justify-content: space-between; align-items: center;">
                                Link RTSP Completo
                                
                                <div style="display: flex; gap: 8px;">
                                    <button type="button" onclick="abrirModalGuia()" style="background: rgba(0, 242, 254, 0.1); border: 1px solid rgba(0, 242, 254, 0.4); color: #00f2fe; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; transition: 0.3s;">
                                        <i class="fa-solid fa-book"></i> Guia RTSP
                                    </button>
                                    
                                    <button type="button" id="btnTestarRtsp" onclick="diagnosticoRTSP()" style="background: var(--brand-color); border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer; color: #000; transition: 0.3s;">
                                        <i class="fa-solid fa-stethoscope"></i> Diagnóstico Raio-X
                                    </button>
                                </div>
                            </label>
                            <input type="text" id="rtsp_input" name="rtsp_link" value="<?php echo $cam_edit['rtsp_link'] ?? ''; ?>" placeholder="rtsp://usuario:senha@192.168.1.100:554/cam/realmonitor?channel=1&subtype=0" required autocomplete="off">
                            
                            <div id="box_raiox" style="display: none; margin-top: 10px; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; font-size: 12px;"></div>
                        </div>
                        
                        <div>
                            <label title="Copy não usa CPU. Auto traduz imagem corrompida mas consome processador.">Decodificação (Video Codec)</label>
                            <select name="codec_video" required>
                                <option value="copy" <?php echo ($cam_edit && ($cam_edit['codec_video'] ?? 'copy') == 'copy') ? 'selected' : ''; ?>>Nativo / Leve (Copy)</option>
                                <option value="auto" <?php echo ($cam_edit && ($cam_edit['codec_video'] ?? '') == 'auto') ? 'selected' : ''; ?>>Forçado / Pesado (Auto)</option>
                            </select>
                        </div>

                        <div>
                            <label><i class="fa-solid fa-microphone"></i> Captura de Áudio</label>
                            <select name="captura_audio" style="border-color: #00ffa2;">
                                <option value="0" <?php echo (!isset($cam_edit) || (isset($cam_edit['captura_audio']) && $cam_edit['captura_audio'] == 0)) ? 'selected' : ''; ?>>🔇 Sem Áudio (Padrão)</option>
                                <option value="1" <?php echo (isset($cam_edit['captura_audio']) && $cam_edit['captura_audio'] == 1) ? 'selected' : ''; ?>>🎙️ Com Áudio (AAC)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div>
                            <label>Modo de Gravação</label>
                            <select name="modo_gravacao" id="modo_gravacao" onchange="toggleTimeout()">
                                <option value="watch" <?php echo ($cam_edit && $cam_edit['modo_gravacao'] == 'watch') ? 'selected' : ''; ?>>Somente Visualização (Sem Gravação)</option>
                                <option value="motion" <?php echo ($cam_edit && $cam_edit['modo_gravacao'] == 'motion') ? 'selected' : ''; ?>>Movimento (Espera)</option>
                                <option value="record" <?php echo ($cam_edit && $cam_edit['modo_gravacao'] == 'record') ? 'selected' : ''; ?>>Contínua 24h</option>
                            </select>
                        </div>
                        
                        <div style="display: flex; gap: 10px;">
                            <div style="flex: 1;">
                                <label>Retenção (Dias)</label>
                                <input type="number" name="dias_retencao" value="<?php echo $cam_edit['dias_retencao'] ?? '7'; ?>" min="1" max="60" required>
                            </div>
                            
                            <div style="flex: 1; display: none;" id="div_timeout">
                                <label>Timeout (Minutos)</label>
                                <input type="number" name="timeout_gravacao" id="timeout_gravacao" value="<?php echo $cam_edit['timeout_gravacao'] ?? '5'; ?>" min="1" max="60" title="Tempo de gravação após o movimento parar">
                            </div>
                        </div>
                        
                        <div>
                            <label style="color: #ff4b4b;"><i class="fa-solid fa-power-off"></i> Status da Câmera</label>
                            <select name="status_camera" required style="border-color: #ff4b4b;">
                                <option value="1" <?php echo (!isset($cam_edit) || (isset($cam_edit['status_camera']) && $cam_edit['status_camera'] == 1)) ? 'selected' : ''; ?>>🟢 Ativada (Monitorando)</option>
                                <option value="0" <?php echo (isset($cam_edit['status_camera']) && $cam_edit['status_camera'] == 0) ? 'selected' : ''; ?>>🔴 Desativada (Zero CPU/Banda)</option>
                            </select>
                        </div>
                        
                        <div>
                            <label style="color: #b052ff;"><i class="fa-solid fa-robot"></i> Modo Híbrido (Agendamento)</label>
                            <select name="modo_hibrido" style="border-color: #b052ff;">
                                <option value="0" <?php echo (!isset($cam_edit) || (isset($cam_edit['modo_hibrido']) && $cam_edit['modo_hibrido'] == 0)) ? 'selected' : ''; ?>>🔴 Desligado (Manual)</option>
                                <option value="1" <?php echo (isset($cam_edit['modo_hibrido']) && $cam_edit['modo_hibrido'] == 1) ? 'selected' : ''; ?>>🟢 Ligado (Dia: Contínuo / Noite: Movimento)</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-row" style="opacity: 0.5; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 6px;">
                        <div>
                            <label>API Key (Motor de Vídeo)</label>
                            <input type="text" name="api_key" value="<?php echo $cam_edit['api_key'] ?? $chave_api_padrao; ?>" required readonly>
                        </div>
                        <div>
                            <label>Group Key</label>
                            <input type="text" name="group_key" value="<?php echo $cam_edit['group_key'] ?? $chave_group_padrao; ?>" required readonly>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 15px; margin-top: 10px;">
                        <button type="submit" class="btn-salvar">
                            <?php 
                                if ($cam_edit && !$is_copy) echo '<i class="fa-solid fa-server"></i> Atualizar Servidor'; 
                                else echo '<i class="fa-solid fa-bolt"></i> Provisionar no Servidor'; 
                            ?>
                        </button>
                        <?php if($cam_edit): ?>
                            <a href="cameras.php" class="btn-cancelar">Cancelar</a>
                        <?php endif; ?>
                    </div>
                </form>
            </div>

            <div class="content-box">
                <h3 style="margin-top:0; margin-bottom: 25px; color: var(--brand-color);">
                    <i class="fa-solid fa-list"></i> Dispositivos Ativos
                </h3>
                
                <?php if(count($cameras_agrupadas) > 0): ?>
                    <?php foreach($cameras_agrupadas as $nome_loja => $lista_cameras): ?>
                        <div class="accordion-item">
                            <div class="accordion-header" onclick="toggleAccordion(this)">
                                <span><i class="fa-solid fa-store" style="margin-right: 8px;"></i> <?php echo htmlspecialchars($nome_loja); ?> <span style="opacity: 0.7; font-size: 12px; margin-left: 5px;">(<?php echo count($lista_cameras); ?> câmeras)</span></span>
                                <i class="fa-solid fa-chevron-down icone-seta"></i>
                            </div>
                            
                            <div class="accordion-content">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>Câmera</th>
                                            <th>Gravação</th>
                                            <th>Codec</th>
                                            <th>Híbrido</th>
                                            <th>Monitor ID</th>
                                            <th style="text-align: center;">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($lista_cameras as $c): ?>
                                            <tr style="<?php echo (isset($c['status_camera']) && $c['status_camera'] == 0) ? 'opacity: 0.5; background: rgba(255,0,0,0.05);' : ''; ?>">
                                                <td>
                                                    <strong><?php echo $c['nome_camera']; ?></strong>
                                                    <?php if(isset($c['captura_audio']) && $c['captura_audio'] == 1): ?>
                                                        <span style="color: #00ffa2; font-size: 11px; margin-left: 5px;" title="Áudio Ativado"><i class="fa-solid fa-microphone"></i></span>
                                                    <?php endif; ?>
                                                    <?php if(isset($c['status_camera']) && $c['status_camera'] == 0): ?>
                                                        <br><span class="badge-status-off"><i class="fa-solid fa-power-off"></i> Parada</span>
                                                    <?php endif; ?>
                                                </td>
                                                <td>
                                                    <?php if(isset($c['modo_gravacao']) && $c['modo_gravacao'] == 'motion'): ?>
                                                        <span class="badge-modo" title="Detecção de Movimento">Movimento (<?php echo isset($c['timeout_gravacao']) ? $c['timeout_gravacao'] : '5'; ?> min)</span>
                                                    <?php elseif(isset($c['modo_gravacao']) && $c['modo_gravacao'] == 'watch'): ?>
                                                        <span class="badge-modo" style="background: rgba(255, 165, 0, 0.1); color: #ffa500; border-color: rgba(255, 165, 0, 0.3);" title="Somente Visualização">Só Vídeo</span>
                                                    <?php else: ?>
                                                        <span class="badge-modo" style="background: rgba(0, 147, 233, 0.1); color: #0093e9; border-color: rgba(0, 147, 233, 0.3);" title="Gravação Contínua">Contínua</span>
                                                    <?php endif; ?>
                                                </td>
                                                <td>
                                                    <?php if(isset($c['codec_video']) && $c['codec_video'] == 'auto'): ?>
                                                        <span style="color: #ff4b4b; font-weight: bold; font-size: 12px;">Auto</span>
                                                    <?php else: ?>
                                                        <span style="color: #00ffa2; font-weight: bold; font-size: 12px;">Copy</span>
                                                    <?php endif; ?>
                                                </td>
                                                <td>
                                                    <?php if(isset($c['modo_hibrido']) && $c['modo_hibrido'] == 1): ?>
                                                        <span style="color: #b052ff; font-weight: bold; font-size: 12px;"><i class="fa-solid fa-robot"></i> ON</span>
                                                    <?php else: ?>
                                                        <span style="color: var(--text-muted); font-size: 12px;"><i class="fa-solid fa-power-off"></i> OFF</span>
                                                    <?php endif; ?>
                                                </td>
                                                <td style="font-family: monospace; color: var(--brand-color);"><?php echo $c['monitor_id']; ?></td>
                                                <td style="text-align: center; white-space: nowrap;">
                                                    <a href="cameras.php?editar=<?php echo $c['id']; ?>" class="btn-editar" title="Editar">
                                                        <i class="fa-solid fa-pen"></i>
                                                    </a>
                                                    
                                                    <a href="cameras.php?copiar=<?php echo $c['id']; ?>" class="btn-copiar" title="Copiar (Duplicar)">
                                                        <i class="fa-solid fa-copy"></i>
                                                    </a>
                                                    
                                                    <a href="cameras.php?excluir=<?php echo $c['id']; ?>" class="btn-excluir" title="Excluir do Servidor e Banco" onclick="return confirm('ATENÇÃO: A câmera será deletada DEFINITIVAMENTE do servidor de vídeo. Deseja excluir <?php echo $c['nome_camera']; ?>?');">
                                                    <i class="fa-solid fa-trash"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div style="text-align: center; color: var(--text-muted); padding: 20px;">
                        <i class="fa-solid fa-video-slash" style="font-size: 30px; margin-bottom: 10px;"></i><br>
                        Nenhuma câmera cadastrada.
                    </div>
                <?php endif; ?>
                
            </div>
        </div> 
    </div> 

    <div id="modalGuiaRTSP" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fa-solid fa-book"></i> Guia Rápido de URLs RTSP</h3>
                <button class="btn-close-modal" onclick="fecharModalGuia()"><i class="fa-solid fa-xmark"></i></button>
            </div>
            
            <div style="max-height: 400px; overflow-y: auto; padding-right: 5px;">
                
                <div class="guia-item">
                    <h4><i class="fa-solid fa-camera"></i> Intelbras (DVRs e Câmeras VIP)</h4>
                    <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 5px;">Substitua <strong>IP</strong>, <strong>USER</strong> e <strong>PASS</strong>. Canal 1 = channel=1. Substream = subtype=1.</p>
                    <div class="guia-code-box">
                        <code id="code-intelbras">rtsp://USER:PASS@IP:554/cam/realmonitor?channel=1&subtype=0</code>
                        <button class="btn-copy-code" onclick="copiarCodigo('code-intelbras', this)" title="Copiar"><i class="fa-regular fa-copy"></i></button>
                    </div>
                </div>

                <div class="guia-item">
                    <h4><i class="fa-solid fa-camera"></i> Hikvision (DVRs e IP Cameras)</h4>
                    <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 5px;">Canal 1 Main = 101. Canal 1 Sub = 102. Canal 2 Main = 201.</p>
                    <div class="guia-code-box">
                        <code id="code-hik">rtsp://USER:PASS@IP:554/Streaming/Channels/101</code>
                        <button class="btn-copy-code" onclick="copiarCodigo('code-hik', this)" title="Copiar"><i class="fa-regular fa-copy"></i></button>
                    </div>
                </div>

                <div class="guia-item">
                    <h4><i class="fa-solid fa-camera"></i> Intelbras Mibo (iM3, iM4, iM5)</h4>
                    <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 5px;">A senha (PASS) geralmente é o <strong>Código de Acesso</strong> que fica na etiqueta da câmera.</p>
                    <div class="guia-code-box">
                        <code id="code-mibo">rtsp://admin:PASS@IP:554/cam/realmonitor?channel=1&subtype=0</code>
                        <button class="btn-copy-code" onclick="copiarCodigo('code-mibo', this)" title="Copiar"><i class="fa-regular fa-copy"></i></button>
                    </div>
                </div>

                <div class="guia-item">
                    <h4><i class="fa-solid fa-camera"></i> Genéricas (Padrão ONVIF)</h4>
                    <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 5px;">A maioria das câmeras chinesas usa a porta 554 ou 8554 e atende na rota /11 ou /live/ch00_1.</p>
                    <div class="guia-code-box">
                        <code id="code-onvif1">rtsp://USER:PASS@IP:554/11</code>
                        <button class="btn-copy-code" onclick="copiarCodigo('code-onvif1', this)" title="Copiar"><i class="fa-regular fa-copy"></i></button>
                    </div>
                    <div class="guia-code-box" style="margin-top: 5px;">
                        <code id="code-onvif2">rtsp://USER:PASS@IP:554/live/ch00_1</code>
                        <button class="btn-copy-code" onclick="copiarCodigo('code-onvif2', this)" title="Copiar"><i class="fa-regular fa-copy"></i></button>
                    </div>
                </div>
                
                <div style="background: rgba(255, 165, 0, 0.1); border-left: 3px solid #ffa500; padding: 10px; border-radius: 0 4px 4px 0; margin-top: 15px;">
                    <p style="font-size: 12px; color: #ffa500; margin: 0;"><i class="fa-solid fa-circle-info"></i> Lembre-se que para Mosaico é altamente recomendado puxar o Substream (subtype=1, Channels/102, /12) para economizar banda.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // =========================================================
        // 🚨 MÁGICA: LIMPADOR DE URL (Adeus /#) 🚨
        // =========================================================
        // Este script monitora os cliques em links e remove o "restolho" do endereço
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault(); // Impede o pulo brusco do HTML
                
                const targetId = this.getAttribute('href').substring(1);
                if (targetId) {
                    const targetElement = document.getElementById(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth' });
                    }
                }
                
                // Mágica do JS moderno: Muda a URL no topo do navegador limpando o /# sem recarregar a página
                history.replaceState(null, null, ' ');
            });
        });

        // E se a página carregar com um /# (porque o usuário deu F5), a gente limpa também:
        if (window.location.hash) {
            setTimeout(() => {
                history.replaceState(null, null, ' ');
            }, 100);
        }

        // =========================================================
        // MÁGICAS DO MODAL GUIA RTSP E CÓPIA
        // =========================================================
        function abrirModalGuia() {
            document.getElementById('modalGuiaRTSP').style.display = 'flex';
        }

        function fecharModalGuia() {
            document.getElementById('modalGuiaRTSP').style.display = 'none';
        }

        function copiarCodigo(idCode, btnElement) {
            const texto = document.getElementById(idCode).innerText;
            navigator.clipboard.writeText(texto).then(() => {
                const iconeOriginal = btnElement.innerHTML;
                btnElement.innerHTML = '<i class="fa-solid fa-check"></i>';
                btnElement.style.background = '#00ffa2';
                btnElement.style.color = '#000';
                
                const inputRtsp = document.getElementById('rtsp_input');
                inputRtsp.value = texto;
                inputRtsp.focus();
                
                setTimeout(() => {
                    btnElement.innerHTML = iconeOriginal;
                    btnElement.style.background = '';
                    btnElement.style.color = '';
                    fecharModalGuia(); 
                }, 1000);
            });
        }

        window.onclick = function(event) {
            let modalGuia = document.getElementById('modalGuiaRTSP');
            if (event.target == modalGuia) fecharModalGuia();
        }

        // =========================================================
        // MÁGICA DE UX: Mostra/Esconde o campo Timeout
        // =========================================================
        function toggleTimeout() {
            var modo = document.getElementById('modo_gravacao').value;
            var divTimeout = document.getElementById('div_timeout');
            var inputTimeout = document.getElementById('timeout_gravacao');
            
            if (modo === 'motion') {
                divTimeout.style.display = 'block'; 
                inputTimeout.setAttribute('required', 'required'); 
            } else {
                divTimeout.style.display = 'none'; 
                inputTimeout.removeAttribute('required'); 
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            toggleTimeout();
            
            <?php if($is_copy): ?>
                document.querySelector('input[name="nome_camera"]').focus();
            <?php endif; ?>
        });

        // Menu Lateral
        document.getElementById('toggleMenu').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('collapsed');
        });

        if (window.innerWidth <= 1000) {
            document.getElementById('sidebar').classList.add('collapsed');
        }

        const themeToggle = document.getElementById('themeToggle');
        const currentTheme = localStorage.getItem('theme') || 'dark';

        if(currentTheme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
            themeToggle.innerHTML = '<i class="fa-solid fa-moon"></i>';
        }

        themeToggle.addEventListener('click', () => {
            let theme = document.documentElement.getAttribute('data-theme');
            if (theme === 'light') {
                document.documentElement.removeAttribute('data-theme');
                localStorage.setItem('theme', 'dark');
                themeToggle.innerHTML = '<i class="fa-solid fa-sun"></i>';
            } else {
                document.documentElement.setAttribute('data-theme', 'light');
                localStorage.setItem('theme', 'light');
                themeToggle.innerHTML = '<i class="fa-solid fa-moon"></i>';
            }
        });

        function toggleAccordion(elemento) {
            const conteudo = elemento.nextElementSibling;
            const icone = elemento.querySelector('.icone-seta');

            if (conteudo.classList.contains('active')) {
                conteudo.classList.remove('active');
                elemento.classList.remove('active');
                icone.classList.remove('fa-chevron-up');
                icone.classList.add('fa-chevron-down');
            } else {
                document.querySelectorAll('.accordion-content').forEach(el => el.classList.remove('active'));
                document.querySelectorAll('.accordion-header').forEach(el => el.classList.remove('active'));
                document.querySelectorAll('.icone-seta').forEach(el => {
                    el.classList.remove('fa-chevron-up');
                    el.classList.add('fa-chevron-down');
                });

                conteudo.classList.add('active');
                elemento.classList.add('active');
                icone.classList.remove('fa-chevron-down');
                icone.classList.add('fa-chevron-up');
            }
        }
        
        function diagnosticoRTSP() {
            const rtsp = document.getElementById('rtsp_input').value;
            const box = document.getElementById('box_raiox');
            const btn = document.getElementById('btnTestarRtsp');

            if (!rtsp.includes('rtsp://')) {
                alert('Cole um link RTSP válido antes de testar!');
                return;
            }

            btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Analisando...';
            btn.style.opacity = '0.7';
            btn.disabled = true;
            
            box.style.display = 'block';
            box.innerHTML = '<span style="color: var(--text-muted);"><i class="fa-solid fa-satellite-dish fa-beat"></i> Conectando ao DVR na ponta... (Até 10 segundos)</span>';

            const formData = new FormData();
            formData.append('rtsp', rtsp);

            fetch('ajax_ffprobe.php', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'erro') {
                    box.innerHTML = `<span style="color: #ff4b4b;"><i class="fa-solid fa-triangle-exclamation"></i> ${data.msg}</span>`;
                } else {
                    box.innerHTML = `
                        <div style="display: flex; gap: 20px; margin-bottom: 8px; font-family: monospace; font-size: 13px;">
                            <div>Vídeo: <strong style="color: ${data.video === 'HEVC' ? '#ff4b4b' : '#00ffa2'};">${data.video}</strong></div>
                            <div>Áudio: <strong style="color: ${data.audio !== 'Nenhum' ? '#ffa500' : '#00ffa2'};">${data.audio}</strong></div>
                            <div>Res: <strong style="color: #fff;">${data.resolucao}</strong></div>
                            <div>FPS: <strong style="color: #fff;">${data.fps}</strong></div>
                        </div>
                        <div style="color: ${data.cor}; font-weight: bold; border-top: 1px dashed rgba(255,255,255,0.1); padding-top: 8px;">
                            ${data.diagnostico}
                        </div>
                    `;
                    
                    const selectCodec = document.querySelector('select[name="codec_video"]');
                    if (data.video === 'HEVC' || data.audio !== 'Nenhum') {
                        selectCodec.value = 'auto'; 
                    } else {
                        selectCodec.value = 'copy'; 
                    }
                }
            })
            .catch(err => {
                box.innerHTML = `<span style="color: #ff4b4b;"><i class="fa-solid fa-plug-circle-xmark"></i> Falha interna no servidor ao executar o teste.</span>`;
            })
            .finally(() => {
                btn.innerHTML = '<i class="fa-solid fa-stethoscope"></i> Diagnóstico Raio-X';
                btn.style.opacity = '1';
                btn.disabled = false;
            });
        }
    </script>
</body>
</html>