<?php
$page_title = 'Digital Twin Factory';
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['admin_id'])) { redirect(SITE_URL . '/admin/login.php'); }
require_once __DIR__ . '/header.php';
?>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;">Digital Twin Factory Simulator</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Real-time IoT sensors and 3D simulation of production lines.</p>
    </div>
    <div>
        <span style="background:#dcfce7; color:#166534; padding:6px 12px; border-radius:20px; font-size:0.8rem; font-weight:bold;"><i class="fas fa-circle" style="font-size:0.6rem; margin-right:5px; animation: pulse 2s infinite;"></i> Sensors Online</span>
    </div>
</div>

<div class="grid-2">
    <!-- Factory Simulation Engine -->
    <div style="background:#1e293b; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 10px 25px rgba(0,0,0,0.1);">
        <div style="padding:15px 20px; background:rgba(0,0,0,0.2); border-bottom:1px solid rgba(255,255,255,0.1); color:#fff; display:flex; justify-content:space-between;">
            <h3 style="margin:0; font-size:1rem;"><i class="fas fa-cogs" style="color:#3b82f6; margin-right:8px;"></i> Assembly Line #4 (Sinks)</h3>
            <span style="font-size:0.8rem; color:#cbd5e1;">Live 3D Feed</span>
        </div>
        <div style="height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden;">
            <!-- Wireframe aesthetic for Digital Twin -->
            <div style="width:100%; height:100%; background:linear-gradient(rgba(30,41,59,0.9), rgba(15,23,42,1)), url('https://www.transparenttextures.com/patterns/cubes.png'); position:absolute; z-index:1;"></div>
            
            <div style="z-index:2; text-align:center;">
                <i class="fas fa-robot" style="font-size:5rem; color:#3b82f6; text-shadow:0 0 20px rgba(59,130,246,0.5);"></i>
                <div style="color:#38bdf8; font-family:monospace; margin-top:15px; font-size:1.2rem; letter-spacing:2px;">[ 3D TWIN RENDERING ]</div>
                <div style="color:#94a3b8; font-size:0.8rem; margin-top:10px;">Rendering Engine: Active | Latency: 12ms</div>
            </div>
            
            <!-- Floating Sensor Metrics -->
            <div style="position:absolute; top:20px; left:20px; z-index:2; background:rgba(0,0,0,0.5); padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.1);">
                <div style="color:#cbd5e1; font-size:0.75rem;">MOTOR TEMP</div>
                <div style="color:#10b981; font-size:1.2rem; font-weight:bold;">68°C <span style="font-size:0.7rem; color:#64748b;">Normal</span></div>
            </div>
            <div style="position:absolute; bottom:20px; right:20px; z-index:2; background:rgba(0,0,0,0.5); padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.1);">
                <div style="color:#cbd5e1; font-size:0.75rem;">VIBRATION ANOMALY</div>
                <div style="color:#10b981; font-size:1.2rem; font-weight:bold;">0.02g <span style="font-size:0.7rem; color:#64748b;">Safe</span></div>
            </div>
        </div>
    </div>

    <div style="display:flex; flex-direction:column; gap:20px;">
        <!-- Real-time throughput -->
        <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
            <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-tachometer-alt" style="color:#f59e0b; margin-right:8px;"></i> Real-Time Throughput</h3>
            <div style="display:flex; align-items:flex-end; gap:20px; height:80px; margin-bottom:10px;">
                <div style="flex:1; background:#e2e8f0; border-radius:4px 4px 0 0; position:relative; height:60%;"><span style="position:absolute; top:-20px; width:100%; text-align:center; font-size:0.7rem; color:#64748b;">9am</span></div>
                <div style="flex:1; background:#e2e8f0; border-radius:4px 4px 0 0; position:relative; height:75%;"></div>
                <div style="flex:1; background:#3b82f6; border-radius:4px 4px 0 0; position:relative; height:90%;"><span style="position:absolute; top:-20px; width:100%; text-align:center; font-size:0.7rem; color:#2563eb; font-weight:bold;">11am</span></div>
                <div style="flex:1; background:#e2e8f0; border-radius:4px 4px 0 0; position:relative; height:80%;"></div>
                <div style="flex:1; background:#e2e8f0; border-radius:4px 4px 0 0; position:relative; height:100%;"><span style="position:absolute; top:-20px; width:100%; text-align:center; font-size:0.7rem; color:#64748b;">Target</span></div>
            </div>
            <div style="color:#64748b; font-size:0.85rem; text-align:center;">Current Rate: <strong style="color:#0f172a;">240 units/hr</strong></div>
        </div>

        <!-- Predictive Maintenance -->
        <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);">
            <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-wrench" style="color:#ef4444; margin-right:8px;"></i> Predictive Maintenance</h3>
            <div style="background:#fef2f2; border:1px solid #fecaca; padding:15px; border-radius:8px; display:flex; align-items:center; justify-content:space-between;">
                <div>
                    <h4 style="margin:0 0 5px; color:#991b1b; font-size:0.95rem;">Hydraulic Press #2</h4>
                    <p style="margin:0; font-size:0.8rem; color:#b91c1c;">AI predicts 85% probability of bearing failure in next 48 hours.</p>
                </div>
                <button style="background:#dc2626; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:0.8rem; font-weight:bold; cursor:pointer;">Schedule AMC</button>
            </div>
        </div>
    </div>
</div>

<style>
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
</style>

<?php require_once __DIR__ . '/footer.php'; ?>
