<?php
$page_title = 'Quality 4.0';
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;"><i class="fas fa-microscope" style="color:#8b5cf6; margin-right:10px;"></i>Quality 4.0</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">AI visual inspection, automated defect classification, and traceability.</p>
    </div>
</div>

<div class="grid-4" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">INSPECTION RATE</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">99.8%</div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-eye"></i> AI Powered</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #ef4444;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">DEFECTS CAUGHT</div>
        <div style="font-size:1.6rem; font-weight:700; color:#ef4444;">24</div>
        <div style="color:#ef4444; font-size:0.8rem; margin-top:5px;"><i class="fas fa-bug"></i> This Week</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">FIRST PASS YIELD</div>
        <div style="font-size:1.6rem; font-weight:700; color:#10b981;">97.2%</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-arrow-up"></i> +1.4% vs Last Month</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">WARRANTY CLAIMS</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">8</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-arrow-down"></i> -32% vs Last Quarter</div>
    </div>
</div>

<div class="grid-2" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-camera" style="color:#8b5cf6; margin-right:8px;"></i>AI Visual Inspection</h3>
        <div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:20px; margin-bottom:15px; text-align:center;">
            <i class="fas fa-video" style="font-size:3rem; color:#8b5cf6; margin-bottom:10px;"></i>
            <p style="color:#64748b; font-size:0.85rem; margin:0;">Live feed from 8 inspection cameras processing 240 frames/sec.</p>
        </div>
        <h4 style="margin:0 0 10px; font-size:0.95rem; color:#0f172a;">Defect Classification (This Week)</h4>
        <?php
        $defects = [
            ['Surface Scratch', 8, '#ef4444'],
            ['Dimensional Deviation', 6, '#f59e0b'],
            ['Edge Crack', 4, '#8b5cf6'],
            ['Color Variation', 3, '#3b82f6'],
            ['Weld Imperfection', 3, '#06b6d4'],
        ];
        foreach ($defects as $d): ?>
        <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
            <div style="width:12px; height:12px; border-radius:3px; background:<?= $d[2] ?>; flex-shrink:0;"></div>
            <span style="flex:1; font-size:0.85rem; color:#0f172a;"><?= $d[0] ?></span>
            <span style="font-weight:bold; font-size:0.85rem; color:<?= $d[2] ?>;"><?= $d[1] ?></span>
        </div>
        <?php endforeach; ?>
    </div>

    <div style="display:flex; flex-direction:column; gap:24px;">
        <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
            <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-search-plus" style="color:#10b981; margin-right:8px;"></i>Root Cause AI</h3>
            <div style="border-left:3px solid #ef4444; padding-left:12px; margin-bottom:15px;">
                <div style="font-weight:600; font-size:0.9rem;">Surface Scratches (8 defects)</div>
                <div style="font-size:0.8rem; color:#64748b;">AI Root Cause: Worn polishing belt on Line 3. <span style="color:#ef4444; font-weight:600;">Replace immediately.</span></div>
            </div>
            <div style="border-left:3px solid #f59e0b; padding-left:12px; margin-bottom:15px;">
                <div style="font-weight:600; font-size:0.9rem;">Dimensional Deviation (6 defects)</div>
                <div style="font-size:0.8rem; color:#64748b;">AI Root Cause: Temperature drift in rolling mill. Calibration needed.</div>
            </div>
            <div style="border-left:3px solid #3b82f6; padding-left:12px;">
                <div style="font-weight:600; font-size:0.9rem;">Complaint-to-Factory Loop</div>
                <div style="font-size:0.8rem; color:#64748b;">3 customer complaints auto-linked to factory defect data.</div>
            </div>
        </div>

        <div style="background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; padding:20px; border-radius:12px;">
            <h3 style="margin:0 0 8px; font-size:1.1rem;"><i class="fas fa-project-diagram"></i> Traceability Graph</h3>
            <p style="margin:0 0 10px; font-size:0.85rem; opacity:0.85;">Full batch-to-customer traceability for all shipped products.</p>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:8px;">
                <span>Batches Traced</span><span style="font-weight:bold;">4,280</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
                <span>Avg Trace Depth</span><span style="font-weight:bold;">6 nodes</span>
            </div>
            <button style="background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:8px 16px; border-radius:6px; font-size:0.85rem; cursor:pointer; width:100%; margin-top:12px;">View Traceability Graph</button>
        </div>
    </div>
</div>

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