<?php
// Start the session to manage the mock database and cart persistence
session_start();

// --- 1. PHP Mock Database Initialization (Session-based) ---

function init_db() {
    if (!isset($_SESSION['db'])) {
        $_SESSION['db'] = [
            // Dummy product list now includes metadata for the new UI's details modal
            'products' => [
                'p1' => [
                    'id' => 'p1',
                    'name' => 'Brushless Cordless Impact Drill Kit 18V',
                    'description' => 'A high-performance 18V Lithium-ion impact drill with charger and two batteries. Features a brushless motor for extended life and power.',
                    'price' => 99.00,
                    'originalPrice' => 129.00,
                    'imageUrl' => 'https://placehold.co/400x300/F3F4F6/9CA3AF?text=DRILL',
                    'iconClass' => 'fa-solid fa-drill',
                    'rating' => 4.8,
                    'reviews' => 120,
                    'stock' => 14,
                    'badge' => 'IN STOCK',
                    'badgeColor' => 'bg-green-500',
                    'createdAt' => time() - 3600
                ],
                'p2' => [
                    'id' => 'p2',
                    'name' => 'Heavy Duty Tape Measure 25ft Magnetic',
                    'description' => 'Professional grade 25-foot tape measure with magnetic tip, designed for durability and easy reading on construction sites.',
                    'price' => 19.99,
                    'originalPrice' => 23.50,
                    'imageUrl' => 'https://placehold.co/400x300/F3F4F6/9CA3AF?text=TAPE',
                    'iconClass' => 'fa-solid fa-tape',
                    'rating' => 4.9,
                    'reviews' => 850,
                    'stock' => 55,
                    'badge' => '-15%',
                    'badgeColor' => 'bg-red-500',
                    'createdAt' => time() - 1800
                ]
            ],
            'banners' => [
                'b1' => [
                    'id' => 'b1',
                    'title' => 'Spring Sale: 20% Off All Power Tools!',
                    'subtitle' => 'Limited time offer. Stock up on essential gear now.',
                    'color' => '#DC2626', // Red 600
                    'order' => 1,
                    'createdAt' => time() - 5000
                ]
            ],
            'cart' => [] // User's private cart
        ];
    }
}

init_db();

// --- 2. PHP Request Handling (CRUD & API Endpoint) ---

// Handle AJAX data retrieval
if (isset($_GET['action']) && $_GET['action'] == 'get_data') {
    header('Content-Type: application/json');

    // Sort products by name and banners by order before sending
    $products = $_SESSION['db']['products'];
    usort($products, fn($a, $b) => $a['name'] <=> $b['name']);

    $banners = $_SESSION['db']['banners'];
    usort($banners, fn($a, $b) => $a['order'] <=> $b['order']);

    echo json_encode([
        'products' => array_values($products),
        'banners' => array_values($banners),
        'cart' => $_SESSION['db']['cart']
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

// Handle POST requests for CRUD operations
if (isset($_POST['action'])) {
    header('Content-Type: application/json');
    $response = ['success' => false, 'message' => 'Invalid action.'];
    $data = $_SESSION['db'];

    try {
        switch ($_POST['action']) {
            // --- Product CRUD ---
            case 'add_product':
                $id = uniqid('p');
                // Note: Admin form input is simpler than mock data above, using defaults
                $new_product = [
                    'id' => $id,
                    'name' => trim($_POST['name']),
                    'description' => trim($_POST['description']),
                    'price' => floatval($_POST['price']),
                    'originalPrice' => floatval($_POST['price']), // Default
                    'imageUrl' => trim($_POST['imageUrl']),
                    'iconClass' => 'fa-solid fa-wrench', // Default icon for admin adds
                    'rating' => 5.0,
                    'reviews' => 0,
                    'stock' => 10,
                    'badge' => 'NEW',
                    'badgeColor' => 'bg-green-500',
                    'createdAt' => time()
                ];
                if (!$new_product['name'] || $new_product['price'] <= 0) {
                    throw new Exception("Validation failed: Invalid name or price.");
                }
                $data['products'][$id] = $new_product;
                $response = ['success' => true, 'message' => 'Product added successfully.'];
                break;

            case 'delete_product':
                $id = $_POST['id'];
                if (isset($data['products'][$id])) {
                    unset($data['products'][$id]);
                    $response = ['success' => true, 'message' => 'Product deleted successfully.'];
                } else {
                    throw new Exception("Product not found.");
                }
                break;

            // --- Banner CRUD ---
            case 'add_banner':
                $id = uniqid('b');
                $new_banner = [
                    'id' => $id,
                    'title' => trim($_POST['title']),
                    'subtitle' => trim($_POST['subtitle']),
                    'color' => trim($_POST['color']),
                    'order' => intval($_POST['order']),
                    'createdAt' => time()
                ];
                if (!$new_banner['title'] || !$new_banner['subtitle']) {
                    throw new Exception("Validation failed: Title and Subtitle are required.");
                }
                $data['banners'][$id] = $new_banner;
                $response = ['success' => true, 'message' => 'Banner added successfully.'];
                break;

            case 'delete_banner':
                $id = $_POST['id'];
                if (isset($data['banners'][$id])) {
                    unset($data['banners'][$id]);
                    $response = ['success' => true, 'message' => 'Banner deleted successfully.'];
                } else {
                    throw new Exception("Banner not found.");
                }
                break;

            // --- Cart Management ---
            case 'update_cart':
                $updated_items = json_decode($_POST['items'], true);
                $data['cart'] = $updated_items ?: [];
                $response = ['success' => true, 'message' => 'Cart updated successfully.'];
                break;

            default:
                throw new Exception("Action not recognized.");
        }

        // Save changes to the session
        $_SESSION['db'] = $data;

    } catch (Exception $e) {
        $response = ['success' => false, 'message' => $e->getMessage()];
    }

    echo json_encode($response, JSON_UNESCAPED_UNICODE);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>ProBuild Hardware</title>
    <!-- Tailwind and Custom Config -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            orange: '#FF6B00',
                            dark: '#1A1A1A',
                            gray: '#F3F4F6'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* Hide scrollbar for horizontal scrolling areas */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        body {
            -webkit-tap-highlight-color: transparent;
        }
        .smooth-scroll {
            scroll-behavior: smooth;
        }
        .product-card { transition: all 0.3s ease; }
        .product-card:active { transform: scale(0.98); } /* Touch friendly active state */
        .admin-input { @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-orange focus:border-brand-orange sm:text-sm; }
        
        /* Simulated Realtime Pulse (Uses new brand colors) */
        .realtime-pulse {
            animation: pulse-ring 1.5s infinite;
        }
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7); } /* Brand Orange */
            70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
        }
        
        /* Cart Modal Slide-Up Effect */
        #mobile-cart-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 55;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
            max-height: 90vh;
        }
        #mobile-cart-panel.open {
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 pb-20">

    <!-- Top Navigation / Header (Sticky for mobile convenience) -->
    <header class="sticky top-0 z-40 bg-white shadow-sm px-4 py-3">
        <div class="flex justify-between items-center mb-3">
            <div class="flex items-center gap-2">
                <div class="bg-brand-orange text-white p-1.5 rounded font-bold text-lg">PB</div>
                <h1 class="text-xl font-bold tracking-tight text-brand-dark">ProBuild</h1>
                <!-- Realtime indicator moved near logo -->
                <div id="realtime-indicator" title="Data Polling Active" class="w-2.5 h-2.5 bg-brand-orange rounded-full ml-1"></div>
            </div>
            <div class="flex gap-4">
                <button class="relative text-gray-600 hover:text-brand-orange transition" onclick="toggleView()">
                    <i class="fa-solid fa-toolbox text-xl"></i>
                    <!-- View toggle now uses a tool box icon -->
                </button>
                <button class="relative text-gray-600 hover:text-brand-orange transition" onclick="toggleMobileCart()">
                    <i class="fa-solid fa-cart-shopping text-xl"></i>
                    <span id="cart-badge" class="absolute -top-1 -right-2 bg-red-500 text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center opacity-0 transition-opacity">0</span>
                </button>
            </div>
        </div>
        
        <!-- Search Bar -->
        <div class="relative">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            <input type="text" placeholder="Search drill bits, paint, lumber..." class="w-full bg-gray-100 border-none rounded-lg py-2.5 pl-10 pr-4 text-sm focus:ring-2 focus:ring-brand-orange outline-none transition-all">
            <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                <i class="fa-solid fa-barcode"></i>
            </button>
        </div>
    </header>

    <!-- MAIN APPLICATION CONTAINER -->
    <div id="app-container">
        <!-- Default Store Content -->
        <div class="max-w-7xl mx-auto space-y-6">

            <!-- Hero / Promotional Slider -->
            <div class="px-4 pt-4" id="banner-container">
                <!-- Banners injected here by renderBanners() -->
            </div>

            <!-- Categories (Horizontal Scroll) -->
            <div>
                <div class="flex justify-between px-4 mb-3 items-center">
                    <h3 class="font-bold text-lg">Categories</h3>
                    <a href="#" class="text-brand-orange text-sm font-medium">See All</a>
                </div>
                <div class="flex overflow-x-auto gap-4 px-4 no-scrollbar pb-2">
                    <!-- Hardcoded Categories for visual consistency -->
                    <div class="flex flex-col items-center gap-2 min-w-[70px]">
                        <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 text-xl shadow-sm">
                            <i class="fa-solid fa-hammer"></i>
                        </div>
                        <span class="text-xs font-medium">Tools</span>
                    </div>
                    <div class="flex flex-col items-center gap-2 min-w-[70px]">
                        <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-xl shadow-sm">
                            <i class="fa-solid fa-paint-roller"></i>
                        </div>
                        <span class="text-xs font-medium">Paint</span>
                    </div>
                    <div class="flex flex-col items-center gap-2 min-w-[70px]">
                        <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 text-xl shadow-sm">
                            <i class="fa-solid fa-bolt"></i>
                        </div>
                        <span class="text-xs font-medium">Electrical</span>
                    </div>
                    <div class="flex flex-col items-center gap-2 min-w-[70px]">
                        <div class="w-14 h-14 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 text-xl shadow-sm">
                            <i class="fa-solid fa-faucet"></i>
                        </div>
                        <span class="text-xs font-medium">Plumbing</span>
                    </div>
                     <div class="flex flex-col items-center gap-2 min-w-[70px]">
                        <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 text-xl shadow-sm">
                            <i class="fa-solid fa-helmet-safety"></i>
                        </div>
                        <span class="text-xs font-medium">Safety</span>
                    </div>
                </div>
            </div>

            <!-- Products Grid -->
            <div class="px-4">
                <h3 class="font-bold text-lg mb-3">Trending Hardware</h3>
                <div id="product-list-container" class="grid grid-cols-2 gap-4">
                    <!-- Products injected by renderProducts() -->
                    <div class="col-span-full text-center py-10" id="loading-state">
                        <p class="text-gray-500">Loading products...</p>
                    </div>
                </div>
            </div>
            
            <!-- Recent Projects / Solutions -->
            <div class="px-4 pb-4">
                <h3 class="font-bold text-lg mb-3">Shop by Project</h3>
                <div class="space-y-3">
                    <div class="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-gray-100">
                        <div class="w-16 h-16 bg-blue-50 rounded-lg flex items-center justify-center text-blue-500 text-2xl">
                            <i class="fa-solid fa-shower"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-bold text-sm">Bathroom Renovation</h4>
                            <p class="text-xs text-gray-500 mt-1">Faucets, caulk, tiling tools & more.</p>
                        </div>
                        <i class="fa-solid fa-chevron-right text-gray-300"></i>
                    </div>
                    <div class="flex items-center gap-4 bg-white p-3 rounded-xl shadow-sm border border-gray-100">
                        <div class="w-16 h-16 bg-green-50 rounded-lg flex items-center justify-center text-green-500 text-2xl">
                            <i class="fa-solid fa-tree"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-bold text-sm">Garden & Patio</h4>
                            <p class="text-xs text-gray-500 mt-1">Lumber, stains, outdoor power tools.</p>
                        </div>
                        <i class="fa-solid fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
            </div>

        </div>

        <!-- Admin Dashboard Content (Hidden by Default) -->
        <div id="admin-container" class="hidden">
            <!-- Admin content will be rendered here when toggleView is called -->
        </div>
    </div>


    <!-- Mobile Cart Panel (Slides up from bottom) -->
    <div id="mobile-cart-panel" class="bg-white p-4 pt-6 rounded-t-2xl shadow-2xl overflow-y-auto">
        <button onclick="toggleMobileCart()" class="absolute top-2 right-4 text-gray-500 hover:text-gray-800 font-bold">
            <i class="fa-solid fa-xmark text-xl"></i>
        </button>
        <h2 class="text-xl font-bold text-brand-dark mb-4 border-b pb-2">Shopping Cart</h2>
        
        <div class="max-h-[60vh] overflow-y-auto no-scrollbar">
            <ul id="cart-items-container" class="divide-y divide-gray-100">
                <!-- Cart items populated by renderCart() -->
            </ul>
        </div>

        <div class="mt-4 pt-4 border-t flex justify-between items-center">
            <span class="text-xl font-bold">Total:</span>
            <span id="cart-total" class="text-2xl font-extrabold text-brand-orange">$0.00</span>
        </div>
        <button class="mt-4 w-full bg-brand-dark hover:bg-brand-orange text-white font-bold py-3 rounded-xl shadow-md transition duration-150 ease-in-out">
            <i class="fa-solid fa-credit-card mr-2"></i> Proceed to Checkout
        </button>
    </div>

    <!-- Product Details Modal (Hidden by default) -->
    <div id="product-modal" class="fixed inset-0 z-[60] hidden">
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onclick="closeProductModal()"></div>
        
        <!-- Modal Content -->
        <div class="absolute bottom-0 left-0 w-full h-[90vh] bg-white rounded-t-3xl overflow-y-auto flex flex-col transform transition-transform duration-300 translate-y-full" id="modal-content">
            
            <!-- Draggable handle visual -->
            <div class="w-full flex justify-center pt-3 pb-1 sticky top-0 bg-white z-10" onclick="closeProductModal()">
                <div class="w-12 h-1.5 bg-gray-300 rounded-full"></div>
            </div>

            <!-- Product Images -->
            <div class="relative bg-gray-50 h-64 flex items-center justify-center">
                <i class="fa-solid fa-drill text-8xl text-gray-300" id="modal-img-icon"></i>
                <button class="absolute top-4 right-4 bg-white p-2 rounded-full shadow text-gray-500 hover:text-red-500">
                    <i class="fa-regular fa-heart"></i>
                </button>
                <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
                    <div class="w-2 h-2 rounded-full bg-brand-orange"></div>
                    <div class="w-2 h-2 rounded-full bg-gray-300"></div>
                    <div class="w-2 h-2 rounded-full bg-gray-300"></div>
                </div>
            </div>

            <div class="p-5 pb-24 space-y-6">
                <!-- Title & Price -->
                <div>
                    <div class="flex justify-between items-start">
                        <h2 class="text-xl font-bold text-brand-dark leading-tight w-3/4" id="modal-title">...</h2>
                        <div class="text-right">
                             <div class="text-2xl font-bold text-brand-orange" id="modal-price">$0.00</div>
                             <span class="text-xs text-green-600 font-medium bg-green-100 px-2 py-0.5 rounded" id="modal-stock">In Stock: 0</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 mt-2">
                        <div class="flex text-yellow-400 text-xs" id="modal-rating-stars">
                            <!-- Stars injected here -->
                        </div>
                        <span class="text-sm text-blue-600 underline" id="modal-reviews-link">0 Reviews</span>
                        <span class="text-gray-300">|</span>
                        <span class="text-xs text-gray-500">SKU: N/A</span>
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <h3 class="font-bold text-lg mb-2">Description</h3>
                    <p class="text-sm text-gray-600" id="modal-description">...</p>
                </div>

                <!-- Quantity Selector & Add Button -->
                <div class="fixed bottom-0 left-0 w-full bg-white border-t p-4 flex justify-between items-center shadow-lg z-20">
                    <div class="flex items-center gap-4">
                        <button class="w-10 h-10 border rounded-lg text-gray-600 hover:bg-gray-100" onclick="changeQuantity(-1)">-</button>
                        <span id="modal-quantity" class="font-bold text-lg">1</span>
                        <button class="w-10 h-10 border rounded-lg text-gray-600 hover:bg-gray-100" onclick="changeQuantity(1)">+</button>
                    </div>
                    <button id="modal-add-to-cart" class="bg-brand-orange text-white font-bold py-3 px-6 rounded-xl text-sm shadow-lg active:scale-95 transition flex items-center gap-2">
                        <i class="fa-solid fa-cart-plus"></i> Add to Cart
                    </button>
                </div>

            </div>
        </div>
    </div>


    <!-- Bottom Navigation Bar (Fixed for mobile convenience) -->
    <nav class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 py-2 px-6 flex justify-between items-center z-50 text-xs font-medium text-gray-400">
        <button class="flex flex-col items-center gap-1 text-brand-orange">
            <i class="fa-solid fa-house text-xl"></i>
            <span>Home</span>
        </button>
        <button class="flex flex-col items-center gap-1 hover:text-brand-orange transition">
            <i class="fa-solid fa-layer-group text-xl"></i>
            <span>Catalog</span>
        </button>
        <button class="flex flex-col items-center gap-1 hover:text-brand-orange transition relative">
            <div class="bg-brand-dark text-white rounded-full p-3 -mt-6 border-4 border-gray-50 shadow-lg">
                <i class="fa-solid fa-barcode text-xl"></i>
            </div>
            <span class="mt-1">Scan</span>
        </button>
        <button class="flex flex-col items-center gap-1 hover:text-brand-orange transition">
            <i class="fa-solid fa-heart text-xl"></i>
            <span>Saved</span>
        </button>
        <button class="flex flex-col items-center gap-1 hover:text-brand-orange transition">
            <i class="fa-solid fa-user text-xl"></i>
            <span>Account</span>
        </button>
    </nav>


    <!-- --- 3. JAVASCRIPT LOGIC (Client-side UI and AJAX) --- -->
    <script>
        // --- DOM REFERENCES ---
        let appContainer;
        let productListContainer;
        let cartItemsContainer;
        let cartTotalDisplay;
        let adminProductList;
        let adminBannerList;
        let bannerContainer;
        let viewToggle;
        let realtimeIndicator;
        
        // New UI DOM elements
        let cartBadge;
        let mobileCartPanel;
        let productModal;
        let modalContent;
        let modalTitle, modalPrice, modalStock, modalRatingStars, modalDescription, modalImgIcon, modalQuantity, modalAddToCart;

        // --- DATA STRUCTURES ---
        let products = {}; // Change to object for easy lookup in modal
        let banners = [];
        let cartItems = {};
        let isViewAdmin = false;
        let isMobileCartOpen = false;
        let currentModalProductId = null; // Track which product is open in the modal
        const POLL_INTERVAL = 3000;

        // --- UTILITY FUNCTIONS ---

        function showModal(message, isConfirm = false) {
            return new Promise(resolve => {
                document.querySelectorAll('.custom-modal').forEach(m => m.remove());

                const modalHtml = `
                    <div class="custom-modal fixed inset-0 bg-black/60 flex items-center justify-center z-[70] p-4">
                        <div class="bg-white p-6 rounded-xl shadow-2xl w-full max-w-sm">
                            <p class="text-brand-dark mb-6 text-lg">${message}</p>
                            <div class="flex justify-end space-x-3">
                                ${isConfirm ? `
                                    <button id="modal-cancel" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg transition">Cancel</button>
                                    <button id="modal-ok" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition">OK</button>
                                ` : `
                                    <button id="modal-ok" class="bg-brand-orange hover:bg-opacity-80 text-white font-bold py-2 px-4 rounded-lg transition">Close</button>
                                `}
                            </div>
                        </div>
                    </div>
                `;
                document.body.insertAdjacentHTML('beforeend', modalHtml);

                const modal = document.querySelector('.custom-modal');
                const modalOk = document.getElementById('modal-ok');
                const modalCancel = document.getElementById('modal-cancel');

                modalOk.onclick = () => { modal.remove(); resolve(true); };
                if (modalCancel) { modalCancel.onclick = () => { modal.remove(); resolve(false); }; } 
                else { modal.onclick = (e) => { if (e.target.classList.contains('custom-modal')) { modal.remove(); resolve(true); } }; }
            });
        }

        function pulseIndicator() {
            realtimeIndicator.classList.add('realtime-pulse');
            setTimeout(() => { realtimeIndicator.classList.remove('realtime-pulse'); }, 1000);
        }

        // --- AJAX DATA FETCHING AND POLLING ---

        async function fetchData() {
            try {
                const response = await fetch('?action=get_data');
                const data = await response.json();

                if (data.products) {
                    // Convert products array to object for O(1) lookup
                    products = data.products.reduce((acc, p) => {
                        acc[p.id] = { ...p, price: parseFloat(p.price) };
                        return acc;
                    }, {});
                }
                if (data.banners) { banners = data.banners; }
                if (data.cart) {
                    const newCart = {};
                    for (const id in data.cart) {
                         const item = data.cart[id];
                         if (item.product) { item.product.price = parseFloat(item.product.price); }
                         newCart[id] = item;
                    }
                    cartItems = newCart;
                }

                console.log("Data fetched from PHP backend.");
                updateUI();
                pulseIndicator();
            } catch (error) {
                console.error("Error fetching data:", error);
                const loadingState = document.getElementById('loading-state');
                if (loadingState) { loadingState.innerHTML = `<p class="text-red-600">Error connecting to PHP backend: ${error.message}.</p>`; }
            }
        }

        setInterval(fetchData, POLL_INTERVAL);


        // --- RENDERING FUNCTIONS ---

        function mapDomElements() {
            appContainer = document.getElementById('app-container');
            productListContainer = document.getElementById('product-list-container');
            cartItemsContainer = document.getElementById('cart-items-container');
            cartTotalDisplay = document.getElementById('cart-total');
            adminProductList = document.getElementById('admin-product-list');
            adminBannerList = document.getElementById('admin-banner-list');
            bannerContainer = document.getElementById('banner-container');
            viewToggle = document.getElementById('view-toggle');
            realtimeIndicator = document.getElementById('realtime-indicator');

            // New UI elements
            cartBadge = document.getElementById('cart-badge');
            mobileCartPanel = document.getElementById('mobile-cart-panel');
            productModal = document.getElementById('product-modal');
            modalContent = document.getElementById('modal-content');
            modalTitle = document.getElementById('modal-title');
            modalPrice = document.getElementById('modal-price');
            modalStock = document.getElementById('modal-stock');
            modalRatingStars = document.getElementById('modal-rating-stars');
            modalDescription = document.getElementById('modal-description');
            modalImgIcon = document.getElementById('modal-img-icon');
            modalQuantity = document.getElementById('modal-quantity');
            modalAddToCart = document.getElementById('modal-add-to-cart');
        }

        function renderStars(rating) {
            let html = '';
            for (let i = 1; i <= 5; i++) {
                if (rating >= i) {
                    html += '<i class="fa-solid fa-star"></i>';
                } else if (rating > i - 1) {
                    html += '<i class="fa-solid fa-star-half-stroke"></i>';
                } else {
                    html += '<i class="fa-regular fa-star text-gray-300"></i>';
                }
            }
            return html;
        }

        function renderBanners() {
            if (!bannerContainer) return;
            // Retaining the original static banner structure for the first banner
            const bannerHtml = banners.map(banner => `
                <div class="bg-brand-dark rounded-2xl p-5 text-white relative overflow-hidden shadow-lg h-48 flex flex-col justify-center" style="background-color: ${banner.color || '#1A1A1A'};">
                    <div class="absolute right-0 top-0 w-32 h-full bg-gradient-to-l from-brand-orange to-transparent opacity-20"></div>
                    <span class="bg-brand-orange text-xs font-bold px-2 py-1 rounded w-fit mb-2">PRO MEMBER DEAL</span>
                    <h2 class="text-2xl font-bold mb-1 leading-tight">${banner.title}</h2>
                    <p class="text-gray-300 text-sm mb-4">${banner.subtitle}</p>
                    <button class="bg-white text-brand-dark font-bold py-2 px-4 rounded-lg w-fit text-sm hover:bg-gray-200 transition">Shop Now</button>
                    <i class="fa-solid fa-screwdriver-wrench absolute -right-4 -bottom-4 text-8xl text-white opacity-10 rotate-12"></i>
                </div>
            `).join('');

            bannerContainer.innerHTML = bannerHtml;
        }

        function renderProducts() {
            if (!productListContainer) return;
            const productArray = Object.values(products);

            if (productArray.length === 0) {
                productListContainer.innerHTML = '<p class="col-span-2 text-center text-gray-500">No products available. Check the Admin Dashboard to add some!</p>';
                return;
            }

            productListContainer.innerHTML = productArray.map(product => `
                <div class="product-card bg-white p-3 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between" onclick="openProductModal('${product.id}')">
                    <div class="relative mb-3">
                        ${product.badge ? `<span class="absolute top-0 left-0 text-white text-[10px] font-bold px-1.5 py-0.5 rounded ${product.badgeColor}">${product.badge}</span>` : ''}
                        <div class="h-32 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
                             <i class="${product.iconClass} text-4xl"></i>
                        </div>
                        <button class="absolute bottom-1 right-1 bg-white p-1.5 rounded-full shadow-md text-gray-400 hover:text-red-500">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                    </div>
                    <div>
                        <div class="flex items-center gap-1 mb-1">
                            <div class="flex text-yellow-400 text-xs">${renderStars(product.rating)}</div>
                            <span class="text-xs text-gray-500">${product.rating.toFixed(1)} (${product.reviews})</span>
                        </div>
                        <h4 class="font-semibold text-sm leading-tight mb-1 text-gray-800 line-clamp-2">${product.name}</h4>
                        <div class="flex justify-between items-end mt-2">
                            <div>
                                ${product.originalPrice && product.originalPrice > product.price ? 
                                    `<span class="text-xs text-gray-400 line-through">$${product.originalPrice.toFixed(2)}</span>` : ''}
                                <div class="text-brand-orange font-bold text-lg">$${product.price.toFixed(2)}</div>
                            </div>
                            <button class="bg-brand-dark text-white w-8 h-8 rounded-lg flex items-center justify-center active:scale-95 transition" onclick="event.stopPropagation(); handleAddToCart('${product.id}', '${product.name}', ${product.price})">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function renderCart() {
            if (!cartItemsContainer || !cartTotalDisplay || !cartBadge) return;
            const itemIds = Object.keys(cartItems);
            let total = 0;
            let totalCount = 0;

            if (itemIds.length === 0) {
                cartItemsContainer.innerHTML = '<p class="text-center text-gray-500 py-4">Your cart is empty.</p>';
            } else {
                cartItemsContainer.innerHTML = itemIds.map(productId => {
                    const item = cartItems[productId];
                    const product = products[productId] || item.product || { name: 'Unknown Product', price: 0, iconClass: 'fa-solid fa-box' };
                    const subtotal = item.count * product.price;
                    total += subtotal;
                    totalCount += item.count;

                    return `
                        <li class="flex justify-between items-center py-3 border-b last:border-b-0">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500 text-lg">
                                    <i class="${product.iconClass}"></i>
                                </div>
                                <div class="flex-grow">
                                    <p class="font-semibold text-sm line-clamp-1">${product.name}</p>
                                    <p class="text-xs text-gray-500">$${product.price.toFixed(2)} ea</p>
                                </div>
                            </div>
                            <div class="text-right flex items-center gap-2">
                                <button onclick="handleRemoveFromCart('${productId}', 1)" class="w-6 h-6 border rounded text-gray-600 hover:bg-gray-100 text-xs">-</button>
                                <span class="font-bold text-sm w-4 text-center">${item.count}</span>
                                <button onclick="handleAddToCart('${productId}', '${product.name}', ${product.price})" class="w-6 h-6 border rounded text-gray-600 hover:bg-gray-100 text-xs">+</button>
                            </div>
                        </li>
                    `;
                }).join('');
            }
            
            cartTotalDisplay.textContent = total.toFixed(2);
            cartBadge.textContent = totalCount;
            cartBadge.classList.toggle('opacity-0', totalCount === 0);
        }

        // Admin rendering functions are simplified, using the old table structure
        function renderAdminProducts() {
            if (!adminProductList) return;
            const productArray = Object.values(products);
            adminProductList.innerHTML = productArray.map(product => `
                <tr class="bg-white border-b hover:bg-gray-50">
                    <td class="px-6 py-4 font-medium text-gray-900">${product.name}</td>
                    <td class="px-6 py-4">$${(product.price || 0).toFixed(2)}</td>
                    <td class="px-6 py-4">${String(product.description).substring(0, 50)}...</td>
                    <td class="px-6 py-4 space-x-2">
                        <button onclick="handleDeleteProduct('${product.id}')" class="text-red-600 hover:text-red-800 font-semibold">Delete</button>
                    </td>
                </tr>
            `).join('');
        }

        function renderAdminBanners() {
            if (!adminBannerList) return;
            adminBannerList.innerHTML = banners.map(banner => `
                <tr class="bg-white border-b hover:bg-gray-50">
                    <td class="px-6 py-4 font-medium text-gray-900" style="color: ${banner.color}">${banner.title}</td>
                    <td class="px-6 py-4">${banner.subtitle}</td>
                    <td class="px-6 py-4 text-center">${banner.order}</td>
                    <td class="px-6 py-4 space-x-2">
                        <button onclick="handleDeleteBanner('${banner.id}')" class="text-red-600 hover:text-red-800 font-semibold">Delete</button>
                    </td>
                </tr>
            `).join('');
        }

        function updateUI() {
            if (isViewAdmin) {
                renderAdminProducts();
                renderAdminBanners();
            } else {
                renderBanners();
                renderProducts();
                renderCart();
            }
        }

        // --- ADMIN CRUD HANDLERS (Unchanged logic, adapted to new modal) ---

        async function postData(formData) {
            try {
                const response = await fetch(window.location.pathname, {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                if (result.success) {
                    console.log(`Action successful: ${result.message}`);
                    await fetchData();
                } else {
                    showModal(`Error: ${result.message}`, false);
                    console.error(`Action failed: ${result.message}`);
                }
            } catch (e) {
                showModal('A network error occurred while communicating with the server.', false);
                console.error("AJAX POST error:", e);
            }
        }

        window.handleSubmitProduct = async (event) => {
            event.preventDefault();
            const form = event.target;
            const price = parseFloat(form.price.value);

            if (!form.name.value.trim() || isNaN(price) || price <= 0) {
                showModal('Please enter a valid product name and price.', false);
                return;
            }

            const formData = new FormData();
            formData.append('action', 'add_product');
            formData.append('name', form.name.value.trim());
            formData.append('description', form.description.value.trim());
            formData.append('price', price.toFixed(2));
            formData.append('imageUrl', form.imageUrl.value.trim());

            await postData(formData);
            form.reset();
        };

        window.handleDeleteProduct = async (id) => {
            const confirmed = await showModal('Are you sure you want to delete this product? This action cannot be undone.', true);
            if (!confirmed) return;

            const formData = new FormData();
            formData.append('action', 'delete_product');
            formData.append('id', id);
            await postData(formData);
        };

        window.handleSubmitBanner = async (event) => {
            event.preventDefault();
            const form = event.target;
            const order = parseInt(form.order.value);

            if (!form.title.value.trim() || !form.subtitle.value.trim() || !form.color.value.trim() || isNaN(order)) {
                showModal('Please fill all banner fields.', false);
                return;
            }

            const formData = new FormData();
            formData.append('action', 'add_banner');
            formData.append('title', form.title.value.trim());
            formData.append('subtitle', form.subtitle.value.trim());
            formData.append('color', form.color.value.trim());
            formData.append('order', order);

            await postData(formData);
            form.reset();
        };

        window.handleDeleteBanner = async (id) => {
            const confirmed = await showModal('Are you sure you want to delete this banner?', true);
            if (!confirmed) return;

            const formData = new FormData();
            formData.append('action', 'delete_banner');
            formData.append('id', id);
            await postData(formData);
        };

        // --- CART HANDLERS ---

        async function updateCartBackend() {
            const formData = new FormData();
            formData.append('action', 'update_cart');
            formData.append('items', JSON.stringify(cartItems));
            await postData(formData);
        }

        // Generic wrapper for button clicks
        window.handleAddToCart = async (productId, name, price) => {
            const productPrice = parseFloat(price);
            const updatedItems = { ...cartItems };

            if (updatedItems[productId]) {
                updatedItems[productId].count += 1;
            } else {
                updatedItems[productId] = {
                    count: 1,
                    product: { id: productId, name, price: productPrice }
                };
            }
            cartItems = updatedItems;
            renderCart();
            await updateCartBackend();
        };

        window.handleRemoveFromCart = async (productId) => {
            const updatedItems = { ...cartItems };

            if (updatedItems[productId]) {
                updatedItems[productId].count -= 1;

                if (updatedItems[productId].count <= 0) {
                    delete updatedItems[productId];
                }
            }
            cartItems = updatedItems;
            renderCart();
            await updateCartBackend();
        };
        
        // --- MODAL HANDLERS ---

        let modalQuantityValue = 1;

        window.changeQuantity = (delta) => {
            modalQuantityValue = Math.max(1, modalQuantityValue + delta);
            if (modalQuantity) {
                modalQuantity.textContent = modalQuantityValue;
            }
        };

        window.openProductModal = (id) => {
            const product = products[id];
            if (!product) {
                showModal('Product details not found.', false);
                return;
            }
            
            currentModalProductId = id;
            modalQuantityValue = 1;

            modalTitle.textContent = product.name;
            modalPrice.textContent = `$${product.price.toFixed(2)}`;
            modalStock.textContent = `In Stock: ${product.stock}`;
            modalDescription.textContent = product.description;
            modalImgIcon.className = product.iconClass + ' text-8xl text-gray-300';
            modalRatingStars.innerHTML = renderStars(product.rating);
            document.getElementById('modal-reviews-link').textContent = `${product.reviews} Reviews`;
            modalQuantity.textContent = modalQuantityValue;

            modalAddToCart.onclick = async () => {
                // Add the specific quantity from the modal to the cart
                for (let i = 0; i < modalQuantityValue; i++) {
                    await handleAddToCart(id, product.name, product.price);
                }
                closeProductModal();
                toggleMobileCart(true); // Open the cart panel after adding items
            };

            // Show and slide up the modal
            productModal.classList.remove('hidden');
            setTimeout(() => {
                modalContent.classList.remove('translate-y-full');
            }, 10);
        };

        window.closeProductModal = () => {
            modalContent.classList.add('translate-y-full');
            setTimeout(() => {
                productModal.classList.add('hidden');
                currentModalProductId = null;
            }, 300);
        };

        // --- CART PANEL HANDLER ---
        window.toggleMobileCart = (forceOpen = false) => {
            if (forceOpen === true) {
                isMobileCartOpen = true;
            } else {
                isMobileCartOpen = !isMobileCartOpen;
            }
            
            if (mobileCartPanel) {
                mobileCartPanel.classList.toggle('open', isMobileCartOpen);
            }
        };

        // --- UI TOGGLE (Switch between Store and Admin) ---
        
        function renderAdminTemplate() {
             return `
                <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
                    <h1 class="text-3xl font-extrabold text-brand-dark mb-8">Admin Dashboard</h1>

                    <!-- Product Management -->
                    <div class="bg-white p-6 rounded-xl shadow-lg mb-8">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Product Management</h2>
                        <form id="admin-product-form" onsubmit="handleSubmitProduct(event)" class="grid grid-cols-2 gap-4">
                            <div class="col-span-2 sm:col-span-1">
                                <label for="product-name" class="block text-sm font-medium text-gray-700">Product Name</label>
                                <input type="text" id="product-name" name="name" required class="admin-input">
                            </div>
                            <div class="col-span-2 sm:col-span-1">
                                <label for="product-price" class="block text-sm font-medium text-gray-700">Price ($)</label>
                                <input type="number" step="0.01" id="product-price" name="price" required class="admin-input">
                            </div>
                            <div class="col-span-2">
                                <label for="product-description" class="block text-sm font-medium text-gray-700">Description</label>
                                <textarea id="product-description" name="description" rows="3" required class="admin-input"></textarea>
                            </div>
                            <div class="col-span-2">
                                <label for="product-imageurl" class="block text-sm font-medium text-gray-700">Image URL (Optional)</label>
                                <input type="url" id="product-imageurl" name="imageUrl" class="admin-input">
                            </div>
                            <div class="col-span-2 pt-4">
                                <button type="submit" class="w-full bg-brand-orange hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded-xl shadow-md">
                                    Add New Product
                                </button>
                            </div>
                        </form>

                        <div class="mt-8 overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="admin-product-list" class="divide-y divide-gray-200">
                                    <!-- Admin products populated by renderAdminProducts() -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Banner Management -->
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Banner Management</h2>
                        <form id="admin-banner-form" onsubmit="handleSubmitBanner(event)" class="grid grid-cols-4 gap-4">
                            <div class="col-span-4 sm:col-span-1">
                                <label for="banner-title" class="block text-sm font-medium text-gray-700">Title</label>
                                <input type="text" id="banner-title" name="title" required class="admin-input">
                            </div>
                            <div class="col-span-4 sm:col-span-1">
                                <label for="banner-subtitle" class="block text-sm font-medium text-gray-700">Subtitle</label>
                                <input type="text" id="banner-subtitle" name="subtitle" required class="admin-input">
                            </div>
                            <div class="col-span-2 sm:col-span-1">
                                <label for="banner-color" class="block text-sm font-medium text-gray-700">Color (Hex/Name)</label>
                                <input type="text" id="banner-color" name="color" value="#10B981" required class="admin-input">
                            </div>
                            <div class="col-span-2 sm:col-span-1">
                                <label for="banner-order" class="block text-sm font-medium text-gray-700">Display Order</label>
                                <input type="number" id="banner-order" name="order" value="1" required class="admin-input">
                            </div>
                            <div class="col-span-4 pt-4">
                                <button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded-xl shadow-md">
                                    Add New Banner
                                </button>
                            </div>
                        </form>

                        <div class="mt-8 overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subtitle</th>
                                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Order</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="admin-banner-list" class="divide-y divide-gray-200">
                                    <!-- Admin banners populated by renderAdminBanners() -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        }

        window.toggleView = () => {
            isMobileCartOpen = false; // Close mobile cart on view switch
            isViewAdmin = !isViewAdmin;

            const storeContainer = document.querySelector('main.space-y-6');
            const adminContainer = document.getElementById('admin-container');

            if (isViewAdmin) {
                // Show Admin
                storeContainer.classList.add('hidden');
                adminContainer.classList.remove('hidden');
                adminContainer.innerHTML = renderAdminTemplate();
                viewToggle.innerHTML = '<i class="fa-solid fa-house text-xl"></i>'; // Icon change
            } else {
                // Show Store
                adminContainer.classList.add('hidden');
                storeContainer.classList.remove('hidden');
                viewToggle.innerHTML = '<i class="fa-solid fa-toolbox text-xl"></i>'; // Icon change
            }

            // Re-map elements and refresh data on view switch
            mapDomElements();
            updateUI();
        };

        // --- INIT APP ---

        window.onload = function() {
            // Initial map since the store structure is now static
            mapDomElements();
            
            // Start fetching data and kick off the polling loop
            fetchData();
        }
    </script>
</body>
</html>