<?php
// index.php
require_once 'config.php';

// -------------------------------------------------------------
// [1] ส่วนการประมวลผลคำสั่งซื้อและตะกร้าสินค้า (Cart & Get Handlers)
// -------------------------------------------------------------

if (isset($_GET['action'])) {
    $action = $_GET['action'];

    // 1. สลับภาษา (TH/EN)
    if ($action == 'toggle_lang') {
        $_SESSION['lang'] = ($_SESSION['lang'] == 'th') ? 'en' : 'th';
    }
    // 2. สลับธีมสี (Light/Dark Mode)
    if ($action == 'toggle_theme') {
        $_SESSION['theme'] = ($_SESSION['theme'] == 'light') ? 'dark' : 'light';
    }
    // 3. ออกจากระบบ (Logout)
    if ($action == 'logout') {
        $_SESSION['is_logged_in'] = false;
        $_SESSION['user_role'] = 'buyer';
        $_SESSION['username'] = '';
        $_SESSION['cart'] = [];
    }
    // 4. ลบสินค้าออกจากตะกร้า
    if ($action == 'remove_from_cart' && isset($_GET['key'])) {
        $cart_key = $_GET['key'];
        if (isset($_SESSION['cart'][$cart_key])) {
            unset($_SESSION['cart'][$cart_key]);
        }
    }
    // 5. ปรับเปลี่ยนจำนวนสินค้าในตะกร้า
    if ($action == 'update_qty' && isset($_GET['key']) && isset($_GET['change'])) {
        $cart_key = $_GET['key'];
        $change = (int)$_GET['change'];
        
        if (isset($_SESSION['cart'][$cart_key])) {
            $_SESSION['cart'][$cart_key]['qty'] += $change;
            if ($_SESSION['cart'][$cart_key]['qty'] < 1) {
                unset($_SESSION['cart'][$cart_key]);
            }
        }
    }

    header('Location: index.php');
    exit;
}

$txt['my_orders'] = ($lang == 'th') ? 'รายการสั่งซื้อของฉัน' : 'My Orders';
$txt['my_account'] = ($lang == 'th') ? 'บัญชีของฉัน' : 'My Profile';
$txt['seller_centre'] = ($lang == 'th') ? 'ระบบหลังบ้านผู้ขาย' : 'Seller Centre';
$txt['admin_centre'] = ($lang == 'th') ? 'ควบคุมแอดมิน' : 'Admin Control';
?>
<!DOCTYPE html>
<html lang="<?= $lang ?>" class="<?= ($theme == 'dark') ? 'dark' : '' ?> scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noa Luxury Boutique - Exclusive Brandname & Pre-Orders</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sarabun:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', 'Sarabun', sans-serif; }
        .font-serif-luxury { font-family: 'Cormorant Garamond', Georgia, serif; }
        .gold-gradient-text {
            background: linear-gradient(135deg, #b8860b 0%, #d4af37 50%, #996515 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .luxury-card-hover {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .luxury-card-hover:hover {
            transform: translateY(-4px);
        }

        /* LOGIN BUTTON ALWAYS VISIBLE */
        .btn-login {
            background-color: #f59e0b !important;
            color: #000000 !important;
            font-weight: 800 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .btn-login * {
            color: #000000 !important;
        }

        <?php if ($theme == 'light'): ?>
        /* LIGHT MODE HIGH CONTRAST */
        body {
            background-color: #ffffff !important;
            color: #000000 !important;
        }
        p, span, h1, h2, h3, h4, h5, h6, a:not(.btn-login):not(.btn-colored), label, input, button:not(.btn-login), td, th, div {
            color: #000000 !important;
        }
        .text-slate-400, .text-slate-500, .text-slate-600, .text-slate-700, .text-neutral-400, .text-neutral-500 {
            color: #000000 !important;
        }
        .text-red-600, .text-red-500 { color: #dc2626 !important; }
        .text-amber-500, .text-amber-600 { color: #d97706 !important; }
        .bg-slate-900, .bg-black { background-color: #000000 !important; color: #ffffff !important; }
        .bg-slate-900 *, .bg-black * { color: #ffffff !important; }
        .bg-white { background-color: #ffffff !important; }
        <?php else: ?>
        /* DARK MODE HIGH CONTRAST */
        body {
            background-color: #0a0a0a !important;
            color: #ffffff !important;
        }
        p, span, h1, h2, h3, h4, h5, h6, a:not(.btn-login):not(.btn-colored), label, input, button:not(.btn-login), td, th, div {
            color: #ffffff !important;
        }
        .text-slate-400, .text-neutral-400, .text-neutral-500 { color: #cbd5e1 !important; }
        .text-red-600, .text-red-500 { color: #ef4444 !important; }
        .text-amber-500, .text-amber-600 { color: #f59e0b !important; }
        <?php endif; ?>
    </style>
</head>
<body class="min-h-screen antialiased flex flex-col justify-between transition-colors duration-300">

    <!-- NAVIGATION BAR -->
    <nav class="sticky top-0 z-50 backdrop-blur-md border-b py-4 px-6 md:px-12 transition-colors <?= ($theme == 'dark') ? 'bg-neutral-950/95 border-neutral-800' : 'bg-white/95 border-slate-300 shadow-sm' ?>">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            
            <!-- BRAND LOGO -->
            <a href="index.php" class="flex flex-col items-start group">
                <span class="font-serif-luxury text-2xl font-bold tracking-wider gold-gradient-text uppercase">
                    NOA LUXURY
                </span>
                <span class="text-[9px] tracking-[0.3em] uppercase font-bold -mt-1 group-hover:text-amber-600 transition">
                    BOUTIQUE
                </span>
            </a>

            <!-- NAVIGATION ACTIONS -->
            <div class="flex items-center space-x-4 text-xs font-bold">
                
                <!-- TOGGLE LANG -->
                <a href="index.php?action=toggle_lang" class="px-3 py-1 rounded-full border border-slate-400 dark:border-neutral-700 hover:border-amber-500 transition text-[11px] font-extrabold tracking-wider uppercase">
                    🌐 <?= strtoupper($lang) ?>
                </a>

                <!-- TOGGLE THEME -->
                <a href="index.php?action=toggle_theme" class="px-3 py-1 rounded-full border border-slate-400 dark:border-neutral-700 hover:border-amber-500 transition text-[11px] font-extrabold">
                    <?= ($theme == 'light') ? '☀️ ธีมสีขาว (Light)' : '🌙 ธีมสีมืด (Dark)' ?>
                </a>

                <?php if ($_SESSION['is_logged_in']): ?>
                    <div class="flex items-center space-x-3 font-bold">
                        <a href="my_account.php" class="hover:text-amber-600 transition flex items-center gap-1 font-bold">
                            👤 <?= $txt['my_account'] ?>
                        </a>
                        
                        <?php if ($_SESSION['user_role'] === 'buyer'): ?>
                            <a href="my_orders.php" class="hover:text-amber-600 transition flex items-center gap-1 font-bold">
                                📦 <?= $txt['my_orders'] ?>
                            </a>
                        <?php elseif ($_SESSION['user_role'] === 'seller'): ?>
                            <a href="seller_dashboard.php" class="btn-colored bg-amber-600 text-white px-3 py-1.5 rounded-full text-xs font-bold hover:bg-amber-700 transition">
                                🏪 <?= $txt['seller_centre'] ?>
                            </a>
                        <?php elseif ($_SESSION['user_role'] === 'admin'): ?>
                            <a href="my_orders.php" class="hover:text-amber-600 transition flex items-center gap-1 font-bold">
                                📦 <?= $txt['my_orders'] ?>
                            </a>
                            <a href="seller_dashboard.php" class="hover:text-amber-600 transition flex items-center gap-1 font-bold">
                                🏪 <?= $txt['seller_centre'] ?>
                            </a>
                            <a href="admin.php" class="btn-colored bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-md transition">
                                🛡️ <?= $txt['admin_centre'] ?>
                            </a>
                        <?php endif; ?>

                        <span class="text-slate-400">|</span>

                        <a href="index.php?action=logout" class="hover:text-red-600 transition font-bold">
                            <?= $txt['logout'] ?>
                        </a>
                    </div>
                <?php else: ?>
                    <a href="login.php" class="btn-login px-5 py-2 rounded-full text-xs font-extrabold hover:opacity-90 transition shadow-md flex items-center gap-1.5">
                        🔑 <?= $txt['login'] ?>
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </nav>

    <!-- HERO HEADER -->
    <header class="max-w-7xl mx-auto px-6 py-12 text-center animate__animated animate__fadeIn">
        <span class="text-xs font-extrabold uppercase tracking-[0.3em] text-amber-600 dark:text-amber-500 block mb-2">High-End Luxury Collection</span>
        <h1 class="font-serif-luxury text-4xl md:text-6xl font-extrabold tracking-tight mb-3">
            <?= ($lang == 'th') ? 'สินค้าแบรนด์เนมและคอลเลกชันระดับพรีเมียม' : 'Curated Luxury & Designer Collections' ?>
        </h1>
        <p class="text-xs md:text-sm max-w-xl mx-auto font-bold leading-relaxed">
            <?= ($lang == 'th') ? 'คัดสรรสินค้าแท้ 100% สภาพระดับพรีเมียมจากแบรนด์เนมหรูชั้นนำระดับโลก' : 'Discover authentic luxury bags, fine timepieces, and exclusive designer items.' ?>
        </p>
    </header>

    <!-- MAIN CONTENT -->
    <main class="max-w-7xl mx-auto px-6 pb-24 w-full flex-grow">
        
        <?php if (isset($_GET['checkout_success']) && $_GET['checkout_success'] == 1): ?>
            <div class="mb-8 p-4 bg-emerald-900 text-white font-bold rounded-xl text-center shadow-lg border border-emerald-700 animate__animated animate__bounceIn text-xs">
                🎉 <?= $txt['booking_confirm'] ?>
            </div>
        <?php endif; ?>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
            
            <!-- CATALOG GRID (3 Columns out of 4) -->
            <div class="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <?php foreach ($_SESSION['clothing_products'] as $prod): ?>
                    <!-- PRODUCT CARD (ONLY Image, Name, Price, Rating Stars, Sold Count) -->
                    <a href="product_detail.php?id=<?= $prod['id'] ?>" 
                       class="group block luxury-card-hover rounded-2xl overflow-hidden <?= ($theme == 'dark') ? 'bg-neutral-900 border border-neutral-800' : 'bg-white border-2 border-slate-300 shadow-md' ?> p-4 flex flex-col justify-between">
                        
                        <!-- 1. PRODUCT IMAGE -->
                        <div class="aspect-square rounded-xl overflow-hidden bg-slate-100 dark:bg-neutral-800 relative mb-3">
                            <img src="<?= htmlspecialchars($prod['image']) ?>" 
                                 alt="<?= htmlspecialchars($prod['name_th']) ?>" 
                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                        </div>

                        <div class="flex flex-col flex-grow justify-between">
                            <div>
                                <!-- 2. PRODUCT NAME -->
                                <h3 class="text-sm font-extrabold group-hover:text-amber-600 transition line-clamp-1 mb-1.5">
                                    <?= htmlspecialchars(($lang == 'th') ? $prod['name_th'] : $prod['name_en']) ?>
                                </h3>

                                <!-- 3. PRICE -->
                                <div class="text-base font-extrabold mb-2.5">
                                    ฿<?= number_format($prod['price'], 2) ?>
                                </div>
                            </div>

                            <!-- 4. RATING STARS & 5. SOLD COUNT -->
                            <div class="pt-2.5 border-t border-slate-300 dark:border-neutral-800 flex items-center justify-between text-xs font-bold">
                                <!-- Rating Stars -->
                                <div class="flex items-center gap-1">
                                    <span class="text-amber-500">★</span>
                                    <span class="font-extrabold"><?= number_format($prod['rating'] ?? 4.9, 1) ?></span>
                                </div>

                                <!-- Sold Count -->
                                <div class="text-xs font-extrabold">
                                    <?= ($lang == 'th') ? 'ขายแล้ว ' . number_format($prod['sold_count'] ?? 128) . ' ชิ้น' : number_format($prod['sold_count'] ?? 128) . ' sold' ?>
                                </div>
                            </div>
                        </div>

                    </a>
                <?php endforeach; ?>
            </div>

            <!-- SIDE CART (1 Column out of 4) -->
            <div class="lg:col-span-1 rounded-2xl p-5 <?= ($theme == 'dark') ? 'bg-neutral-900 border border-neutral-800' : 'bg-white border-2 border-slate-300 shadow-md' ?> sticky top-24">
                <div class="flex items-center justify-between pb-3 border-b border-slate-300 dark:border-neutral-800 mb-4">
                    <h2 class="text-xs uppercase tracking-widest font-extrabold flex items-center gap-2">
                        <span>🛍️</span> <?= $txt['cart_title'] ?>
                    </h2>
                    <span class="text-xs font-extrabold px-2.5 py-0.5 rounded-full bg-slate-900 text-white dark:bg-white dark:text-slate-900">
                        <?= count($_SESSION['cart']) ?>
                    </span>
                </div>

                <?php if (empty($_SESSION['cart'])): ?>
                    <div class="py-10 text-center">
                        <span class="text-3xl opacity-80">🛍️</span>
                        <p class="text-xs font-extrabold mt-2"><?= $txt['cart_empty'] ?></p>
                    </div>
                <?php else: ?>
                    <div class="space-y-3 max-h-[360px] overflow-y-auto pr-1">
                        <?php 
                        $total_price = 0;
                        foreach ($_SESSION['cart'] as $key => $item): 
                            $item_total = $item['price'] * $item['qty'];
                            $total_price += $item_total;
                        ?>
                            <div class="flex gap-2.5 p-2.5 rounded-xl border border-slate-300 dark:border-neutral-800 items-center justify-between text-xs font-bold">
                                <img src="<?= htmlspecialchars($item['image']) ?>" alt="thumb" class="w-12 h-12 object-cover rounded-lg">
                                <div class="flex-grow min-w-0">
                                    <h4 class="font-extrabold line-clamp-1">
                                        <?= htmlspecialchars(($lang == 'th') ? $item['name_th'] : $item['name_en']) ?>
                                    </h4>
                                    <div class="text-[11px] font-bold flex items-center gap-1.5 mt-0.5">
                                        <span>฿<?= number_format($item['price']) ?></span>
                                        <span>× <?= $item['qty'] ?></span>
                                    </div>
                                </div>
                                <a href="index.php?action=remove_from_cart&key=<?= $key ?>" class="hover:text-red-600 transition font-bold px-1 text-sm">
                                    ✕
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="pt-4 border-t border-slate-300 dark:border-neutral-800 mt-4 space-y-3">
                        <div class="flex justify-between items-center text-xs">
                            <span class="font-bold"><?= $txt['cart_total'] ?></span>
                            <span class="text-base font-extrabold text-amber-600 dark:text-amber-500">฿<?= number_format($total_price, 2) ?></span>
                        </div>
                        <a href="checkout.php" class="w-full text-center block py-3 rounded-full font-bold text-xs bg-slate-900 text-white dark:bg-white dark:text-slate-900 hover:opacity-90 transition shadow-sm">
                            💳 <?= $txt['cart_checkout'] ?>
                        </a>
                    </div>
                <?php endif; ?>
            </div>

        </div>

    </main>

    <!-- FOOTER -->
    <footer class="py-8 text-center text-xs border-t border-slate-300 dark:border-neutral-800 font-bold bg-slate-100 dark:bg-neutral-950">
        <p class="font-serif-luxury text-base tracking-wider mb-1 uppercase font-bold">NOA LUXURY BOUTIQUE</p>
        <p class="text-[11px] font-bold">© 2026 Noa Luxury Shop. All Rights Reserved.</p>
    </footer>

</body>
</html>
