<?php
require_once __DIR__ . '/functions.php';
requireLogin();
$currentUser = getCurrentUser();
$flash = getFlash();
$currentPage = basename($_SERVER['PHP_SELF'], '.php');
$basePath = getBasePath();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($pageTitle) ? sanitize($pageTitle) . ' — ' : '' ?><?= APP_NAME ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] },
                    colors: {
                        brand: { 50:'#f0f4ff', 100:'#e0e9ff', 200:'#c7d7fe', 300:'#a5bcfd', 400:'#8198fb', 500:'#6174f5', 600:'#4f56ea', 700:'#4143d0', 800:'#3537a8', 900:'#2f3184', 950:'#1e1f52' }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f4f6fb; }
        .sidebar-link { transition: all 0.2s ease; }
        .sidebar-link.active { background: rgba(97,116,245,0.15); color: #6174f5; border-right: 3px solid #6174f5; }
        .sidebar-link:hover:not(.active) { background: rgba(255,255,255,0.08); }
        .card { background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); }
        .btn-primary { background: linear-gradient(135deg, #6174f5, #4f56ea); color: white; padding: 0.5rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(97,116,245,0.4); }
        .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; padding: 0.5rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.4); }
        .btn-outline { border: 1.5px solid #e2e8f0; background: white; color: #475569; padding: 0.5rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
        .btn-outline:hover { border-color: #6174f5; color: #6174f5; }
        .form-input { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 0.6rem 0.875rem; font-size: 0.875rem; font-family: inherit; transition: border-color 0.2s; outline: none; }
        .form-input:focus { border-color: #6174f5; box-shadow: 0 0 0 3px rgba(97,116,245,0.12); }
        .table-row:hover { background: #f8faff; }
        .stat-card { border-radius: 16px; padding: 1.5rem; color: white; }
        .sidebar { background: linear-gradient(180deg, #1e1f52 0%, #2f3184 100%); min-height: 100vh; width: 260px; flex-shrink: 0; }
        /* Sidebar visibility is controlled via Tailwind classes (hidden md:flex). */
        .flash-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 0.875rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; }
        .flash-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; padding: 0.875rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; }
        .flash-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 0.875rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; }
    </style>
</head>
<body>
<div class="flex min-h-screen flex-col lg:flex-row">
    <!-- Mobile overlay (shown when menu is open) -->
    <div id="menuOverlay" class="fixed inset-0 bg-black/40 opacity-0 pointer-events-none transition-opacity lg:hidden z-40"></div>

    <!-- Sidebar -->
    <aside id="sidebar" class="sidebar flex flex-col fixed inset-y-0 left-0 z-50 w-[260px] transform -translate-x-full transition-transform duration-200 lg:static lg:translate-x-0 lg:transform-none lg:w-[260px] lg:block">
        <!-- Logo -->
        <div class="px-6 py-5 border-b border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 bg-brand-400 rounded-xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-bolt text-white text-sm"></i>
                </div>
                <div>
                    <div class="text-white font-bold text-sm"><?= APP_NAME ?></div>
                    <div class="text-blue-300 text-xs">Powered by unizos</div>
                </div>
            </div>
        </div>

        <!-- Nav -->
        <nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
            <div class="text-blue-400 text-xs font-semibold uppercase tracking-widest px-3 mb-2 mt-1">Main</div>

            <a href="<?= $basePath ?>index.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= in_array($currentPage, ['index']) ? 'active' : '' ?>">
                <i class="fas fa-grid-2 w-5 text-center"></i> Dashboard
            </a>

            <div class="text-blue-400 text-xs font-semibold uppercase tracking-widest px-3 mb-2 mt-4">Catalogue</div>

            <a href="<?= $basePath ?>pages/products.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'products' ? 'active' : '' ?>">
                <i class="fas fa-box-open w-5 text-center"></i> Products
            </a>
            <a href="<?= $basePath ?>pages/product_add.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'product_add' ? 'active' : '' ?>">
                <i class="fas fa-plus-square w-5 text-center"></i> Add Product
            </a>
            <a href="<?= $basePath ?>pages/product_view.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'product_view' ? 'active' : '' ?>">
                <i class="fas fa-eye w-5 text-center"></i> View Products
            </a>
            <a href="<?= $basePath ?>pages/customers.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'customers' ? 'active' : '' ?>">
                <i class="fas fa-users w-5 text-center"></i> Customers
            </a>

            <div class="text-blue-400 text-xs font-semibold uppercase tracking-widest px-3 mb-2 mt-4">Billing</div>

            <a href="<?= $basePath ?>pages/invoices.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'invoices' ? 'active' : '' ?>">
                <i class="fas fa-file-invoice w-5 text-center"></i> Invoices
            </a>
            <a href="<?= $basePath ?>pages/invoice_create.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'invoice_create' ? 'active' : '' ?>">
                <i class="fas fa-plus-circle w-5 text-center"></i> New Invoice
            </a>

            <div class="text-blue-400 text-xs font-semibold uppercase tracking-widest px-3 mb-2 mt-4">Purchases</div>

            <a href="<?= $basePath ?>pages/purchases.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'purchases' ? 'active' : '' ?>">
                <i class="fas fa-shopping-cart w-5 text-center"></i> Purchases
            </a>
            <a href="<?= $basePath ?>pages/purchase_add.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'purchase_add' ? 'active' : '' ?>">
                <i class="fas fa-cart-plus w-5 text-center"></i> Add Purchase
            </a>

            <div class="text-blue-400 text-xs font-semibold uppercase tracking-widest px-3 mb-2 mt-4">Reports</div>

            <a href="<?= $basePath ?>pages/sales_report.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'sales_report' ? 'active' : '' ?>">
                <i class="fas fa-chart-bar w-5 text-center"></i> Sales Report
            </a>
            <a href="<?= $basePath ?>pages/purchase_report.php" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-blue-100 text-sm font-medium <?= $currentPage === 'purchase_report' ? 'active' : '' ?>">
                <i class="fas fa-receipt w-5 text-center"></i> Purchase Report
            </a>
        </nav>

        <!-- User -->
        <div class="px-4 py-4 border-t border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-9 h-9 bg-brand-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
                    <?= strtoupper(substr($currentUser['full_name'], 0, 1)) ?>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-white text-xs font-semibold truncate"><?= sanitize($currentUser['full_name']) ?></div>
                    <div class="text-blue-400 text-xs truncate"><?= sanitize($currentUser['role']) ?></div>
                </div>
                <a href="<?= $basePath ?>logout.php" title="Logout" class="text-blue-400 hover:text-red-400 transition-colors">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col min-w-0">
        <!-- Topbar -->
        <header class="bg-white border-b border-slate-100 px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between sticky top-0 z-10">
            <div class="flex items-center gap-3 min-w-0">
                <button id="menuBtn" type="button" class="lg:hidden inline-flex items-center justify-center p-2 rounded-xl bg-brand-50 text-brand-600 hover:bg-brand-100 transition-colors">
                    <i class="fas fa-bars text-sm"></i>
                </button>
                <div class="min-w-0">
                    <h1 class="text-lg font-bold text-slate-800 truncate"><?= $pageTitle ?? 'Dashboard' ?></h1>
                    <p class="text-xs text-slate-400"><?= date('l, d F Y') ?></p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <a href="<?= $basePath ?>pages/invoice_create.php" class="btn-primary text-xs">
                    <i class="fas fa-plus"></i> New Invoice
                </a>
            </div>
        </header>

        <!-- Flash Message -->
        <div class="px-4 sm:px-6 pt-3 sm:pt-4">
            <?php if ($flash): ?>
                <div class="flash-<?= $flash['type'] ?> flex items-center gap-2">
                    <i class="fas <?= $flash['type'] === 'success' ? 'fa-check-circle' : ($flash['type'] === 'error' ? 'fa-times-circle' : 'fa-exclamation-triangle') ?>"></i>
                    <?= sanitize($flash['message']) ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Page Content -->
        <main class="flex-1 p-4 sm:p-6 pt-3 sm:pt-4">
