<?php
// index.php - Catalog homepage showing product items and quick actions
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require_once 'includes/helper.php';
require_once 'classes/Product.php';
require_once 'classes/Cart.php';

start_secure_session();

$productObj = new Product();
$products = $productObj->getAll();

$message = '';
$error = '';
$csrfToken = generate_csrf_token();

// Handle add-to-cart request
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'add_to_cart') {
    // Force Login to purchase
    if (!isset($_SESSION['user_id'])) {
        header("Location: login.php");
        exit();
    }

    $token = $_POST['csrf_token'] ?? '';
    $productId = (int)($_POST['product_id'] ?? 0);
    $quantity = (int)($_POST['quantity'] ?? 1);
    $size = trim($_POST['size'] ?? 'Free Size');

    if (!validate_csrf_token($token)) {
        $error = "ระบบความปลอดภัย: CSRF Token ไม่ถูกต้อง";
    } else if ($productId <= 0 || $quantity <= 0) {
        $error = "ข้อมูลสินค้าไม่ถูกต้อง";
    } else {
        $cartObj = new Cart();
        if ($cartObj->add($_SESSION['user_id'], $productId, $quantity, $size)) {
            $message = "เพิ่มสินค้าลงในตะกร้าสำเร็จแล้ว! 🛒";
            // Refresh counts in header
            header("Location: index.php?success=" . urlencode($message));
            exit();
        } else {
            $error = "ไม่สามารถเพิ่มสินค้าได้ (สต็อกไม่เพียงพอหรือไม่มีสินค้านี้)";
        }
    }
}

if (isset($_GET['success'])) {
    $message = $_GET['success'];
}

function get_product_emoji($name) {
    $name = mb_strtolower($name, 'UTF-8');
    if (strpos($name, 'เสื้อ') !== false || strpos($name, 'shirt') !== false || strpos($name, 'hoodie') !== false) {
        return '👕';
    } else if (strpos($name, 'กางเกง') !== false || strpos($name, 'jeans') !== false) {
        return '👖';
    } else if (strpos($name, 'หมวก') !== false || strpos($name, 'cap') !== false) {
        return '🧢';
    } else if (strpos($name, 'รองเท้า') !== false || strpos($name, 'sneakers') !== false) {
        return '👟';
    } else if (strpos($name, 'กระเป๋า') !== false || strpos($name, 'backpack') !== false) {
        return '🎒';
    } else if (strpos($name, 'แว่น') !== false || strpos($name, 'sunglasses') !== false) {
        return '🕶️';
    }
    return '🛍️';
}

require_once 'includes/header.php';
?>

<!-- Hero Banner -->
<div class="mb-8 sm:mb-10 rounded-2xl sm:rounded-3xl relative overflow-hidden group border border-amber-500/20 shadow-2xl bg-black" style="min-height: 320px;">
    <!-- Background Image with Couple on the Right -->
    <img src="assets/banner/hero.jpg" alt="CMTC SHOP Banner" class="absolute inset-0 w-full h-full object-cover object-right sm:object-center transition-transform duration-700 group-hover:scale-105" onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src='รูป/banner/hero.jpg'; }">
    <!-- Smooth Left Vignette & Gradient Overlay -->
    <div class="absolute inset-0 bg-gradient-to-r from-black via-black/75 via-50% to-transparent"></div>
    
    <!-- Outer Gold Framing Line -->
    <div class="absolute inset-0 rounded-2xl sm:rounded-3xl border border-amber-400/25 pointer-events-none m-2 sm:m-3"></div>
    
    <!-- Content Section -->
    <div class="relative z-10 p-6 sm:p-10 lg:p-14 flex flex-col justify-center" style="min-height: 320px;">
        <div class="max-w-xl">
            <!-- Badge -->
            <div class="inline-flex items-center gap-1.5 px-3.5 py-1 bg-amber-950/60 text-amber-300 border border-amber-500/40 rounded-full text-xs font-semibold uppercase tracking-wider mb-4 shadow-lg backdrop-blur-md">
                <span class="text-amber-300">✦</span> คอลเลกชันใหม่
            </div>
            
            <!-- Headline -->
            <h1 class="text-2xl sm:text-4xl lg:text-5xl font-black tracking-tight mt-1 mb-3 leading-tight text-transparent bg-clip-text bg-gradient-to-b from-[#fff5db] via-[#edd08a] to-[#c59a3f] drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]">
                แต่งตัวอย่างมีสไตล์ในทุกวัน
            </h1>
            
            <!-- Subtitle -->
            <p class="text-[#cfc2a9] text-xs sm:text-sm md:text-base leading-relaxed mb-6 max-w-lg font-normal drop-shadow">
                เลือกซื้อเสื้อผ้าแฟชั่นและเครื่องประดับพรีเมียม สั่งซื้อง่าย รวดเร็ว ปลอดภัย พร้อมระบบชำระเงินนับถอยหลัง 20 นาที
            </p>
            
            <!-- CTA Buttons -->
            <div class="flex flex-wrap items-center gap-3">
                <a href="#products" class="inline-flex items-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 text-xs sm:text-sm font-bold rounded-xl transition-all duration-300 active:scale-95 shadow-xl bg-gradient-to-r from-[#e3b865] via-[#cda24e] to-[#b3832d] text-[#1c1200] hover:brightness-110 hover:shadow-amber-500/20">
                    ดูสินค้าทั้งหมด <span>↓</span>
                </a>
                <a href="cart.php" class="inline-flex items-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 text-xs sm:text-sm font-semibold rounded-xl transition-all duration-300 active:scale-95 backdrop-blur-md bg-black/40 border border-amber-500/40 text-amber-200 hover:bg-amber-500/10 hover:border-amber-400">
                    ตะกร้า 🛒
                </a>
            </div>
        </div>
    </div>
</div>

<?php if ($message): ?>
    <div class="bg-emerald-950/60 border border-emerald-800 text-emerald-300 p-4 rounded-2xl text-sm mb-8">
        🎉 <?= escape($message) ?>
    </div>
<?php endif; ?>

<?php if ($error): ?>
    <div class="bg-red-950/60 border border-red-800 text-red-300 p-4 rounded-2xl text-sm mb-8 animate-pulse">
        ⚠️ <?= escape($error) ?>
    </div>
<?php endif; ?>

<!-- Floating Manual Button -->
<button onclick="document.getElementById('manualModal').classList.remove('hidden')" class="fixed bottom-6 right-6 z-50 bg-amber-500 hover:bg-amber-400 text-slate-900 w-12 h-12 sm:w-14 sm:h-14 rounded-full shadow-[0_0_15px_rgba(245,158,11,0.5)] flex items-center justify-center transition-transform hover:scale-110 active:scale-95 group border-2 border-amber-300">
    <span class="text-2xl sm:text-3xl drop-shadow-md">📖</span>
    <span class="absolute right-16 bg-black/90 text-amber-300 text-xs sm:text-sm px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-amber-500/50 shadow-lg backdrop-blur-sm pointer-events-none">คู่มือการใช้งาน</span>
</button>

<!-- User Manual Modal -->
<div id="manualModal" class="fixed inset-0 z-[60] hidden bg-black/75 backdrop-blur-md flex items-center justify-center p-4 opacity-0 transition-opacity duration-300" style="display: none;">
    <div class="bg-slate-900 border border-amber-500/30 rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto relative transform scale-95 transition-transform duration-300" id="manualModalContent">
        <!-- Close Button -->
        <button onclick="closeManualModal()" class="absolute top-4 right-4 text-slate-400 hover:text-white bg-slate-800 hover:bg-slate-700 hover:rotate-90 transition-all rounded-full w-8 h-8 flex items-center justify-center border border-slate-700 shadow-md z-10">
            ✕
        </button>
        
        <!-- Modal Content -->
        <div class="p-5 sm:p-8">
            <h2 class="text-xl sm:text-2xl font-bold text-amber-400 mb-4 sm:mb-6 tracking-tight flex items-center gap-2 border-b border-slate-800 pb-4">
                <span class="text-2xl">📖</span> คู่มือการใช้งานสำหรับลูกค้า
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                <!-- Step 1 -->
                <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors">
                    <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2">
                        <span class="text-lg">1️⃣</span> การเข้าสู่ระบบ / สมัครสมาชิก
                    </h3>
                    <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li><strong class="text-slate-200">เข้าสู่ระบบ:</strong> กรอกชื่อผู้ใช้และรหัสผ่านเพื่อเข้าใช้งาน<br><span class="text-[10px] sm:text-xs text-amber-200/70 ml-4 inline-block mt-1 bg-amber-900/20 px-2 py-0.5 rounded border border-amber-900/30">(บัญชีทดสอบ: <code>69319090044</code> หรือ <code>somchai_dev</code> รหัสผ่าน <code>password123</code>)</span></li>
                        <li><strong class="text-slate-200">สมัครสมาชิก:</strong> กรอกข้อมูลพื้นฐานเพื่อสร้างบัญชีใหม่</li>
                    </ul>
                </div>
                <!-- Step 2 -->
                <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors">
                    <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2">
                        <span class="text-lg">2️⃣</span> การเลือกดูและสั่งซื้อสินค้า
                    </h3>
                    <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li>เข้าสู่หน้าหลักเพื่อเลือกดูสินค้าแนะนำ</li>
                        <li>เลือกระบุ <strong class="text-slate-200">ขนาด (Size)</strong> ที่ต้องการในหน้าแรก</li>
                        <li>กดปุ่ม <strong class="text-slate-200">"หยิบใส่ตะกร้า 🛒"</strong> สินค้าจะถูกบันทึกลงตะกร้าทันที</li>
                    </ul>
                </div>
                <!-- Step 3 -->
                <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors">
                    <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2">
                        <span class="text-lg">3️⃣</span> การจัดการตะกร้าสินค้า
                    </h3>
                    <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li><strong class="text-slate-200">ปรับจำนวนสินค้า:</strong> เพิ่ม/ลดจำนวนชิ้น หรือลบรายการสินค้าได้</li>
                        <li><strong class="text-slate-200">สรุปยอดเงิน:</strong> ระบบคำนวณยอดรวมสุทธิพร้อมส่งฟรีให้อัตโนมัติ</li>
                        <li><strong class="text-slate-200">ยืนยันสั่งซื้อ:</strong> กดปุ่ม "สั่งซื้อและดำเนินการชำระเงิน &rarr;"</li>
                    </ul>
                </div>
                <!-- Step 4 -->
                <div class="bg-black/40 border border-slate-800/50 p-4 sm:p-5 rounded-xl hover:border-amber-500/30 hover:bg-black/60 transition-colors">
                    <h3 class="text-base font-semibold text-violet-300 mb-2 flex items-center gap-2">
                        <span class="text-lg">4️⃣</span> การชำระเงิน
                    </h3>
                    <ul class="text-xs sm:text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li>ระบบจะเริ่ม <strong class="text-amber-400">นับเวลาถอยหลัง 20 นาที</strong> แบบ Real-time</li>
                        <li>รองรับการชำระเงินผ่าน <strong class="text-slate-200">PromptPay</strong> และ <strong class="text-slate-200">บัตรเครดิต</strong></li>
                        <li>กด <strong class="text-slate-200">"ยืนยันการชำระเงินสำเร็จ"</strong> เพื่อเสร็จสิ้น</li>
                        <li class="text-red-400 text-[10px] sm:text-xs pt-1">⚠️ หากไม่ชำระภายในเวลา ระบบจะตัดออเดอร์อัตโนมัติ</li>
                    </ul>
                </div>
            </div>
            
            <div class="mt-8 text-center">
                <button onclick="closeManualModal()" class="px-8 py-2.5 bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 text-slate-900 font-bold rounded-xl transition-all shadow-lg hover:shadow-amber-500/30 active:scale-95">
                    เข้าใจแล้ว ปิดหน้าต่าง
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add JS for closing modal on backdrop click and opening it smoothly -->
<script>
    const manualModal = document.getElementById('manualModal');
    const manualModalContent = document.getElementById('manualModalContent');

    // Override the open button onclick
    document.querySelector('button[onclick="document.getElementById(\\\'manualModal\\\').classList.remove(\\\'hidden\\\')"]').onclick = function() {
        manualModal.style.display = 'flex';
        setTimeout(() => {
            manualModal.classList.remove('hidden');
            manualModal.classList.remove('opacity-0');
            manualModal.classList.add('opacity-100');
            manualModalContent.classList.remove('scale-95');
            manualModalContent.classList.add('scale-100');
        }, 10);
    };

    function closeManualModal() {
        manualModal.classList.remove('opacity-100');
        manualModal.classList.add('opacity-0');
        manualModalContent.classList.remove('scale-100');
        manualModalContent.classList.add('scale-95');
        setTimeout(() => {
            manualModal.style.display = 'none';
        }, 300); // Wait for transition
    }

    manualModal.addEventListener('click', function(e) {
        if (e.target === this) {
            closeManualModal();
        }
    });
</script>

<!-- Products Grid Layout -->
<h2 id="products" class="text-xl sm:text-2xl font-bold text-white mb-4 sm:mb-6 tracking-tight scroll-mt-20">สินค้าแนะนำ</h2>
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-5">
    <?php foreach ($products as $product): ?>
        <div class="glass rounded-2xl sm:rounded-3xl p-3 sm:p-5 flex flex-col justify-between hover:scale-[1.02] transition-transform duration-300 shadow-xl group cursor-default">
            <div>
                <?php 
                $imgSrc = get_product_image_url($product['image_url'] ?? $product['image'] ?? '', $product['name'] ?? '');
                ?>
                <div class="aspect-square bg-slate-900 border border-slate-800 rounded-xl overflow-hidden flex items-center justify-center relative">
                    <?php if (!empty($imgSrc)): ?>
                        <img src="<?= escape($imgSrc) ?>" 
                             alt="<?= escape($product['name']) ?>" 
                             class="w-full h-full object-cover" 
                             onerror="if(!this.dataset.tried){ this.dataset.tried='1'; this.src=(this.src.indexOf('assets/')!==-1 ? this.src.replace('assets/','รูป/') : this.src.replace('รูป/','assets/')); } else { this.style.display='none'; if(this.nextElementSibling) this.nextElementSibling.style.display='flex'; }">
                        <div class="w-full h-full hidden items-center justify-center bg-slate-900">
                            <span class="text-3xl sm:text-5xl">📦</span>
                        </div>
                    <?php else: ?>
                        <span class="text-3xl sm:text-5xl">📦</span>
                    <?php endif; ?>
                </div>

                <!-- Detail -->
                <h3 class="text-xs sm:text-sm font-bold text-slate-100 group-hover:text-violet-400 transition-colors line-clamp-2 leading-snug" title="<?= escape($product['name']) ?>"><?= escape($product['name']) ?></h3>
                <p class="text-[10px] sm:text-xs text-slate-400 line-clamp-2 mt-1 mb-3 sm:mb-4 leading-relaxed hidden sm:block"><?= escape($product['description']) ?></p>
            </div>

            <div class="mt-3 sm:mt-0">
                <div class="flex items-center justify-between mb-2.5 sm:mb-4">
                    <span class="text-sm sm:text-lg font-black text-violet-400"><?= format_price($product['price']) ?></span>
                </div>

                <!-- Add to Cart Form -->
                <form action="index.php" method="POST">
                    <input type="hidden" name="csrf_token" value="<?= escape($csrfToken) ?>">
                    <input type="hidden" name="action" value="add_to_cart">
                    <input type="hidden" name="product_id" value="<?= $product['id'] ?>">
                    <input type="hidden" name="quantity" value="1">
                    
                    <!-- Size Selector -->
                    <div class="mb-2">
                        <select name="size" class="w-full px-2.5 py-1.5 bg-slate-900 border border-slate-800 focus:border-violet-500 rounded-lg text-[10px] sm:text-xs text-slate-200 outline-none transition-all">
                            <?php 
                            $sizes = ['Free Size', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
                            $defaultSize = $product['size'] ?? 'Free Size';
                            foreach ($sizes as $s): ?>
                                <option value="<?= escape($s) ?>" <?= $defaultSize === $s ? 'selected' : '' ?>><?= escape($s) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>

                    <button type="submit" <?= $product['stock'] <= 0 ? 'disabled' : '' ?>
                            class="w-full py-2 sm:py-2.5 bg-slate-900 border border-slate-800 text-[10px] sm:text-sm font-semibold rounded-xl text-slate-200 transition-all duration-200
                                   <?= $product['stock'] > 0 
                                       ? 'hover:bg-violet-600 hover:border-violet-500 hover:text-white cursor-pointer active:scale-95 shadow-md shadow-violet-600/5' 
                                       : 'opacity-40 cursor-not-allowed' ?>">
                        <?= $product['stock'] > 0 ? 'หยิบใส่ตะกร้า 🛒' : 'หมดชั่วคราว' ?>
                    </button>
                </form>
            </div>
        </div>
    <?php endforeach; ?>
</div>

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