<?php 
require 'db.php'; 
$initial_id = $_GET['id'] ?? null;
?>
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cable Map - Tech Dash</title>
    <link rel="stylesheet" href="/assets/css/tailwind.min.css">
    
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root { --grid-size: 20px; }
        body { user-select: none; } 
        
        /* Base Grid */
        #viewport { 
            width: 100%; height: 100%; 
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px); 
            background-size: var(--grid-size) var(--grid-size);
            position: absolute; top: 0; left: 0;
            transform-origin: 0 0; 
        }
        .dark #viewport { background-image: radial-gradient(#334155 1px, transparent 1px); }

        /* --- CARD STYLES --- */
        .cable-card {
            position: absolute; 
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(8px);
            /* Only transition colors/shadows, NOT physical placement */
            transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; 
            display: flex; flex-direction: column;
        }
        .dark .cable-card {
            background: rgba(30, 41, 59, 0.95);
            border-color: #334155;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
        }

        .cable-card.type-source { width: 320px; border-color: rgba(59, 130, 246, 0.4); }
        .dark .cable-card.type-source { border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 0 20px rgba(59, 130, 246, 0.15); }
        
        .cable-card.type-dest { width: 260px; border-color: rgba(16, 185, 129, 0.4); }
        .dark .cable-card.type-dest { border-color: rgba(16, 185, 129, 0.5); }

        .cable-header { cursor: grab; padding-bottom: 4px; }
        .cable-header:active { cursor: grabbing; }

        .editable { cursor: text; border-radius: 4px; padding: 0 4px; transition: background 0.2s; border: 1px solid transparent; }
        .editable:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
        .dark .editable:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        
        .edit-input { background: white; color: #0f172a; border: 1px solid #3b82f6; border-radius: 4px; padding: 0 4px; outline: none; width: 100%; font-size: 11px; font-weight: bold; font-family: inherit; }
        .dark .edit-input { background: #0f172a; color: white; }

        /* --- INPUTS --- */
        .small-input {
            background: rgba(0,0,0,0.03); border: 1px solid #e2e8f0; color: #334155;
            font-size: 10px; padding: 1px 4px; border-radius: 3px; outline: none;
            font-family: monospace; transition: all 0.2s;
        }
        .dark .small-input { background: rgba(0,0,0,0.2); border-color: #475569; color: white; }
        
        .dist-input { width: 45px; color: #0284c7; text-align: right; margin-right: 2px; }
        .dark .dist-input { color: #38bdf8; }
        
        .note-input { width: 170px; color: #d97706; }
        .dark .note-input { color: #fbbf24; }
        
        .small-input::placeholder { color: #94a3b8; font-style: italic; }
        .dark .small-input::placeholder { color: #475569; }
        
        .small-input:focus { background: white; border-color: #94a3b8; }
        .dark .small-input:focus { background: rgba(0,0,0,0.9); border-color: inherit; }

        /* --- ROWS --- */
        .node-row { display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 8px; height: 34px; border-bottom: 1px solid rgba(0,0,0,0.05); font-family: 'Courier New', monospace; font-size: 11px; color: #64748b; transition: background 0.1s; }
        .node-row:hover { background: rgba(0,0,0,0.03); color: #0f172a; }
        .dark .node-row { border-bottom-color: rgba(255,255,255,0.03); color: #94a3b8; }
        .dark .node-row:hover { background: rgba(255,255,255,0.05); color: white; }
        
        .node-row.active-selection { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
        .dark .node-row.active-selection { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        
        .node-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
        .dark .node-dot { border-color: rgba(255,255,255,0.1); }
        
        /* --- SVGS --- */
        /* --- SVGS --- */
        #connectionsLayer { pointer-events: none; overflow: visible; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }
        #connectionsLayer path { fill: none; stroke-linecap: round; transition: all 0.2s; pointer-events: stroke; cursor: pointer; }
        #connectionsLayer path:hover { stroke-width: 4px !important; stroke: #ef4444; opacity: 1; }
        
        /* --- HUD --- */
        .hud-panel { position: absolute; z-index: 50; background: white; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .dark .hud-panel { background: #1e293b; border-color: #334155; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        
        .node-list { overflow-y: visible; padding-bottom: 8px; }
        
        .tube-select { background: white; border: 1px solid #e2e8f0; color: #334155; font-size: 10px; padding: 4px; border-radius: 4px; outline: none; width: 100%; margin-top: 6px; cursor: pointer; }
        .dark .tube-select { background: #0f172a; border-color: #334155; color: #94a3b8; }

        .btn-tool { padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; transition: all 0.2s; border: 1px solid transparent; }
        .btn-slate { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
        .btn-slate:hover { background: #e2e8f0; }
        .dark .btn-slate { background: #334155; color: #e2e8f0; border-color: #475569; }
        .dark .btn-slate:hover { background: #475569; }
        
        .btn-green { background: #10b981; color: white; border-color: #059669; }
        .btn-green:hover { background: #059669; }
        
        .btn-source { background: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.3); }
        .btn-source:hover { background: rgba(59, 130, 246, 0.2); }
        .dark .btn-source { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); }
        .dark .btn-source:hover { background: rgba(59, 130, 246, 0.3); }
        
        .btn-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; border-color: rgba(239, 68, 68, 0.3); }
        .btn-red:hover { background: rgba(239, 68, 68, 0.2); }
        .dark .btn-red { background: rgba(239, 68, 68, 0.1); color: #f87171; border-color: rgba(239, 68, 68, 0.3); }
        .dark .btn-red:hover { background: rgba(239, 68, 68, 0.2); }

        #printArea { display: none; }
        @media print {
            @page { margin: 0.5in; size: letter portrait; }
            /* Force the page to expand to fit all content */
            html, body, main { height: auto !important; min-height: auto !important; overflow: visible !important; display: block !important; background: white !important; }
            
            aside, .hud-panel, #viewport, #contextMenu, #theme-toggle-container { display: none !important; }
            
            /* Remove absolute positioning and 100% height limit */
            #printArea { display: block !important; padding: 0px; color: black; background: white; position: relative !important; width: 100%; height: auto !important; }
            
            .print-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
            .print-table th { text-align: left; border-bottom: 2px solid #000; padding: 4px; font-size: 9px; text-transform: uppercase; background: #eee; }
            .print-table td { border-bottom: 1px solid #ddd; padding: 4px; font-size: 10px; font-family: monospace; vertical-align: middle; }
            .col-src { width: 25%; font-weight: bold; }
            .col-dest { width: 25%; font-weight: bold; }
            .col-dist { width: 15%; text-align: center; font-weight: bold; }
            .col-note { width: 35%; border-left: 1px dashed #ccc; background: #fafafa; }
            .print-header { margin-bottom: 15px; border-bottom: 3px solid #000; padding-bottom: 5px; }
            .print-header h1 { font-size: 22px; font-weight: 800; text-transform: uppercase; margin: 0; }
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 h-full flex overflow-hidden text-sm">

    <?php include 'sidebar.php'; ?>

    <main class="flex-1 relative overflow-hidden bg-gray-50 dark:bg-[#0f172a]" id="fiber-main">
        <div id="viewport">
            <svg id="connectionsLayer"></svg>
            <div id="cablesLayer"></div>
        </div>

        <div class="hud-panel top-4 left-4 right-4 h-14 px-4 flex justify-between items-center">
            <div class="flex items-center gap-4">
                <a href="projects.php" class="text-gray-500 hover:text-gray-900 dark:text-slate-400 dark:hover:text-white" title="Back to Projects"><i class="fas fa-arrow-left"></i></a>
                <h1 class="text-lg font-black tracking-tighter text-gray-800 dark:text-white">FIBER<span class="text-orange-500">MAP</span></h1>
                <div class="h-6 w-px bg-gray-300 dark:bg-slate-700 mx-2"></div>
                <select id="projectSelect" class="bg-gray-50 dark:bg-slate-900 border border-gray-300 dark:border-slate-700 rounded px-2 py-1 text-xs text-orange-600 dark:text-orange-400 outline-none min-w-[200px]"><option value="">-- Load Project --</option></select>
                <button id="btnRename" class="btn-tool text-gray-600 dark:text-slate-400 hover:text-gray-900 dark:hover:text-white border-gray-300 dark:border-slate-700">RENAME</button>
            </div>
            <div class="flex items-center gap-2">
                <button id="btnAutoMap" class="btn-tool bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 border-emerald-300 dark:border-emerald-800 hover:bg-emerald-200 dark:hover:bg-emerald-900/50">AUTO MAP</button>
                <button id="btnClearSplices" class="btn-tool btn-red">UNPATCH ALL</button>
            </div>
            <div class="flex items-center gap-3">
                <button id="btnPrint" class="btn-tool btn-slate" onclick="app.printManifest()">🖨️ PRINT</button>
                <button id="btnAddSource" class="btn-tool btn-source">+ SOURCE</button>
                <button id="btnAddDest" class="btn-tool btn-slate">+ DEST</button>
                <button id="btnSave" class="btn-tool btn-green shadow-lg shadow-emerald-900/40 w-32 flex items-center justify-center"><i class="fas fa-check mr-1"></i> SAVED</button>
            </div>
        </div>

        <div class="hud-panel bottom-4 left-4 flex gap-1 p-1">
            <button onclick="app.zoom(-0.1)" class="w-8 h-8 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded">-</button>
            <span id="zoomLabel" class="w-12 flex items-center justify-center text-xs text-gray-500 dark:text-slate-500 font-mono">150%</span>
            <button onclick="app.zoom(0.1)" class="w-8 h-8 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded">+</button>
        </div>

        <div id="printArea">
            <div class="print-header"><h1 id="printTitle">Untitled Project</h1></div>
            <table class="print-table">
                <thead>
                    <tr>
                        <th class="col-src text-center">Src Fiber #</th>
                        <th class="col-dest text-center">Dest Fiber #</th>
                        <th class="col-dist text-center">OTDR Dist</th>
                        <th class="col-note">Notes</th>
                    </tr>
                </thead>
                <tbody id="printBody"></tbody>
            </table>
        </div>

        <div id="contextMenu" class="hidden absolute bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded shadow-xl py-1 z-[100] w-48 text-sm">
            <div class="px-4 py-2 text-[10px] text-gray-400 dark:text-slate-500 font-bold uppercase tracking-wider">Actions</div>
            <button onclick="app.actionDelete()" class="w-full text-left px-4 py-2 hover:bg-red-600 hover:text-white text-red-500 dark:text-red-400 text-xs transition">Delete Object</button>
        </div>
    </main>

    <script>
        const INITIAL_PROJECT_ID = <?= json_encode($initial_id) ?>;
    </script>
    <script src="fiber_app.js"></script>

    <script>
        // FIREFOX / CUTOFF FIX: Temporarily strip layout classes that cause 1-page cutoff
        window.addEventListener('beforeprint', () => {
            document.documentElement.classList.remove('h-full');
            document.body.classList.remove('h-full', 'overflow-hidden', 'flex');
        });
        window.addEventListener('afterprint', () => {
            document.documentElement.classList.add('h-full');
            document.body.classList.add('h-full', 'overflow-hidden', 'flex');
        });
    </script>
</body>
</html>