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

// Helper for file uploads (Avatar, Product, Slip)
function handleFileUpload($fileArray, $subfolder = 'avatars') {
    if (!isset($fileArray) || $fileArray['error'] !== UPLOAD_ERR_OK) {
        return ['success' => false, 'message' => 'ไม่มีไฟล์ถูกอัปโหลดหรือเกิดข้อผิดพลาด'];
    }

    $allowedMimes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/jpg'];
    $fileMime = mime_content_type($fileArray['tmp_name']);
    if (!in_array($fileMime, $allowedMimes)) {
        return ['success' => false, 'message' => 'รองรับเฉพาะไฟล์รูปภาพ (JPG, PNG, WEBP, GIF) เท่านั้น'];
    }

    $ext = pathinfo($fileArray['name'], PATHINFO_EXTENSION);
    if (!$ext) $ext = 'jpg';
    $fileName = time() . '_' . rand(1000, 9999) . '.' . strtolower($ext);
    $targetDir = UPLOADS_DIR . '/' . $subfolder;
    if (!file_exists($targetDir)) {
        mkdir($targetDir, 0777, true);
    }
    $targetPath = $targetDir . '/' . $fileName;

    if (move_uploaded_file($fileArray['tmp_name'], $targetPath)) {
        $publicUrl = 'uploads/' . $subfolder . '/' . $fileName;
        return ['success' => true, 'url' => $publicUrl];
    }

    return ['success' => false, 'message' => 'ไม่สามารถบันทึกไฟล์รูปภาพได้'];
}

// Helper for base64 image uploads
function handleBase64Upload($base64Data, $subfolder = 'avatars') {
    if (empty($base64Data) || !preg_match('/^data:image\/(\w+);base64,/', $base64Data, $type)) {
        return ['success' => false, 'message' => 'ข้อมูลรูปภาพไม่ถูกต้อง'];
    }

    $data = substr($base64Data, strpos($base64Data, ',') + 1);
    $ext = strtolower($type[1]);
    if (!in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp'])) {
        $ext = 'png';
    }

    $decoded = base64_decode($data);
    if ($decoded === false) {
        return ['success' => false, 'message' => 'การถอดรหัสรูปภาพล้มเหลว'];
    }

    $fileName = time() . '_' . rand(1000, 9999) . '.' . $ext;
    $targetDir = UPLOADS_DIR . '/' . $subfolder;
    if (!file_exists($targetDir)) {
        mkdir($targetDir, 0777, true);
    }
    $targetPath = $targetDir . '/' . $fileName;

    if (file_put_contents($targetPath, $decoded)) {
        $publicUrl = 'uploads/' . $subfolder . '/' . $fileName;
        return ['success' => true, 'url' => $publicUrl];
    }

    return ['success' => false, 'message' => 'ไม่สามารถบันทึกไฟล์รูปภาพได้'];
}

// Check JSON Payload or multipart POST
$rawInput = file_get_contents('php://input');
$jsonInput = json_decode($rawInput, true);

// --- BACKEND API ENDPOINTS ---
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json; charset=utf-8');
    $data = $jsonInput ?: $_POST;
    $action = $data['action'] ?? '';

    // Action: Member Registration
    if ($action === 'register') {
        $res = registerUser(
            $data['username'] ?? '',
            $data['email'] ?? '',
            $data['password'] ?? '',
            $data['fullName'] ?? '',
            $data['phone'] ?? '',
            $data['address'] ?? ''
        );
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Member Login
    if ($action === 'login') {
        $res = loginUser($data['username'] ?? '', $data['password'] ?? '');
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: 1-Click Quick Demo Login
    if ($action === 'quick_login') {
        $tier = trim($data['tier'] ?? 'classic');
        $res = quickLoginAsTier($tier);
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Member Logout
    if ($action === 'logout') {
        unset($_SESSION['user']);
        echo json_encode(['success' => true, 'message' => 'ออกจากระบบเรียบร้อยแล้ว'], JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Claim Daily Shopee Coins (7-Day Streak)
    if ($action === 'claim_daily_coins') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อนรับเหรียญ'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $res = claimDailyCoinsWithStreak($user['id']);
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Lucky Spin Wheel
    if ($action === 'lucky_spin') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อนหมุนวงล้อ'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $res = spinLuckyWheel($user['id']);
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Claim Mission Reward
    if ($action === 'claim_mission') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อน'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $missionId = trim($data['missionId'] ?? '');
        $res = claimMissionReward($user['id'], $missionId);
        if (!$res['success']) {
            http_response_code(400);
        }
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Collect Voucher
    if ($action === 'collect_voucher') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อนเก็บโค้ด'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $code = trim($data['voucherCode'] ?? '');
        if (empty($code)) {
            http_response_code(400);
            echo json_encode(['success' => false, 'message' => 'รหัสโค้ดไม่ถูกต้อง'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $res = collectVoucher($user['id'], $code);
        echo json_encode($res, JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Update User Profile & Avatar
    if ($action === 'update_profile') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อน'], JSON_UNESCAPED_UNICODE);
            exit;
        }
        $pdo = getDbConnection();
        $fullName = trim($data['fullName'] ?? '');
        $phone = trim($data['phone'] ?? '');
        $address = trim($data['address'] ?? '');
        $gender = trim($data['gender'] ?? 'other');
        $birthday = trim($data['birthday'] ?? '');
        $avatarUrl = trim($data['avatar'] ?? $user['avatar']);

        if (isset($_FILES['avatar_file'])) {
            $uploadRes = handleFileUpload($_FILES['avatar_file'], 'avatars');
            if ($uploadRes['success']) {
                $avatarUrl = $uploadRes['url'];
            }
        } elseif (!empty($data['avatar_base64'])) {
            $uploadRes = handleBase64Upload($data['avatar_base64'], 'avatars');
            if ($uploadRes['success']) {
                $avatarUrl = $uploadRes['url'];
            }
        }

        if ($pdo && !empty($fullName) && !empty($phone)) {
            $stmt = $pdo->prepare("UPDATE users SET full_name = ?, phone = ?, address = ?, gender = ?, birthday = ?, avatar = ? WHERE id = ?");
            $stmt->execute([$fullName, $phone, $address, $gender, $birthday, $avatarUrl, $user['id']]);

            $stmtUser = $pdo->prepare("SELECT * FROM users WHERE id = ?");
            $stmtUser->execute([$user['id']]);
            $updatedUser = formatUserData($stmtUser->fetch());
            $_SESSION['user'] = $updatedUser;

            echo json_encode(['success' => true, 'message' => 'อัปเดตข้อมูลโปรไฟล์ Shopee สำเร็จแล้ว', 'user' => $updatedUser], JSON_UNESCAPED_UNICODE);
        } else {
            http_response_code(400);
            echo json_encode(['success' => false, 'message' => 'ข้อมูลไม่ถูกต้อง กรุณาระบุชื่อและเบอร์โทร'], JSON_UNESCAPED_UNICODE);
        }
        exit;
    }

    // Action: Upload Avatar Directly
    if ($action === 'upload_avatar') {
        $user = getLoggedInUser();
        if (!$user) {
            http_response_code(401);
            echo json_encode(['success' => false, 'message' => 'กรุณาเข้าสู่ระบบก่อน'], JSON_UNESCAPED_UNICODE);
            exit;
        }

        $avatarUrl = '';
        if (isset($_FILES['avatar_file'])) {
            $uploadRes = handleFileUpload($_FILES['avatar_file'], 'avatars');
            if ($uploadRes['success']) {
                $avatarUrl = $uploadRes['url'];
            } else {
                http_response_code(400);
                echo json_encode($uploadRes, JSON_UNESCAPED_UNICODE);
                exit;
            }
        } elseif (!empty($data['avatar_base64'])) {
            $uploadRes = handleBase64Upload($data['avatar_base64'], 'avatars');
            if ($uploadRes['success']) {
                $avatarUrl = $uploadRes['url'];
            } else {
                http_response_code(400);
                echo json_encode($uploadRes, JSON_UNESCAPED_UNICODE);
                exit;
            }
        }

        if ($avatarUrl) {
            $pdo = getDbConnection();
            $stmt = $pdo->prepare("UPDATE users SET avatar = ? WHERE id = ?");
            $stmt->execute([$avatarUrl, $user['id']]);

            $stmtUser = $pdo->prepare("SELECT * FROM users WHERE id = ?");
            $stmtUser->execute([$user['id']]);
            $updatedUser = formatUserData($stmtUser->fetch());
            $_SESSION['user'] = $updatedUser;

            echo json_encode(['success' => true, 'message' => 'เปลี่ยนรูปโปรไฟล์สำเร็จ!', 'user' => $updatedUser, 'avatar' => $avatarUrl], JSON_UNESCAPED_UNICODE);
            exit;
        }

        http_response_code(400);
        echo json_encode(['success' => false, 'message' => 'ไม่มีไฟล์ถูกอัปโหลด'], JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Add Product with Image
    if ($action === 'add_product') {
        $name = trim($data['name'] ?? '');
        $category = trim($data['category'] ?? 't-shirts');
        $categoryName = trim($data['category_name'] ?? 'เสื้อผ้าแฟชั่น');
        $subtitle = trim($data['subtitle'] ?? '');
        $description = trim($data['description'] ?? '');
        $price = floatval($data['price'] ?? 390);
        $originalPrice = floatval($data['original_price'] ?? ($price * 1.5));
        $badge = trim($data['badge'] ?? 'NEW ARRIVAL');
        $badgeColor = trim($data['badge_color'] ?? 'bg-emerald-600');
        $sizes = $data['sizes'] ?? ['S', 'M', 'L', 'XL', '2XL'];
        if (is_string($sizes)) {
            $sizes = array_map('trim', explode(',', $sizes));
        }

        $imageUrl = 'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop&q=80';
        if (isset($_FILES['product_image'])) {
            $uploadRes = handleFileUpload($_FILES['product_image'], 'products');
            if ($uploadRes['success']) {
                $imageUrl = $uploadRes['url'];
            }
        } elseif (!empty($data['image_base64'])) {
            $uploadRes = handleBase64Upload($data['image_base64'], 'products');
            if ($uploadRes['success']) {
                $imageUrl = $uploadRes['url'];
            }
        } elseif (!empty($data['image_url'])) {
            $imageUrl = trim($data['image_url']);
        }

        if (empty($name) || $price <= 0) {
            http_response_code(400);
            echo json_encode(['success' => false, 'message' => 'กรุณาระบุชื่อสินค้าและราคาที่ถูกต้อง'], JSON_UNESCAPED_UNICODE);
            exit;
        }

        $productId = 'custom-' . time() . '-' . rand(100, 999);
        $newProduct = [
            'id' => $productId,
            'category' => $category,
            'category_name' => $categoryName,
            'name' => $name,
            'subtitle' => $subtitle ?: 'สินค้าแฟชั่นสตรีทพรีเมียม APEX STUDIO',
            'price' => $price,
            'original_price' => $originalPrice,
            'sold_count' => rand(10, 50),
            'badge' => $badge,
            'badge_color' => $badgeColor,
            'rating' => 5.0,
            'reviews_count' => rand(5, 20),
            'image' => $imageUrl,
            'gallery' => [$imageUrl],
            'colors' => [
                ['id' => 'custom-black', 'name' => 'Classic Black', 'hex' => '#18181b', 'collarHex' => '#09090b', 'textDark' => false, 'printColor' => '#ffffff'],
                ['id' => 'custom-white', 'name' => 'Off-White', 'hex' => '#f5f5f4', 'collarHex' => '#e7e5e4', 'textDark' => true, 'printColor' => '#0f172a']
            ],
            'sizes' => $sizes,
            'description' => $description ?: 'สินค้าแฟชั่นสตรีทแวร์คุณภาพสูง ดีไซน์พรีเมียม สวมใส่สบาย'
        ];

        saveCustomProduct($newProduct);

        echo json_encode([
            'success' => true,
            'message' => 'เพิ่มสินค้าใหม่และอัปโหลดรูปภาพสำเร็จแล้ว!',
            'product' => $newProduct,
            'allProducts' => getAllProducts()
        ], JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Upload Payment Slip
    if ($action === 'upload_slip') {
        $orderId = trim($data['orderId'] ?? '');
        $slipUrl = '';

        if (isset($_FILES['slip_image'])) {
            $uploadRes = handleFileUpload($_FILES['slip_image'], 'slips');
            if ($uploadRes['success']) {
                $slipUrl = $uploadRes['url'];
            }
        } elseif (!empty($data['slip_base64'])) {
            $uploadRes = handleBase64Upload($data['slip_base64'], 'slips');
            if ($uploadRes['success']) {
                $slipUrl = $uploadRes['url'];
            }
        }

        if (!$slipUrl) {
            http_response_code(400);
            echo json_encode(['success' => false, 'message' => 'ไม่พบไฟล์สลิปหรืออัปโหลดล้มเหลว'], JSON_UNESCAPED_UNICODE);
            exit;
        }

        $pdo = getDbConnection();
        if ($pdo && !empty($orderId)) {
            $stmt = $pdo->prepare("UPDATE orders SET slip_image = ?, status = 'Slip Uploaded' WHERE order_id = ?");
            $stmt->execute([$slipUrl, $orderId]);
        }

        $orders = getAllOrders();
        foreach ($orders as &$ord) {
            if ($ord['orderId'] === $orderId) {
                $ord['slipImage'] = $slipUrl;
                $ord['status'] = 'Slip Uploaded';
                break;
            }
        }
        file_put_contents(ORDERS_FILE, json_encode($orders, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

        echo json_encode(['success' => true, 'message' => 'อัปโหลดสลิปโอนเงินสำเร็จ! เจ้าหน้าที่จะตรวจสอบยอดชำระ', 'slipUrl' => $slipUrl], JSON_UNESCAPED_UNICODE);
        exit;
    }

    // Action: Submit New Order / Pre-Order with Shopee Coins & Vouchers
    $fullName = trim($data['fullName'] ?? '');
    $phone = trim($data['phone'] ?? '');
    $address = trim($data['address'] ?? '');
    $note = trim($data['note'] ?? '');
    $paymentMethod = trim($data['paymentMethod'] ?? 'promptpay');
    $items = $data['items'] ?? [];
    $coinsToUse = max(0, intval($data['coinsUsed'] ?? 0));
    $voucherCode = trim($data['voucherCode'] ?? '');

    $errors = [];
    if (empty($fullName)) {
        $errors[] = 'กรุณากรอกชื่อ-นามสกุล';
    }

    $rawPhone = preg_replace('/\D/', '', $phone);
    if (empty($rawPhone) || strlen($rawPhone) !== 10 || !preg_match('/^(06|08|09)/', $rawPhone)) {
        $errors[] = 'เบอร์โทรศัพท์ต้องมี 10 หลัก ขึ้นต้นด้วย 06, 08 หรือ 09';
    }

    if (empty($address) || strlen($address) < 10) {
        $errors[] = 'กรุณากรอกที่อยู่จัดส่งสินค้าให้ครบถ้วน';
    }

    if (empty($items) || !is_array($items)) {
        $errors[] = 'ไม่มีรายการสินค้าในตะกร้า';
    }

    $currentRemaining = getRemainingStock();
    $totalRequestedQty = 0;
    foreach ($items as $item) {
        $totalRequestedQty += max(1, intval($item['quantity'] ?? 1));
    }

    if ($totalRequestedQty > $currentRemaining) {
        $errors[] = "ขออภัย สินค้าคงเหลือเพียง {$currentRemaining} ชิ้น ไม่พอสำหรับจำนวนที่สั่งซื้อ ({$totalRequestedQty} ชิ้น)";
    }

    if (!empty($errors)) {
        http_response_code(422);
        echo json_encode(['success' => false, 'message' => implode(' | ', $errors)], JSON_UNESCAPED_UNICODE);
        exit;
    }

    $subtotal = 0;
    $totalQty = 0;
    $validatedItems = [];

    foreach ($items as $item) {
        $qty = max(1, intval($item['quantity'] ?? 1));
        $itemPrice = floatval($item['price'] ?? PRODUCT_PRICE);
        $itemSubtotal = $itemPrice * $qty;
        $subtotal += $itemSubtotal;
        $totalQty += $qty;

        $validatedItems[] = [
            'title' => $item['title'] ?? 'Apex Streetwear Item',
            'color' => $item['color'] ?? [],
            'size' => $item['size'] ?? [],
            'price' => $itemPrice,
            'quantity' => $qty,
            'subtotal' => $itemSubtotal,
            'image' => $item['image'] ?? ''
        ];
    }

    $shippingCost = ($totalQty >= FREE_SHIPPING_MIN_QTY) ? 0 : SHIPPING_FEE;
    
    // Voucher calculation
    $voucherDiscount = 0;
    if ($voucherCode === 'SHOPEEFREE') {
        $voucherDiscount = $shippingCost;
        $shippingCost = 0;
    } elseif ($voucherCode === 'MALL10') {
        $voucherDiscount = round($subtotal * 0.10);
    } elseif ($voucherCode === 'NEWUSER50') {
        $voucherDiscount = min(50, $subtotal);
    } elseif ($voucherCode === 'BDAY100') {
        $voucherDiscount = min(100, $subtotal);
    }

    $codFee = ($paymentMethod === 'cod') ? 20 : 0;
    $promoDiscount = intval($data['discount'] ?? 0);
    $totalDiscount = $voucherDiscount + $promoDiscount;

    // Coins deduction (1 Coin = 1 THB)
    $loggedInUser = getLoggedInUser();
    $maxCoinsAvailable = $loggedInUser ? intval($loggedInUser['coins'] ?? 0) : 0;
    $actualCoinsUsed = min($coinsToUse, $maxCoinsAvailable, max(0, $subtotal + $shippingCost + $codFee - $totalDiscount));
    
    $grandTotal = max(0, $subtotal + $shippingCost + $codFee - $totalDiscount - $actualCoinsUsed);

    // Coins earned calculation (Shopee Cashback e.g. 1% - 10%)
    $cashbackRate = 0.05;
    if ($loggedInUser && isset($loggedInUser['tier_info']['coinCashback'])) {
        $cashbackRate = floatval($loggedInUser['tier_info']['coinCashback']) / 100;
    }
    if ($voucherCode === 'COINBACK20') {
        $cashbackRate = 0.20;
    }
    $coinsEarned = max(1, round($grandTotal * $cashbackRate));

    $formattedPhone = sprintf('%s-%s-%s', substr($rawPhone, 0, 3), substr($rawPhone, 3, 3), substr($rawPhone, 6));
    $orderRef = 'SHP-' . date('Ymd') . '-' . rand(1000, 9999);
    $paymentLabel = ($paymentMethod === 'cod') ? 'เก็บเงินปลายทาง (COD)' : 'Mobile Banking (Thai QR PromptPay)';

    $newOrder = [
        'orderId' => $orderRef,
        'userId' => $loggedInUser ? $loggedInUser['id'] : null,
        'customer' => [
            'fullName' => $fullName,
            'phone' => $formattedPhone,
            'rawPhone' => $rawPhone,
            'address' => $address,
            'note' => $note,
            'paymentMethod' => $paymentMethod,
            'paymentLabel' => $paymentLabel
        ],
        'items' => $validatedItems,
        'subtotal' => $subtotal,
        'shipping' => $shippingCost,
        'codFee' => $codFee,
        'discount' => $totalDiscount,
        'voucherCode' => $voucherCode,
        'coinsUsed' => $actualCoinsUsed,
        'coinsEarned' => $coinsEarned,
        'grandTotal' => $grandTotal,
        'status' => ($paymentMethod === 'cod') ? 'Pending COD' : 'Pending Payment',
        'slipImage' => '',
        'trackingNumber' => 'TH' . rand(10000000, 99999999) . 'EX',
        'createdAt' => date('Y-m-d H:i:s'),
        'estimatedDelivery' => '25 สิงหาคม 2026'
    ];

    $existingOrders = getAllOrders();
    array_unshift($existingOrders, $newOrder);
    file_put_contents(ORDERS_FILE, json_encode($existingOrders, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

    // Save to database
    saveOrderToDb($newOrder, $loggedInUser ? $loggedInUser['id'] : null);

    // Refresh logged in user
    $freshUser = getLoggedInUser();

    echo json_encode([
        'success' => true,
        'order' => $newOrder,
        'user' => $freshUser,
        'totalOrdered' => getTotalOrderedCount(),
        'remainingStock' => getRemainingStock(),
        'allOrders' => $existingOrders
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'GET' && (isset($_GET['api']) || isset($_GET['action']) || isset($_GET['search']))) {
    header('Content-Type: application/json; charset=utf-8');

    $action = $_GET['action'] ?? '';
    if ($action === 'get_orders') {
        echo json_encode(['success' => true, 'orders' => getAllOrders()], JSON_UNESCAPED_UNICODE);
        exit;
    }

    if ($action === 'get_user') {
        $user = getLoggedInUser();
        $userOrders = $user ? getUserOrdersFromDb($user['id']) : [];
        $coinLogs = $user ? getCoinLogs($user['id'], 30) : [];
        echo json_encode([
            'success' => true,
            'user' => $user,
            'orders' => $userOrders,
            'coinLogs' => $coinLogs,
            'tiers' => $SHOPEE_TIERS,
            'vouchers' => $AVAILABLE_VOUCHERS,
            'missions' => $SHOPEE_MISSIONS,
            'streakRewards' => $DAILY_STREAK_REWARDS
        ], JSON_UNESCAPED_UNICODE);
        exit;
    }

    if ($action === 'get_products') {
        echo json_encode(['success' => true, 'products' => getAllProducts()], JSON_UNESCAPED_UNICODE);
        exit;
    }

    $search = trim($_GET['search'] ?? '');
    if (!empty($search)) {
        $cleanSearch = preg_replace('/\D/', '', $search);
        $orders = getAllOrders();
        $matched = [];

        foreach ($orders as $order) {
            if (
                $order['orderId'] === $search ||
                (isset($order['customer']['rawPhone']) && $order['customer']['rawPhone'] === $cleanSearch) ||
                (isset($order['customer']['phone']) && str_replace('-', '', $order['customer']['phone']) === $cleanSearch)
            ) {
                $matched[] = $order;
            }
        }
        echo json_encode(['success' => true, 'orders' => $matched], JSON_UNESCAPED_UNICODE);
        exit;
    }

    echo json_encode([
        'success' => true,
        'totalOrdered' => getTotalOrderedCount(),
        'remainingStock' => getRemainingStock(),
        'orders' => getAllOrders(),
        'products' => getAllProducts()
    ], JSON_UNESCAPED_UNICODE);
    exit;
}

// Initial Data for Frontend
$allOrdersData = getAllOrders();
$initialTotalOrdered = getTotalOrderedCount();
$initialRemainingStock = getRemainingStock();
$currentUser = getLoggedInUser();
$allProducts = getAllProducts();
?>
<!DOCTYPE html>
<html lang="th" class="dark scroll-smooth">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  
  <title>Shopee Mall x APEX STUDIO - ระบบสมาชิก VIP Club & แฟชั่นสตรีท</title>
  <meta name="title" content="Shopee Mall x APEX STUDIO - ระบบสมาชิก Shopee VIP">
  <meta name="description" content="ระบบสมาชิก Shopee VIP Club รับ Shopee Coins, เช็คอิน 7 วัน, วงล้อหมุนลุ้นโชค, ภารกิจสะสมเหรียญ และคูปองส่งฟรี">
  <meta name="theme-color" content="#ee4d2d">

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            shopee: {
              DEFAULT: '#ee4d2d',
              dark: '#d03b1a',
              light: '#ff6433',
              gold: '#f6a700',
              bg: '#0f172a'
            }
          },
          fontFamily: {
            sans: ['Plus Jakarta Sans', 'Prompt', 'sans-serif'],
          }
        }
      }
    }
  </script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- Embedded Custom CSS -->
  <style>
    :root {
      --font-sans: 'Plus Jakarta Sans', 'Prompt', sans-serif;
    }

    body {
      font-family: var(--font-sans);
      background-color: #080d1a;
      color: #f8fafc;
      overflow-x: hidden;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }
    ::-webkit-scrollbar-track {
      background: #080d1a;
    }
    ::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #ee4d2d;
    }

    .glass-panel {
      background: rgba(15, 23, 42, 0.78);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .glass-card {
      background: rgba(18, 26, 47, 0.65);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .shopee-gradient {
      background: linear-gradient(135deg, #ff5722 0%, #ee4d2d 50%, #d03b1a 100%);
    }

    .shopee-gold-gradient {
      background: linear-gradient(135deg, #ffd700 0%, #f6a700 50%, #d48800 100%);
    }

    .shopee-vip-gradient {
      background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4338ca 100%);
    }

    .hologram-card {
      position: relative;
      background-size: 200% 200%;
      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hologram-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(125deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);
      pointer-events: none;
      border-radius: inherit;
    }

    @keyframes spinWheel {
      from { transform: rotate(0deg); }
      to { transform: rotate(1800deg); }
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 0.85; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.02); }
    }
    .animate-pulse-glow {
      animation: pulseGlow 2.5s ease-in-out infinite;
    }

    @keyframes slideInRight {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
    }
    .animate-slide-in-right {
      animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .touch-target {
      min-height: 44px;
      min-width: 44px;
    }
  </style>

  <!-- React 18 UMD & Babel Standalone -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!-- Initial PHP Data -->
  <script>
    window.PHP_STORE_CONFIG = {
      storeName: "<?php echo STORE_NAME; ?>",
      productName: "<?php echo PRODUCT_NAME; ?>",
      productPrice: <?php echo PRODUCT_PRICE; ?>,
      shippingFee: <?php echo SHIPPING_FEE; ?>,
      freeShippingMinQty: <?php echo FREE_SHIPPING_MIN_QTY; ?>,
      campaignGoal: <?php echo TOTAL_STOCK_LIMIT; ?>,
      initialOrdered: <?php echo INITIAL_ORDER_OFFSET; ?>,
      totalOrdered: <?php echo $initialTotalOrdered; ?>,
      remainingStock: <?php echo $initialRemainingStock; ?>,
      adminPassword: "<?php echo ADMIN_PASSWORD; ?>"
    };
    window.PHP_COLOR_OPTIONS = <?php echo json_encode($COLOR_OPTIONS, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_SIZE_OPTIONS = <?php echo json_encode($SIZE_OPTIONS, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_INITIAL_ORDERS = <?php echo json_encode($allOrdersData, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_USER = <?php echo json_encode($currentUser, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_FASHION_CATALOG = <?php echo json_encode($allProducts, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_SHOPEE_TIERS = <?php echo json_encode($SHOPEE_TIERS, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_AVAILABLE_VOUCHERS = <?php echo json_encode($AVAILABLE_VOUCHERS, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_SHOPEE_MISSIONS = <?php echo json_encode($SHOPEE_MISSIONS, JSON_UNESCAPED_UNICODE); ?>;
    window.PHP_STREAK_REWARDS = <?php echo json_encode($DAILY_STREAK_REWARDS, JSON_UNESCAPED_UNICODE); ?>;
  </script>
</head>
<body class="bg-[#080d1a] text-slate-100 antialiased min-h-screen">
  
  <div id="root">
    <div class="min-h-screen flex flex-col items-center justify-center space-y-4 bg-[#080d1a] text-white">
      <div class="w-14 h-14 rounded-2xl shopee-gradient animate-bounce flex items-center justify-center shadow-lg shadow-orange-500/30">
        <span class="text-white font-black text-2xl">S</span>
      </div>
      <p class="text-xs font-bold text-orange-400 tracking-wider">กำลังโหลด SHOPEE MALL x APEX STUDIO VIP CLUB...</p>
    </div>
  </div>

  <script type="text/babel">
    const { useState, useEffect, useMemo, useCallback, useRef } = React;

    const STORE_CONFIG = window.PHP_STORE_CONFIG || {};
    const COLOR_OPTIONS = window.PHP_COLOR_OPTIONS || [];
    const SIZE_OPTIONS = window.PHP_SIZE_OPTIONS || [];
    const SHOPEE_TIERS = window.PHP_SHOPEE_TIERS || {};
    const AVAILABLE_VOUCHERS = window.PHP_AVAILABLE_VOUCHERS || [];
    const SHOPEE_MISSIONS = window.PHP_SHOPEE_MISSIONS || [];
    const STREAK_REWARDS = window.PHP_STREAK_REWARDS || {};

    // --- ICONS ---
    const Icons = {
      Shopee: ({ className = "w-5 h-5" }) => (
        <svg className={className} viewBox="0 0 24 24" fill="currentColor">
          <path d="M19.5 8H16V6.5C16 4.01 13.99 2 11.5 2S7 4.01 7 6.5V8H3.5C2.67 8 2 8.67 2 9.5l1.25 10.5C3.36 20.89 4.19 21.7 5.09 21.7h12.82c.9 0 1.73-.81 1.84-1.7L21 9.5c0-.83-.67-1.5-1.5-1.5zM9 6.5C9 5.12 10.12 4 11.5 4S14 5.12 14 6.5V8H9V6.5zm7.3 10.15c-.24.77-.96 1.35-1.92 1.35-.91 0-1.63-.52-1.9-1.28l1.1-.42c.13.41.45.67.8.67.43 0 .78-.28.78-.63 0-.31-.19-.48-.73-.67l-.67-.24c-.95-.34-1.42-.92-1.42-1.7 0-1.12.91-1.89 2.04-1.89.9 0 1.58.48 1.84 1.23l-1.07.45c-.14-.38-.41-.62-.77-.62-.39 0-.69.25-.69.58 0 .28.18.45.63.6l.66.23c1.07.38 1.56.96 1.56 1.78 0 .02-.01.37-.24.59z" />
        </svg>
      ),
      Coins: ({ className = "w-5 h-5" }) => (
        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
          <circle cx="9" cy="9" r="7" stroke="currentColor" fill="currentColor" fillOpacity="0.15" />
          <path d="M15 9a7 7 0 11-7 7" strokeLinecap="round" />
          <path d="M9 7v4m-2-2h4" strokeLinecap="round" />
        </svg>
      ),
      ShoppingBag: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
        </svg>
      ),
      Sparkles: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
        </svg>
      ),
      Truck: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1e1 1h4.586a1 1 0 01.707.293l2.414 2.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 100-4 2 2 0 000 4zm10 0a2 2 0 100-4 2 2 0 000 4z" />
        </svg>
      ),
      Check: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
        </svg>
      ),
      Plus: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
        </svg>
      ),
      Minus: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M20 12H4" />
        </svg>
      ),
      Trash: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
      ),
      X: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      ),
      Upload: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
        </svg>
      ),
      Image: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
      ),
      User: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
      ),
      Tag: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
        </svg>
      ),
      QrCode: ({ className = "w-5 h-5" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v1m6 0h2m-6 0h-2v4h4V5zm-6 0H4v4h4V5zm0 10H4v4h4v-4zm10 0h-4v4h4v-4zm-4-6h.01M12 12h4v4h-4v-4zm-6 0h.01M6 12v.01M18 12v.01" />
        </svg>
      ),
      Calendar: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
          <line x1="16" y1="2" x2="16" y2="6" />
          <line x1="8" y1="2" x2="8" y2="6" />
          <line x1="3" y1="10" x2="21" y2="10" />
        </svg>
      ),
      History: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      ),
      Target: ({ className = "w-4 h-4" }) => (
        <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <circle cx="12" cy="12" r="10" />
          <circle cx="12" cy="12" r="6" />
          <circle cx="12" cy="12" r="2" />
        </svg>
      )
    };

    // --- SHOPEE MEMBERSHIP VIP CLUB MODAL ---
    function ShopeeMemberHubModal({
      isOpen,
      onClose,
      currentUser,
      onLogout,
      userOrders,
      coinLogs,
      onProfileUpdate,
      onClaimCoins,
      onSpinWheel,
      onClaimMission,
      onCollectVoucher,
      onUploadSlipForOrder,
      onQuickSwitchTier,
      initialTab = 'tier'
    }) {
      const [activeTab, setActiveTab] = useState(initialTab);
      const [simulatedTier, setSimulatedTier] = useState(null);
      const [orderStatusFilter, setOrderStatusFilter] = useState('all');
      const [isClaiming, setIsClaiming] = useState(false);
      const [isSpinning, setIsSpinning] = useState(false);
      const [spinResult, setSpinResult] = useState(null);
      const [wheelRotation, setWheelRotation] = useState(0);

      const [editForm, setEditForm] = useState({
        fullName: currentUser?.full_name || '',
        phone: currentUser?.phone || '',
        address: currentUser?.address || '',
        gender: currentUser?.gender || 'other',
        birthday: currentUser?.birthday || ''
      });
      const [avatarPreview, setAvatarPreview] = useState(currentUser?.avatar || '');
      const [isSavingProfile, setIsSavingProfile] = useState(false);
      const [profileMsg, setProfileMsg] = useState('');

      const [slipModalOrder, setSlipModalOrder] = useState(null);
      const [slipPreview, setSlipPreview] = useState('');
      const [isUploadingSlip, setIsUploadingSlip] = useState(false);

      const fileInputRef = useRef(null);
      const slipInputRef = useRef(null);

      useEffect(() => {
        if (currentUser) {
          setEditForm({
            fullName: currentUser.full_name || '',
            phone: currentUser.phone || '',
            address: currentUser.address || '',
            gender: currentUser.gender || 'other',
            birthday: currentUser.birthday || ''
          });
          setAvatarPreview(currentUser.avatar || '');
        }
      }, [currentUser]);

      useEffect(() => {
        if (initialTab) {
          setActiveTab(initialTab);
        }
      }, [initialTab, isOpen]);

      if (!isOpen || !currentUser) return null;

      const activeTierKey = simulatedTier || currentUser.membership_tier || 'classic';
      const currentTier = SHOPEE_TIERS[activeTierKey] || SHOPEE_TIERS['classic'];
      const nextTierKey = currentTier.nextTier;
      const nextTier = nextTierKey ? SHOPEE_TIERS[nextTierKey] : null;

      let spentProgress = 100;
      let ordersProgress = 100;
      let remainingSpent = 0;
      let remainingOrders = 0;

      if (nextTier && currentTier.nextRequirement) {
        remainingSpent = Math.max(0, currentTier.nextRequirement.spent - currentUser.total_spent);
        remainingOrders = Math.max(0, currentTier.nextRequirement.orders - currentUser.orders_count);
        spentProgress = Math.min(100, Math.round((currentUser.total_spent / currentTier.nextRequirement.spent) * 100));
        ordersProgress = Math.min(100, Math.round((currentUser.orders_count / currentTier.nextRequirement.orders) * 100));
      }

      // Check-in status
      const todayStr = new Date().toISOString().slice(0, 10);
      const isAlreadyClaimedToday = currentUser.daily_checkin === todayStr;
      const streak = currentUser.checkin_streak || 0;

      const handleAvatarChange = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (ev) => setAvatarPreview(ev.target.result);
          reader.readAsDataURL(file);
        }
      };

      const handleSaveProfile = async (e) => {
        e.preventDefault();
        setIsSavingProfile(true);
        setProfileMsg('');
        try {
          const payload = {
            action: 'update_profile',
            fullName: editForm.fullName,
            phone: editForm.phone,
            address: editForm.address,
            gender: editForm.gender,
            birthday: editForm.birthday,
            avatar_base64: avatarPreview && avatarPreview.startsWith('data:') ? avatarPreview : ''
          };
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          });
          const data = await res.json();
          if (data.success) {
            setProfileMsg('บันทึกข้อมูลโปรไฟล์ Shopee เรียบร้อยแล้ว!');
            onProfileUpdate(data.user);
          } else {
            setProfileMsg(data.message || 'บันทึกไม่สำเร็จ');
          }
        } catch (err) {
          setProfileMsg('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
        } finally {
          setIsSavingProfile(false);
        }
      };

      const handleClaimCoinsClick = async () => {
        setIsClaiming(true);
        await onClaimCoins();
        setIsClaiming(false);
      };

      // Lucky Wheel Spin Logic
      const handleSpinWheelClick = async () => {
        if (isSpinning) return;
        setIsSpinning(true);
        setSpinResult(null);

        // Spin animation
        const extraTurns = 5 + Math.floor(Math.random() * 3);
        const randomDeg = Math.floor(Math.random() * 360);
        const totalDeg = wheelRotation + (extraTurns * 360) + randomDeg;
        setWheelRotation(totalDeg);

        try {
          const result = await onSpinWheel();
          setTimeout(() => {
            setIsSpinning(false);
            if (result && result.prize) {
              setSpinResult(result.prize);
            }
          }, 3000);
        } catch (e) {
          setIsSpinning(false);
        }
      };

      const handleSlipChange = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (ev) => setSlipPreview(ev.target.result);
          reader.readAsDataURL(file);
        }
      };

      const handleUploadSlipSubmit = async (e) => {
        e.preventDefault();
        if (!slipModalOrder || !slipPreview) return;
        setIsUploadingSlip(true);
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              action: 'upload_slip',
              orderId: slipModalOrder.orderId,
              slip_base64: slipPreview
            })
          });
          const data = await res.json();
          if (data.success) {
            alert('อัปโหลดสลิปสำเร็จ! เจ้าหน้าที่จะตรวจสอบยอดชำระ');
            setSlipModalOrder(null);
            setSlipPreview('');
            onUploadSlipForOrder(slipModalOrder.orderId, data.slipUrl);
          } else {
            alert(data.message || 'อัปโหลดสลิปไม่สำเร็จ');
          }
        } catch (err) {
          alert('เกิดข้อผิดพลาดในการอัปโหลดสลิป');
        } finally {
          setIsUploadingSlip(false);
        }
      };

      const filteredOrders = userOrders.filter(ord => {
        if (orderStatusFilter === 'all') return true;
        if (orderStatusFilter === 'pending') return ord.status.toLowerCase().includes('pending') || ord.status.toLowerCase().includes('slip');
        if (orderStatusFilter === 'shipped') return ord.status.toLowerCase().includes('shipped') || ord.status.toLowerCase().includes('delivery');
        if (orderStatusFilter === 'completed') return ord.status.toLowerCase().includes('completed') || ord.status.toLowerCase().includes('paid');
        return true;
      });

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-slate-950/90 backdrop-blur-md animate-fade-in">
          <div className="bg-[#0f172a] border border-slate-800 rounded-3xl max-w-4xl w-full p-4 sm:p-7 space-y-4 shadow-2xl max-h-[94vh] flex flex-col">
            
            {/* TOP HEADER */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-800 pb-3">
              <div className="flex items-center space-x-3">
                <div className="relative shrink-0">
                  {avatarPreview ? (
                    <img src={avatarPreview} alt="Avatar" className="w-13 h-13 rounded-2xl object-cover border-2 border-orange-500 shadow-md" />
                  ) : (
                    <div className="w-13 h-13 rounded-2xl shopee-gradient flex items-center justify-center font-black text-xl text-white shadow-lg">
                      {currentUser.username ? currentUser.username[0].toUpperCase() : 'U'}
                    </div>
                  )}
                  <span className="absolute -bottom-1 -right-1 bg-amber-400 text-slate-950 font-black text-[9px] px-1.5 py-0.2 rounded-full shadow">
                    VIP
                  </span>
                </div>

                <div>
                  <div className="flex items-center space-x-2">
                    <h3 className="font-black text-base sm:text-lg text-white">{currentUser.full_name || currentUser.username}</h3>
                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase text-white shadow bg-gradient-to-r ${currentTier.color}`}>
                      {currentTier.name.split(' ')[0]}
                    </span>
                  </div>
                  <p className="text-[11px] text-slate-400">
                    🪙 Shopee Coins: <strong className="text-amber-400 font-extrabold text-xs">{currentUser.coins.toLocaleString()} Coins</strong> • ยอดซื้อสะสม ฿{currentUser.total_spent.toLocaleString()}
                  </p>
                </div>
              </div>

              <div className="flex items-center space-x-2 self-end sm:self-auto">
                <button
                  onClick={onClose}
                  className="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white cursor-pointer"
                >
                  <Icons.X className="w-5 h-5" />
                </button>
              </div>
            </div>

            {/* TAB NAVIGATION */}
            <div className="flex overflow-x-auto space-x-1.5 pb-2 text-xs font-bold border-b border-slate-800 scrollbar-none">
              <button
                onClick={() => setActiveTab('tier')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'tier' ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/20' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.Sparkles className="w-3.5 h-3.5" />
                <span>บัตร VIP & ระดับสมาชิก</span>
              </button>

              <button
                onClick={() => setActiveTab('streak')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'streak' ? 'bg-amber-500 text-slate-950 font-black shadow-lg shadow-amber-500/20' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.Calendar className="w-3.5 h-3.5" />
                <span>เช็คอิน 7 วัน ({streak}/7)</span>
              </button>

              <button
                onClick={() => setActiveTab('spin')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'spin' ? 'bg-violet-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <span>🎡</span>
                <span>วงล้อลุ้นโชค</span>
              </button>

              <button
                onClick={() => setActiveTab('missions')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'missions' ? 'bg-rose-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.Target className="w-3.5 h-3.5" />
                <span>ภารกิจสะสมเหรียญ</span>
              </button>

              <button
                onClick={() => setActiveTab('vouchers')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'vouchers' ? 'bg-emerald-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.Tag className="w-3.5 h-3.5" />
                <span>กระเป๋าคูปอง ({currentUser.vouchers?.length || 0})</span>
              </button>

              <button
                onClick={() => setActiveTab('ledger')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'ledger' ? 'bg-amber-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.History className="w-3.5 h-3.5" />
                <span>ประวัติเหรียญ</span>
              </button>

              <button
                onClick={() => setActiveTab('orders')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'orders' ? 'bg-blue-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.ShoppingBag className="w-3.5 h-3.5" />
                <span>คำสั่งซื้อ ({userOrders.length})</span>
              </button>

              <button
                onClick={() => setActiveTab('profile')}
                className={`px-3 py-2 rounded-xl transition-all whitespace-nowrap cursor-pointer flex items-center space-x-1.5 ${
                  activeTab === 'profile' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-900 text-slate-400 hover:text-slate-200'
                }`}
              >
                <Icons.User className="w-3.5 h-3.5" />
                <span>โปรไฟล์ & รูปถ่าย</span>
              </button>
            </div>

            {/* TAB 1: METALLIC VIP CARD & TIER PROGRESS */}
            {activeTab === 'tier' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                {/* Holographic VIP Metallic Card */}
                <div className={`hologram-card rounded-3xl p-6 relative overflow-hidden bg-gradient-to-tr ${currentTier.color} text-white shadow-2xl border ${currentTier.border}`}>
                  <div className="absolute top-0 right-0 p-6 opacity-15">
                    <Icons.Shopee className="w-36 h-36" />
                  </div>

                  <div className="relative z-10 space-y-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="flex items-center space-x-1.5">
                          <span className="text-[10px] uppercase tracking-widest font-black opacity-80">Shopee Member Club VIP Card</span>
                          <span className="bg-white/20 px-2 py-0.5 rounded-full text-[9px] font-black">Official</span>
                        </div>
                        <h4 className="text-2xl sm:text-3xl font-black mt-0.5">{currentTier.name}</h4>
                      </div>
                      <span className="bg-black/30 backdrop-blur-md px-3 py-1 rounded-full text-xs font-black border border-white/20">
                        Tier Level {activeTierKey.toUpperCase()}
                      </span>
                    </div>

                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5 pt-1">
                      <div className="bg-black/25 p-2.5 rounded-2xl backdrop-blur-sm">
                        <span className="text-[10px] opacity-75 block">ยอดช้อปสะสม</span>
                        <span className="text-sm sm:text-base font-extrabold">฿{currentUser.total_spent.toLocaleString()}</span>
                      </div>
                      <div className="bg-black/25 p-2.5 rounded-2xl backdrop-blur-sm">
                        <span className="text-[10px] opacity-75 block">คำสั่งซื้อสำเร็จ</span>
                        <span className="text-sm sm:text-base font-extrabold">{currentUser.orders_count} ออเดอร์</span>
                      </div>
                      <div className="bg-black/25 p-2.5 rounded-2xl backdrop-blur-sm">
                        <span className="text-[10px] opacity-75 block">Coins Cashback</span>
                        <span className="text-sm sm:text-base font-extrabold text-amber-300">+{currentTier.coinCashback}%</span>
                      </div>
                      <div className="bg-black/25 p-2.5 rounded-2xl backdrop-blur-sm">
                        <span className="text-[10px] opacity-75 block">โค้ดส่งฟรีรายเดือน</span>
                        <span className="text-sm sm:text-base font-extrabold text-emerald-300">x{currentTier.freeShippingVouchers} โค้ด</span>
                      </div>
                    </div>

                    {/* Barcode & QR Code simulation */}
                    <div className="flex items-center justify-between pt-2 border-t border-white/20 text-xs">
                      <div className="font-mono text-[11px] opacity-80">
                        ID: SHP-VIP-{currentUser.id || 8829}-{activeTierKey.toUpperCase()}
                      </div>
                      <div className="flex items-center space-x-2">
                        <span className="text-[10px] opacity-75">สแกนรับสิทธิ์:</span>
                        <div className="bg-white p-1 rounded-lg">
                          <Icons.QrCode className="w-5 h-5 text-slate-900" />
                        </div>
                      </div>
                    </div>

                    {/* Progress to Next Tier */}
                    {nextTier ? (
                      <div className="bg-black/30 p-3.5 rounded-2xl space-y-2">
                        <div className="flex justify-between text-xs font-bold">
                          <span>เป้าหมายสู่ <strong>{nextTier.name}</strong></span>
                          <span className="text-amber-300">ช้อปอีก ฿{remainingSpent.toLocaleString()} หรืออีก {remainingOrders} ออเดอร์</span>
                        </div>
                        <div className="w-full bg-white/20 rounded-full h-3 overflow-hidden">
                          <div
                            className="bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-500 h-full rounded-full transition-all duration-500"
                            style={{ width: `${Math.max(spentProgress, ordersProgress)}%` }}
                          ></div>
                        </div>
                      </div>
                    ) : (
                      <div className="bg-black/30 p-3 rounded-2xl text-center text-xs font-black text-amber-300">
                        👑 ยินดีด้วย! คุณอยู่ในระดับสูงสุด (Platinum Super VIP) ของ Shopee แล้ว
                      </div>
                    )}
                  </div>
                </div>

                {/* 1-Click Demo Tier Simulator */}
                <div className="glass-card p-4 rounded-2xl border border-slate-800 space-y-2">
                  <div className="flex justify-between items-center text-xs">
                    <span className="font-extrabold text-slate-300">⚡ จำลองเปลี่ยนระดับสมาชิก (Demo Tier Simulator):</span>
                    <span className="text-[10px] text-slate-500">คลิกเพื่อดูสิทธิประโยชน์แต่ละระดับ</span>
                  </div>
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs font-bold">
                    <button
                      onClick={() => setSimulatedTier('classic')}
                      className={`p-2 rounded-xl border text-center transition-all cursor-pointer ${
                        activeTierKey === 'classic' ? 'bg-slate-700 border-slate-500 text-white' : 'bg-slate-900 border-slate-800 text-slate-400'
                      }`}
                    >
                      🥉 Classic (0.-)
                    </button>
                    <button
                      onClick={() => setSimulatedTier('silver')}
                      className={`p-2 rounded-xl border text-center transition-all cursor-pointer ${
                        activeTierKey === 'silver' ? 'bg-zinc-600 border-zinc-400 text-white' : 'bg-slate-900 border-slate-800 text-slate-400'
                      }`}
                    >
                      🥈 Silver (1,000.-)
                    </button>
                    <button
                      onClick={() => setSimulatedTier('gold')}
                      className={`p-2 rounded-xl border text-center transition-all cursor-pointer ${
                        activeTierKey === 'gold' ? 'bg-amber-600 border-amber-400 text-white' : 'bg-slate-900 border-slate-800 text-slate-400'
                      }`}
                    >
                      🥇 Gold VIP (3,000.-)
                    </button>
                    <button
                      onClick={() => setSimulatedTier('platinum')}
                      className={`p-2 rounded-xl border text-center transition-all cursor-pointer ${
                        activeTierKey === 'platinum' ? 'bg-purple-600 border-purple-400 text-white' : 'bg-slate-900 border-slate-800 text-slate-400'
                      }`}
                    >
                      👑 Platinum (8,000.-)
                    </button>
                  </div>
                </div>

                {/* All Tier Comparison Cards */}
                <div className="space-y-2.5">
                  <h4 className="text-xs font-extrabold text-slate-300 uppercase tracking-wider">
                    สิทธิประโยชน์ประจำระดับสมาชิก Shopee Member Club
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
                    <div className="glass-card p-3.5 rounded-2xl border border-slate-800 flex items-start space-x-3">
                      <div className="p-2.5 rounded-xl bg-emerald-500/20 text-emerald-400 shrink-0">
                        <Icons.Truck className="w-5 h-5" />
                      </div>
                      <div>
                        <h5 className="font-bold text-white">โค้ดส่งฟรี x{currentTier.freeShippingVouchers} โค้ด/เดือน</h5>
                        <p className="text-[11px] text-slate-400">รับโค้ดส่งฟรีทุกเดือนโดยไม่มีขั้นต่ำ</p>
                      </div>
                    </div>

                    <div className="glass-card p-3.5 rounded-2xl border border-slate-800 flex items-start space-x-3">
                      <div className="p-2.5 rounded-xl bg-amber-500/20 text-amber-400 shrink-0">
                        <Icons.Coins className="w-5 h-5" />
                      </div>
                      <div>
                        <h5 className="font-bold text-white">เงินคืน {currentTier.coinCashback}% Shopee Coins</h5>
                        <p className="text-[11px] text-slate-400">รับเหรียญคืนทุกการสั่งซื้อสินค้าในร้าน</p>
                      </div>
                    </div>

                    <div className="glass-card p-3.5 rounded-2xl border border-slate-800 flex items-start space-x-3">
                      <div className="p-2.5 rounded-xl bg-orange-500/20 text-orange-400 shrink-0">
                        <Icons.Tag className="w-5 h-5" />
                      </div>
                      <div>
                        <h5 className="font-bold text-white">ส่วนลดพิเศษ {currentTier.discountPercent}%</h5>
                        <p className="text-[11px] text-slate-400">สิทธิรับส่วนลดในแคมเปญวันพิเศษและวันเกิด</p>
                      </div>
                    </div>

                    <div className="glass-card p-3.5 rounded-2xl border border-slate-800 flex items-start space-x-3">
                      <div className="p-2.5 rounded-xl bg-purple-500/20 text-purple-400 shrink-0">
                        <Icons.Sparkles className="w-5 h-5" />
                      </div>
                      <div>
                        <h5 className="font-bold text-white">Shopee Priority Support</h5>
                        <p className="text-[11px] text-slate-400">บริการให้คำปรึกษาและจัดส่งสินค้าลำดับแรก</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* TAB 2: 7-DAY STREAK DAILY CHECK-IN */}
            {activeTab === 'streak' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                <div className="glass-panel p-5 rounded-3xl border border-amber-500/30 bg-gradient-to-br from-amber-950/30 to-slate-900 space-y-4">
                  <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div className="flex items-center space-x-4">
                      <div className="w-16 h-16 rounded-3xl bg-gradient-to-tr from-amber-400 to-yellow-500 text-slate-950 flex items-center justify-center font-black text-2xl shadow-xl shadow-amber-500/20">
                        🪙
                      </div>
                      <div>
                        <span className="text-xs text-amber-300 font-bold uppercase tracking-wider">Shopee Coins Balance</span>
                        <h4 className="text-3xl font-black text-white">{currentUser.coins.toLocaleString()} <span className="text-base font-bold text-amber-400">Coins</span></h4>
                        <p className="text-[11px] text-slate-400">สะสมเช็คอินครบ 7 วันรับโบนัส Super Box สูงสุด +50 Coins!</p>
                      </div>
                    </div>

                    <button
                      onClick={handleClaimCoinsClick}
                      disabled={isAlreadyClaimedToday || isClaiming}
                      className={`px-6 py-3.5 rounded-2xl font-black text-xs transition-all shadow-xl flex items-center space-x-2 cursor-pointer ${
                        isAlreadyClaimedToday
                          ? 'bg-slate-800 text-slate-500 cursor-not-allowed border border-slate-700'
                          : 'bg-gradient-to-r from-amber-400 to-yellow-500 text-slate-950 hover:brightness-110 shadow-amber-500/30 scale-105'
                      }`}
                    >
                      <Icons.Coins className="w-4 h-4" />
                      <span>{isAlreadyClaimedToday ? '✓ เช็คอินวันนี้แล้ว' : (isClaiming ? 'กำลังเช็คอิน...' : `กดรับฟรีวันที่ ${streak + 1 || 1}`)}</span>
                    </button>
                  </div>
                </div>

                {/* 7-Day Streak Cards Calendar */}
                <div className="space-y-2.5">
                  <div className="flex justify-between items-center text-xs">
                    <h4 className="font-extrabold text-slate-300 uppercase tracking-wider">ปฏิทินเช็คอินรับเหรียญ 7 วัน (7-Day Streak)</h4>
                    <span className="text-amber-400 font-bold">สะสมต่อเนื่อง: {streak} / 7 วัน</span>
                  </div>

                  <div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 gap-2">
                    {[1, 2, 3, 4, 5, 6, 7].map((dayNum) => {
                      const reward = STREAK_REWARDS[dayNum] || { coins: 10, label: '+10' };
                      const isCompleted = streak >= dayNum;
                      const isCurrent = streak + 1 === dayNum;

                      return (
                        <div
                          key={dayNum}
                          className={`p-3 rounded-2xl border text-center flex flex-col justify-between space-y-2 relative overflow-hidden transition-all ${
                            isCompleted
                              ? 'bg-emerald-950/40 border-emerald-500/50 text-emerald-300'
                              : isCurrent && !isAlreadyClaimedToday
                              ? 'bg-amber-950/40 border-amber-400 text-white shadow-lg shadow-amber-500/20 scale-105'
                              : 'bg-slate-900 border-slate-800 text-slate-400'
                          }`}
                        >
                          {isCompleted && (
                            <span className="absolute top-1.5 right-1.5 text-[9px] bg-emerald-500 text-slate-950 font-black px-1 rounded-full">
                              ✓
                            </span>
                          )}

                          <span className="text-[10px] font-bold block">Day {dayNum}</span>
                          <span className="text-2xl">{dayNum === 7 ? '🎁' : '🪙'}</span>
                          <span className="text-xs font-black text-amber-400">{reward.label.split(' ')[0]}</span>
                          <span className="text-[9px] opacity-75">{dayNum === 7 ? 'Super Box' : 'Coins'}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            )}

            {/* TAB 3: LUCKY SPIN WHEEL */}
            {activeTab === 'spin' && (
              <div className="space-y-4 overflow-y-auto pr-1 text-center">
                <div className="max-w-md mx-auto space-y-4">
                  <div>
                    <h4 className="text-lg font-black text-white">🎡 Shopee Lucky Rewards Wheel</h4>
                    <p className="text-xs text-slate-400">หมุนวงล้อเสี่ยงโชคลุ้นรับ Shopee Coins & โค้ดส่งฟรีทุกวัน!</p>
                  </div>

                  {/* ROTATING WHEEL SIMULATION */}
                  <div className="relative w-64 h-64 mx-auto my-2">
                    {/* Wheel Pointer Needle */}
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2 z-20 w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-t-[18px] border-t-amber-400 drop-shadow-md"></div>

                    {/* Wheel Body */}
                    <div
                      className="w-full h-full rounded-full border-4 border-amber-400 shadow-2xl transition-transform duration-[3000ms] cubic-bezier(0.2, 0.8, 0.2, 1) relative overflow-hidden"
                      style={{
                        transform: `rotate(${wheelRotation}deg)`,
                        background: 'conic-gradient(#f59e0b 0deg 60deg, #10b981 60deg 120deg, #ea580c 120deg 180deg, #8b5cf6 180deg 240deg, #e11d48 240deg 300deg, #3b82f6 300deg 360deg)'
                      }}
                    >
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="w-16 h-16 rounded-full bg-slate-950 border-2 border-amber-400 flex items-center justify-center font-black text-amber-400 text-xs shadow-inner">
                          SPIN
                        </div>
                      </div>
                    </div>
                  </div>

                  {spinResult && (
                    <div className="bg-amber-950/60 border border-amber-500 text-amber-200 p-4 rounded-2xl animate-fade-in font-bold text-xs space-y-1">
                      <span className="text-2xl block">{spinResult.icon || '🎉'}</span>
                      <p className="text-sm font-black text-white">ยินดีด้วย! คุณได้รับ {spinResult.name}</p>
                      <p className="text-[11px] text-amber-400">เหรียญหรือคูปองถูกเพิ่มเข้าสู่บัญชีของคุณเรียบร้อยแล้ว</p>
                    </div>
                  )}

                  <button
                    onClick={handleSpinWheelClick}
                    disabled={isSpinning}
                    className="w-full py-3.5 rounded-2xl shopee-gradient hover:brightness-110 text-white font-black text-xs shadow-xl cursor-pointer disabled:opacity-50"
                  >
                    {isSpinning ? 'กำลังหมุนวงล้อ...' : '🎰 หมุนวงล้อเสี่ยงโชค (SPIN NOW)'}
                  </button>
                </div>
              </div>
            )}

            {/* TAB 4: SHOPEE MISSIONS */}
            {activeTab === 'missions' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                <div className="flex justify-between items-center">
                  <div>
                    <h4 className="text-xs font-extrabold text-slate-300 uppercase tracking-wider">ภารกิจ Shopee Missions สะสมเหรียญ</h4>
                    <p className="text-[11px] text-slate-400">ทำภารกิจสำเร็จแล้วกดรับ Coins ได้ทันที</p>
                  </div>
                  <span className="text-xs text-amber-400 font-bold">รับ Coins ฟรี</span>
                </div>

                <div className="space-y-2.5">
                  {SHOPEE_MISSIONS.map((m) => {
                    const isCompleted = currentUser.missions_completed?.includes(m.id);
                    return (
                      <div
                        key={m.id}
                        className="glass-card p-4 rounded-2xl border border-slate-800 flex items-center justify-between gap-3 text-xs"
                      >
                        <div className="flex items-center space-x-3">
                          <div className="w-10 h-10 rounded-xl bg-orange-500/20 text-orange-400 flex items-center justify-center font-bold text-lg shrink-0">
                            {m.category === 'profile' ? '👤' : (m.category === 'checkin' ? '📅' : (m.category === 'game' ? '🎡' : (m.category === 'shopping' ? '🛍️' : '🎟️')))}
                          </div>
                          <div>
                            <h5 className="font-bold text-white text-xs">{m.title}</h5>
                            <p className="text-[11px] text-slate-400">{m.subtitle}</p>
                          </div>
                        </div>

                        <div className="flex items-center space-x-3 shrink-0">
                          <span className="text-xs font-extrabold text-amber-400">+{m.rewardCoins} Coins</span>
                          <button
                            onClick={() => onClaimMission(m.id)}
                            disabled={isCompleted}
                            className={`px-3.5 py-1.5 rounded-xl font-black text-xs transition-all cursor-pointer ${
                              isCompleted
                                ? 'bg-slate-800 text-emerald-400 border border-emerald-500/30'
                                : 'shopee-gradient text-white hover:brightness-110 shadow-md'
                            }`}
                          >
                            {isCompleted ? '✓ รับแล้ว' : 'กดรับรางวัล'}
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* TAB 5: VOUCHER WALLET */}
            {activeTab === 'vouchers' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                <div className="flex justify-between items-center">
                  <h4 className="text-xs font-extrabold text-slate-300 uppercase tracking-wider">กระเป๋าคูปองส่วนลดและโค้ดส่งฟรี Shopee</h4>
                  <span className="text-xs text-emerald-400 font-bold">เก็บได้ทุกคน</span>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {AVAILABLE_VOUCHERS.map((v) => {
                    const isCollected = currentUser.vouchers?.includes(v.code);
                    return (
                      <div key={v.code} className="glass-card rounded-2xl border border-slate-800 p-4 flex flex-col justify-between space-y-3 relative overflow-hidden">
                        <div className="flex items-start justify-between">
                          <div className="flex items-center space-x-2">
                            <span className={`px-2.5 py-0.5 rounded-md text-[10px] font-black text-white ${v.color}`}>
                              {v.tag}
                            </span>
                            <span className="text-xs font-bold text-white">{v.title}</span>
                          </div>
                        </div>

                        <p className="text-[11px] text-slate-400">{v.subtitle}</p>

                        <div className="flex items-center justify-between pt-2 border-t border-slate-800/80">
                          <span className="font-mono text-xs font-extrabold text-orange-400">{v.code}</span>
                          <button
                            onClick={() => onCollectVoucher(v.code)}
                            disabled={isCollected}
                            className={`px-4 py-1.5 rounded-xl text-xs font-black transition-all cursor-pointer ${
                              isCollected
                                ? 'bg-slate-800 text-emerald-400 border border-emerald-500/30'
                                : 'shopee-gradient text-white hover:brightness-110 shadow-md'
                            }`}
                          >
                            {isCollected ? '✓ เก็บแล้ว' : 'เก็บโค้ด'}
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* TAB 6: COINS LEDGER & TRANSACTION HISTORY */}
            {activeTab === 'ledger' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                <div className="flex justify-between items-center">
                  <h4 className="text-xs font-extrabold text-slate-300 uppercase tracking-wider">สมุดประวัติการรับและการใช้ Shopee Coins</h4>
                  <span className="text-xs text-amber-400 font-bold">คงเหลือ: {currentUser.coins.toLocaleString()} Coins</span>
                </div>

                {coinLogs && coinLogs.length > 0 ? (
                  <div className="space-y-2 text-xs">
                    {coinLogs.map((log) => (
                      <div key={log.id} className="glass-card p-3 rounded-2xl border border-slate-800 flex items-center justify-between">
                        <div>
                          <p className="font-bold text-white">{log.description}</p>
                          <span className="text-[10px] text-slate-500">{log.created_at}</span>
                        </div>
                        <div className="text-right">
                          <span className={`font-black text-sm ${log.amount > 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
                            {log.amount > 0 ? `+${log.amount}` : log.amount} Coins
                          </span>
                          <span className="block text-[10px] text-slate-500">คงเหลือ: {log.balance_after}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="py-12 text-center text-slate-400 text-xs bg-slate-900/60 rounded-3xl border border-slate-800">
                    <p className="font-bold">ยังไม่มีประวัติธุรกรรมเหรียญ</p>
                    <p className="text-[10px] text-slate-500 mt-1">กดเช็คอินรายวันหรือหมุนวงล้อเพื่อเริ่มรับเหรียญ</p>
                  </div>
                )}
              </div>
            )}

            {/* TAB 7: MY PURCHASES */}
            {activeTab === 'orders' && (
              <div className="space-y-4 overflow-y-auto pr-1">
                <div className="grid grid-cols-4 gap-1.5 bg-slate-900 p-1 rounded-2xl text-[11px] font-bold text-center">
                  <button onClick={() => setOrderStatusFilter('all')} className={`py-2 rounded-xl transition-all cursor-pointer ${orderStatusFilter === 'all' ? 'bg-orange-500 text-white shadow' : 'text-slate-400 hover:text-white'}`}>ทั้งหมด</button>
                  <button onClick={() => setOrderStatusFilter('pending')} className={`py-2 rounded-xl transition-all cursor-pointer ${orderStatusFilter === 'pending' ? 'bg-orange-500 text-white shadow' : 'text-slate-400 hover:text-white'}`}>ที่ต้องชำระ/สลิป</button>
                  <button onClick={() => setOrderStatusFilter('shipped')} className={`py-2 rounded-xl transition-all cursor-pointer ${orderStatusFilter === 'shipped' ? 'bg-orange-500 text-white shadow' : 'text-slate-400 hover:text-white'}`}>ที่ต้องจัดส่ง</button>
                  <button onClick={() => setOrderStatusFilter('completed')} className={`py-2 rounded-xl transition-all cursor-pointer ${orderStatusFilter === 'completed' ? 'bg-orange-500 text-white shadow' : 'text-slate-400 hover:text-white'}`}>สำเร็จแล้ว</button>
                </div>

                {filteredOrders.length === 0 ? (
                  <div className="py-16 text-center text-slate-400 space-y-2 bg-slate-900/60 rounded-3xl border border-slate-800">
                    <p className="font-bold text-sm">ไม่มีรายการคำสั่งซื้อในหมวดนี้</p>
                    <p className="text-xs text-slate-500">เลือกช้อปสินค้าแฟชั่นเพื่อรับ Coins คืนได้ทันที</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    {filteredOrders.map((ord) => (
                      <div key={ord.orderId} className="glass-card rounded-2xl border border-slate-800 p-4 space-y-3">
                        <div className="flex justify-between items-center border-b border-slate-800 pb-2">
                          <div className="flex items-center space-x-2">
                            <span className="px-2 py-0.5 rounded bg-rose-600 text-white text-[10px] font-black">Shopee Mall</span>
                            <span className="font-mono font-extrabold text-xs text-orange-400">{ord.orderId}</span>
                          </div>
                          <span className="px-2.5 py-0.5 rounded-full text-[10px] font-black bg-orange-500/20 text-orange-300 border border-orange-500/30">
                            {ord.status}
                          </span>
                        </div>

                        <div className="space-y-2">
                          {ord.items && ord.items.map((item, idx) => (
                            <div key={idx} className="flex items-center justify-between text-xs">
                              <div className="flex items-center space-x-2.5">
                                <div className="w-9 h-9 rounded-lg bg-slate-800 border border-slate-700 flex items-center justify-center font-bold text-[10px] text-white shrink-0">
                                  {item.size?.label || 'M'}
                                </div>
                                <div>
                                  <p className="font-bold text-slate-200">{item.title || 'Apex Heavyweight Tee'}</p>
                                  <p className="text-[10px] text-slate-400">สี: {item.color?.name || 'Classic'} • จำนวน: x{item.quantity}</p>
                                </div>
                              </div>
                              <span className="font-bold text-slate-200">฿{(item.price * item.quantity).toLocaleString()}</span>
                            </div>
                          ))}
                        </div>

                        <div className="pt-2 border-t border-slate-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 text-xs">
                          <div className="text-[11px] text-slate-400">
                            <span>สั่งเมื่อ: {ord.createdAt} • </span>
                            <span className="text-emerald-400 font-semibold">รับ +{ord.coinsEarned || 20} Coins</span>
                          </div>
                          <div className="flex items-center space-x-3 w-full sm:w-auto justify-between sm:justify-end">
                            <div>
                              <span className="text-[10px] text-slate-400">ยอดชำระ: </span>
                              <span className="text-sm font-black text-white">฿{ord.grandTotal.toLocaleString()}</span>
                            </div>

                            {(!ord.slipImage || ord.status === 'Pending Payment') && (
                              <button
                                onClick={() => {
                                  setSlipModalOrder(ord);
                                  setSlipPreview(ord.slipImage || '');
                                }}
                                className="px-3 py-1.5 rounded-xl shopee-gradient text-white text-[11px] font-extrabold cursor-pointer shadow"
                              >
                                แจ้งโอน / แนบสลิป
                              </button>
                            )}

                            {ord.slipImage && (
                              <a
                                href={ord.slipImage}
                                target="_blank"
                                rel="noreferrer"
                                className="px-2.5 py-1.5 rounded-xl bg-slate-800 text-emerald-400 border border-emerald-500/30 text-[10px] font-bold"
                              >
                                ดูสลิป
                              </a>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {/* SLIP UPLOAD MODAL */}
                {slipModalOrder && (
                  <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md">
                    <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 space-y-4 shadow-2xl">
                      <div className="flex justify-between items-center border-b border-slate-800 pb-3">
                        <h4 className="font-extrabold text-sm text-white">แนบสลิปโอนเงิน (ออเดอร์: {slipModalOrder.orderId})</h4>
                        <button onClick={() => setSlipModalOrder(null)} className="text-slate-400 hover:text-white cursor-pointer"><Icons.X className="w-5 h-5" /></button>
                      </div>

                      <form onSubmit={handleUploadSlipSubmit} className="space-y-4">
                        <div
                          onClick={() => slipInputRef.current?.click()}
                          className="border-2 border-dashed border-slate-700 hover:border-orange-500 rounded-2xl p-6 text-center cursor-pointer bg-slate-950/60 transition-all"
                        >
                          <input
                            type="file"
                            ref={slipInputRef}
                            onChange={handleSlipChange}
                            accept="image/*"
                            className="hidden"
                          />
                          {slipPreview ? (
                            <img src={slipPreview} alt="Slip Preview" className="max-h-56 mx-auto rounded-xl object-contain shadow-lg" />
                          ) : (
                            <div className="space-y-2">
                              <Icons.Upload className="w-8 h-8 text-orange-400 mx-auto" />
                              <p className="text-xs font-bold text-slate-200">คลิกเพื่อเลือกไฟล์รูปภาพสลิปจากเครื่อง</p>
                              <p className="text-[10px] text-slate-500">รองรับ JPG, PNG, WEBP</p>
                            </div>
                          )}
                        </div>

                        <button
                          type="submit"
                          disabled={!slipPreview || isUploadingSlip}
                          className="w-full py-3 rounded-xl shopee-gradient text-white font-black text-xs cursor-pointer shadow-lg disabled:opacity-40"
                        >
                          {isUploadingSlip ? 'กำลังอัปโหลด...' : 'ยืนยันการส่งสลิปโอนเงิน'}
                        </button>
                      </form>
                    </div>
                  </div>
                )}
              </div>
            )}

            {/* TAB 8: PROFILE & SETTINGS */}
            {activeTab === 'profile' && (
              <form onSubmit={handleSaveProfile} className="space-y-4 overflow-y-auto pr-1 text-xs">
                {profileMsg && (
                  <div className="bg-emerald-950/80 border border-emerald-500/50 text-emerald-200 p-3 rounded-xl font-bold">
                    {profileMsg}
                  </div>
                )}

                <div className="flex items-center space-x-4 bg-slate-900 p-4 rounded-2xl border border-slate-800">
                  <div className="relative">
                    {avatarPreview ? (
                      <img src={avatarPreview} alt="Profile" className="w-16 h-16 rounded-2xl object-cover border-2 border-orange-500 shadow-md" />
                    ) : (
                      <div className="w-16 h-16 rounded-2xl shopee-gradient flex items-center justify-center font-black text-2xl text-white">
                        {currentUser.username ? currentUser.username[0].toUpperCase() : 'U'}
                      </div>
                    )}
                  </div>

                  <div className="space-y-1.5 flex-1">
                    <h5 className="font-bold text-slate-200 text-xs">รูปภาพโปรไฟล์สมาชิก (Avatar Photo)</h5>
                    <p className="text-[10px] text-slate-400">เลือกไฟล์รูปภาพจริงจากเครื่องคอมพิวเตอร์ของคุณ</p>
                    <input
                      type="file"
                      ref={fileInputRef}
                      onChange={handleAvatarChange}
                      accept="image/*"
                      className="hidden"
                    />
                    <button
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      className="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-orange-400 font-bold text-xs flex items-center space-x-1.5 cursor-pointer"
                    >
                      <Icons.Upload className="w-3.5 h-3.5" />
                      <span>เลือกไฟล์รูปภาพจากเครื่อง...</span>
                    </button>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div>
                    <label className="block text-slate-300 font-semibold mb-1">ชื่อ-นามสกุล</label>
                    <input
                      type="text"
                      required
                      value={editForm.fullName}
                      onChange={(e) => setEditForm({ ...editForm, fullName: e.target.value })}
                      className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                    />
                  </div>
                  <div>
                    <label className="block text-slate-300 font-semibold mb-1">เบอร์โทรศัพท์ (10 หลัก)</label>
                    <input
                      type="tel"
                      required
                      value={editForm.phone}
                      onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })}
                      className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <div>
                    <label className="block text-slate-300 font-semibold mb-1">เพศ (Gender)</label>
                    <select
                      value={editForm.gender}
                      onChange={(e) => setEditForm({ ...editForm, gender: e.target.value })}
                      className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                    >
                      <option value="male">ชาย (Male)</option>
                      <option value="female">หญิง (Female)</option>
                      <option value="other">อื่นๆ (Other)</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-slate-300 font-semibold mb-1">วันเกิด (รับคูปองวันเกิด VIP)</label>
                    <input
                      type="date"
                      value={editForm.birthday}
                      onChange={(e) => setEditForm({ ...editForm, birthday: e.target.value })}
                      className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-slate-300 font-semibold mb-1">ที่อยู่จัดส่งสินค้าหลัก</label>
                  <textarea
                    rows={2}
                    value={editForm.address}
                    onChange={(e) => setEditForm({ ...editForm, address: e.target.value })}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  ></textarea>
                </div>

                <div className="flex justify-between items-center pt-2 border-t border-slate-800">
                  <button
                    type="button"
                    onClick={onLogout}
                    className="px-4 py-2 rounded-xl bg-rose-950 text-rose-300 border border-rose-500/30 font-bold hover:bg-rose-900 cursor-pointer"
                  >
                    ออกจากระบบ (Logout)
                  </button>

                  <button
                    type="submit"
                    disabled={isSavingProfile}
                    className="px-6 py-2.5 rounded-xl shopee-gradient text-white font-black hover:brightness-110 shadow-lg cursor-pointer disabled:opacity-40"
                  >
                    {isSavingProfile ? 'กำลังบันทึก...' : 'บันทึกข้อมูลส่วนตัว'}
                  </button>
                </div>
              </form>
            )}

          </div>
        </div>
      );
    }

    // --- QUICK DEMO SWITCHER BAR COMPONENT ---
    function QuickDemoSwitcher({ onQuickSwitch }) {
      return (
        <div className="bg-slate-900/90 border border-orange-500/30 p-3 rounded-2xl space-y-2">
          <div className="flex items-center justify-between text-xs">
            <span className="font-extrabold text-orange-400 flex items-center space-x-1.5">
              <span>⚡</span>
              <span>1-Click Quick Demo Accounts (สลับบัญชีทดสอบ):</span>
            </span>
            <span className="text-[10px] text-slate-400">คลิกเข้าใช้งานได้ทันที</span>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-5 gap-1.5 text-xs font-bold">
            <button
              type="button"
              onClick={() => onQuickSwitch('platinum')}
              className="px-2.5 py-1.5 rounded-xl bg-purple-950/60 hover:bg-purple-900 border border-purple-500/40 text-purple-300 cursor-pointer text-center"
            >
              👑 Platinum VIP
            </button>
            <button
              type="button"
              onClick={() => onQuickSwitch('gold')}
              className="px-2.5 py-1.5 rounded-xl bg-amber-950/60 hover:bg-amber-900 border border-amber-500/40 text-amber-300 cursor-pointer text-center"
            >
              🥇 Gold VIP
            </button>
            <button
              type="button"
              onClick={() => onQuickSwitch('silver')}
              className="px-2.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-500/40 text-slate-200 cursor-pointer text-center"
            >
              🥈 Silver Member
            </button>
            <button
              type="button"
              onClick={() => onQuickSwitch('classic')}
              className="px-2.5 py-1.5 rounded-xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-300 cursor-pointer text-center"
            >
              🥉 Classic (ใหม่)
            </button>
            <button
              type="button"
              onClick={() => onQuickSwitch('admin')}
              className="px-2.5 py-1.5 rounded-xl bg-rose-950/60 hover:bg-rose-900 border border-rose-500/40 text-rose-300 cursor-pointer text-center col-span-2 sm:col-span-1"
            >
              🛠️ Admin
            </button>
          </div>
        </div>
      );
    }

    // --- ADD CUSTOM PRODUCT MODAL ---
    function AddProductModal({ isOpen, onClose, onProductAdded }) {
      const [formData, setFormData] = useState({
        name: '',
        category: 't-shirts',
        category_name: 'เสื้อยืด (T-Shirts)',
        subtitle: '',
        price: 390,
        original_price: 690,
        description: '',
        badge: 'NEW ARRIVAL',
        badge_color: 'bg-emerald-600',
        sizes: 'S, M, L, XL, 2XL'
      });
      const [imagePreview, setImagePreview] = useState('');
      const [isSubmitting, setIsSubmitting] = useState(false);
      const [error, setError] = useState('');
      const productImgInputRef = useRef(null);

      if (!isOpen) return null;

      const handleImageSelect = (e) => {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (ev) => setImagePreview(ev.target.result);
          reader.readAsDataURL(file);
        }
      };

      const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        if (!imagePreview) {
          setError('กรุณาเลือกไฟล์รูปภาพสินค้าจากเครื่อง');
          return;
        }

        setIsSubmitting(true);
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              action: 'add_product',
              name: formData.name,
              category: formData.category,
              category_name: formData.category === 't-shirts' ? 'เสื้อยืด (T-Shirts)' : (formData.category === 'hoodies' ? 'เสื้อกันหนาว & แจ็คเก็ต' : (formData.category === 'pants' ? 'กางเกง (Pants)' : 'แอคเซสเซอรี่')),
              subtitle: formData.subtitle,
              price: formData.price,
              original_price: formData.original_price,
              description: formData.description,
              badge: formData.badge,
              badge_color: formData.badge_color,
              sizes: formData.sizes,
              image_base64: imagePreview
            })
          });

          const data = await res.json();
          if (data.success) {
            alert('เพิ่มสินค้าใหม่พร้อมรูปภาพเข้าสู่ระบบสำเร็จ!');
            onProductAdded(data.allProducts);
            onClose();
          } else {
            setError(data.message || 'เกิดข้อผิดพลาดในการเพิ่มสินค้า');
          }
        } catch (err) {
          setError('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
        } finally {
          setIsSubmitting(false);
        }
      };

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-fade-in">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-xl w-full p-6 sm:p-8 space-y-5 shadow-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <div className="flex items-center space-x-2">
                <div className="w-9 h-9 rounded-xl bg-orange-500/20 text-orange-400 flex items-center justify-center font-bold">
                  <Icons.Plus className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-extrabold text-base text-white">เพิ่มสินค้าใหม่ & อัปโหลดรูปภาพ (Add Product)</h3>
                  <p className="text-[11px] text-slate-400">อัปโหลดไฟล์รูปภาพสินค้าจริงเพื่อจำหน่ายในร้าน APEX STUDIO</p>
                </div>
              </div>
              <button onClick={onClose} className="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white cursor-pointer">
                <Icons.X className="w-5 h-5" />
              </button>
            </div>

            {error && (
              <div className="bg-rose-950/80 border border-rose-500/50 text-rose-200 text-xs p-3 rounded-xl font-bold">
                {error}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-4 text-xs">
              <div>
                <label className="block font-bold text-slate-200 mb-1.5">
                  รูปภาพสินค้าจริง (Product Photo File) <span className="text-orange-400">*</span>
                </label>
                <div
                  onClick={() => productImgInputRef.current?.click()}
                  className="border-2 border-dashed border-slate-700 hover:border-orange-500 rounded-2xl p-4 text-center cursor-pointer bg-slate-950/60 transition-all"
                >
                  <input
                    type="file"
                    ref={productImgInputRef}
                    onChange={handleImageSelect}
                    accept="image/*"
                    className="hidden"
                  />
                  {imagePreview ? (
                    <div className="relative aspect-video max-h-48 mx-auto overflow-hidden rounded-xl">
                      <img src={imagePreview} alt="Preview" className="w-full h-full object-cover rounded-xl" />
                      <span className="absolute bottom-2 right-2 bg-slate-950/80 px-2 py-1 rounded text-[10px] text-orange-400 font-bold">
                        คลิกเพื่อเปลี่ยนรูป
                      </span>
                    </div>
                  ) : (
                    <div className="py-4 space-y-1.5">
                      <Icons.Image className="w-8 h-8 text-orange-400 mx-auto" />
                      <p className="text-xs font-bold text-slate-200">คลิกเพื่อเลือกไฟล์รูปภาพสินค้าจากเครื่อง (JPG, PNG, WEBP)</p>
                      <p className="text-[10px] text-slate-500">แนะนำรูปทรงจัตุรัสหรือสัดส่วน 4:5 คมชัดแบบ Shopee Mall</p>
                    </div>
                  )}
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-300 mb-1">ชื่อสินค้า (Product Name) <span className="text-orange-400">*</span></label>
                <input
                  type="text"
                  required
                  placeholder="เช่น Apex Heavyweight Oversized Tee ลายใหม่ 2026"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">หมวดหมู่</label>
                  <select
                    value={formData.category}
                    onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  >
                    <option value="t-shirts">เสื้อยืด (T-Shirts)</option>
                    <option value="hoodies">เสื้อกันหนาว & แจ็คเก็ต</option>
                    <option value="pants">กางเกง (Pants)</option>
                    <option value="accessories">แอคเซสเซอรี่ (Accessories)</option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">ป้ายกำกับ (Badge)</label>
                  <select
                    value={formData.badge}
                    onChange={(e) => setFormData({ ...formData, badge: e.target.value })}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  >
                    <option value="SHOPEE MALL">SHOPEE MALL (ป้ายมอลล์)</option>
                    <option value="BEST SELLER">BEST SELLER (ขายดี)</option>
                    <option value="NEW ARRIVAL">NEW ARRIVAL (มาใหม่)</option>
                    <option value="FLASH SALE">FLASH SALE (ลดฟ้าผ่า)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">ราคาขาย (THB) <span className="text-orange-400">*</span></label>
                  <input
                    type="number"
                    required
                    min="1"
                    value={formData.price}
                    onChange={(e) => setFormData({ ...formData, price: e.target.value })}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">ราคาเต็ม (ก่อนลด)</label>
                  <input
                    type="number"
                    value={formData.original_price}
                    onChange={(e) => setFormData({ ...formData, original_price: e.target.value })}
                    className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-300 mb-1">คำบรรยายสินค้า</label>
                <textarea
                  rows={2}
                  placeholder="รายละเอียดเนื้อผ้า ขนาด ทรงเสื้อ การดูแลรักษา..."
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="w-full py-2.5 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                ></textarea>
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full py-3.5 rounded-xl shopee-gradient text-white font-black text-xs shadow-lg cursor-pointer disabled:opacity-40"
              >
                {isSubmitting ? 'กำลังบันทึกสินค้า...' : 'บันทึกและวางขายทันที'}
              </button>
            </form>
          </div>
        </div>
      );
    }

    // --- PRODUCT DETAIL MODAL ---
    function ProductDetailModal({ isOpen, onClose, product, onAddToCart }) {
      const [selectedColor, setSelectedColor] = useState(null);
      const [selectedSize, setSelectedSize] = useState('M');
      const [qty, setQty] = useState(1);
      const [activeGalleryImg, setActiveGalleryImg] = useState('');

      useEffect(() => {
        if (product) {
          if (product.colors && product.colors.length > 0) {
            setSelectedColor(product.colors[0]);
          }
          if (product.sizes && product.sizes.length > 0) {
            setSelectedSize(product.sizes[0]);
          }
          setActiveGalleryImg(product.image);
          setQty(1);
        }
      }, [product]);

      if (!isOpen || !product) return null;
      const gallery = product.gallery && product.gallery.length > 0 ? product.gallery : [product.image];

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-950/85 backdrop-blur-md animate-fade-in">
          <div className="bg-[#111827] border border-slate-800 rounded-3xl max-w-3xl w-full p-5 sm:p-7 space-y-5 shadow-2xl max-h-[92vh] overflow-y-auto">
            <div className="flex justify-between items-start">
              <div className="flex items-center space-x-2">
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-black text-white bg-rose-600 shadow">
                  SHOPEE MALL
                </span>
                <span className="text-xs text-slate-400 font-semibold">100% Authentic Guarantee</span>
              </div>
              <button onClick={onClose} className="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white cursor-pointer">
                <Icons.X className="w-5 h-5" />
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
              <div className="space-y-3">
                <div className="relative rounded-2xl overflow-hidden aspect-[4/5] border border-slate-800 shadow-xl bg-slate-950">
                  <img src={activeGalleryImg || product.image} alt={product.name} className="w-full h-full object-cover transition-all duration-300" />
                  <span className="absolute bottom-3 left-3 bg-slate-950/80 backdrop-blur-md px-2.5 py-1 rounded-full text-[10px] text-amber-400 font-bold border border-slate-700 flex items-center space-x-1">
                    <span>★ {product.rating || 4.9}</span>
                    <span className="text-slate-400">({product.reviews_count || 142} รีวิว)</span>
                  </span>
                </div>

                {gallery.length > 1 && (
                  <div className="flex space-x-2 overflow-x-auto pb-1">
                    {gallery.map((img, idx) => (
                      <button
                        key={idx}
                        onClick={() => setActiveGalleryImg(img)}
                        className={`w-14 h-14 rounded-xl overflow-hidden border-2 shrink-0 transition-all cursor-pointer ${
                          activeGalleryImg === img ? 'border-orange-500 scale-105 shadow-md' : 'border-slate-800 opacity-60'
                        }`}
                      >
                        <img src={img} alt="Thumb" className="w-full h-full object-cover" />
                      </button>
                    ))}
                  </div>
                )}
              </div>

              <div className="space-y-4 text-xs">
                <div>
                  <span className="text-[10px] text-orange-400 font-extrabold uppercase tracking-wider">{product.category_name}</span>
                  <h3 className="text-xl font-black text-white mt-1">{product.name}</h3>
                  <p className="text-slate-400 mt-1">{product.subtitle}</p>
                </div>

                <div className="flex items-baseline space-x-3 bg-slate-900/80 p-3 rounded-2xl border border-slate-800">
                  <span className="text-3xl font-black text-orange-400">฿{product.price.toLocaleString()}</span>
                  {product.original_price && (
                    <span className="text-sm text-slate-500 line-through">฿{product.original_price.toLocaleString()}</span>
                  )}
                  <span className="px-2 py-0.5 rounded bg-orange-500/20 text-orange-400 text-[10px] font-extrabold">
                    ลด {Math.round((1 - product.price / (product.original_price || product.price * 1.5)) * 100)}%
                  </span>
                </div>

                <div className="grid grid-cols-2 gap-2 text-[11px] text-slate-300">
                  <div className="flex items-center space-x-1.5 p-2 rounded-xl bg-slate-900 border border-slate-800">
                    <span>🛡️</span> <span>ของแท้ 100% คืนเงิน 2 เท่า</span>
                  </div>
                  <div className="flex items-center space-x-1.5 p-2 rounded-xl bg-slate-900 border border-slate-800">
                    <span>🚚</span> <span>ส่งฟรีเมื่อสั่งซื้อ 2 ชิ้นขึ้นไป</span>
                  </div>
                </div>

                <p className="text-slate-300 leading-relaxed border-t border-slate-800 pt-3">
                  {product.description}
                </p>

                {product.colors && product.colors.length > 0 && (
                  <div className="space-y-1.5">
                    <label className="block font-bold text-slate-300">เลือกสี (Color): <span className="text-orange-400">{selectedColor?.name}</span></label>
                    <div className="flex flex-wrap gap-2">
                      {product.colors.map((c) => (
                        <button
                          key={c.id}
                          onClick={() => setSelectedColor(c)}
                          className={`px-3 py-1.5 rounded-xl border text-xs font-bold flex items-center space-x-2 cursor-pointer ${
                            selectedColor?.id === c.id ? 'border-orange-500 bg-orange-500/10 text-white ring-1 ring-orange-500' : 'border-slate-800 bg-slate-950 text-slate-400'
                          }`}
                        >
                          <span className="w-3 h-3 rounded-full border border-white/20" style={{ backgroundColor: c.hex }}></span>
                          <span>{c.name}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                {product.sizes && product.sizes.length > 0 && (
                  <div className="space-y-1.5">
                    <label className="block font-bold text-slate-300">เลือกไซส์ (Size): <span className="text-orange-400">{selectedSize}</span></label>
                    <div className="flex flex-wrap gap-2">
                      {product.sizes.map((sz) => (
                        <button
                          key={sz}
                          onClick={() => setSelectedSize(sz)}
                          className={`w-10 h-10 rounded-xl border text-xs font-black flex items-center justify-center cursor-pointer ${
                            selectedSize === sz ? 'border-orange-500 bg-orange-500 text-white shadow-md' : 'border-slate-800 bg-slate-950 text-slate-400'
                          }`}
                        >
                          {sz}
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                <div className="flex items-center space-x-3 pt-2">
                  <div className="flex items-center bg-slate-950 border border-slate-800 rounded-xl p-1">
                    <button onClick={() => setQty(Math.max(1, qty - 1))} className="p-2 text-slate-400 hover:text-white cursor-pointer">
                      <Icons.Minus className="w-3.5 h-3.5" />
                    </button>
                    <span className="px-3 font-bold text-sm text-white">{qty}</span>
                    <button onClick={() => setQty(qty + 1)} className="p-2 text-slate-400 hover:text-white cursor-pointer">
                      <Icons.Plus className="w-3.5 h-3.5" />
                    </button>
                  </div>

                  <button
                    onClick={() => {
                      onAddToCart(product, selectedColor || product.colors?.[0], { label: selectedSize }, qty);
                      onClose();
                    }}
                    className="flex-1 py-3.5 rounded-xl shopee-gradient hover:brightness-110 text-white font-black text-xs shadow-lg cursor-pointer transition-all flex items-center justify-center space-x-2"
                  >
                    <Icons.ShoppingBag className="w-4 h-4" />
                    <span>เพิ่มลงตะกร้า • ฿{(product.price * qty).toLocaleString()}</span>
                  </button>
                </div>

              </div>
            </div>
          </div>
        </div>
      );
    }

    // --- SHOPEE AUTH MODALS (LOGIN & REGISTER) ---
    function LoginModal({ isOpen, onClose, onSuccess, onSwitchToRegister, onQuickSwitch }) {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');
      const [error, setError] = useState('');
      const [loading, setLoading] = useState(false);

      if (!isOpen) return null;

      const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        setLoading(true);
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'login', username, password })
          });
          const data = await res.json();
          if (data.success) {
            onSuccess(data.user, data.message);
            onClose();
          } else {
            setError(data.message || 'เข้าสู่ระบบไม่สำเร็จ');
          }
        } catch (err) {
          setError('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
        } finally {
          setLoading(false);
        }
      };

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-fade-in">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full p-6 sm:p-8 space-y-5 shadow-2xl">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-2xl shopee-gradient flex items-center justify-center font-bold text-white shadow-md">
                  <Icons.Shopee className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="font-black text-lg text-white">เข้าสู่ระบบ Shopee Member Club</h3>
                  <p className="text-xs text-slate-400">รับสิทธิพิเศษ VIP, Shopee Coins & โค้ดส่งฟรี</p>
                </div>
              </div>
              <button onClick={onClose} className="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white cursor-pointer">
                <Icons.X className="w-5 h-5" />
              </button>
            </div>

            {/* Quick Demo Switcher */}
            <QuickDemoSwitcher onQuickSwitch={(tier) => {
              onQuickSwitch(tier);
              onClose();
            }} />

            {error && (
              <div className="bg-rose-950/80 border border-rose-500/50 text-rose-200 text-xs p-3 rounded-xl font-bold">
                {error}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-3.5 text-xs">
              <div>
                <label className="block font-semibold text-slate-300 mb-1">ชื่อผู้ใช้ หรือ อีเมล</label>
                <input
                  type="text"
                  required
                  placeholder="Username หรือ Email"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                  className="w-full py-2.5 px-3.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                />
              </div>
              <div>
                <label className="block font-semibold text-slate-300 mb-1">รหัสผ่าน</label>
                <input
                  type="password"
                  required
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full py-2.5 px-3.5 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                />
              </div>

              <button
                type="submit"
                disabled={loading}
                className="w-full py-3.5 rounded-xl shopee-gradient hover:brightness-110 text-white font-black text-xs shadow-lg cursor-pointer transition-all"
              >
                {loading ? 'กำลังเข้าสู่ระบบ...' : 'LOG IN เข้าสู่ระบบสมาชิก'}
              </button>
            </form>

            <div className="text-center pt-2 border-t border-slate-800 text-xs text-slate-400">
              ยังไม่มีบัญชีสมาชิก?{' '}
              <button onClick={onSwitchToRegister} className="text-orange-400 font-bold hover:underline cursor-pointer">
                สมัครสมาชิก Shopee VIP ที่นี่
              </button>
            </div>
          </div>
        </div>
      );
    }

    function RegisterModal({ isOpen, onClose, onSuccess, onSwitchToLogin, onQuickSwitch }) {
      const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: '',
        fullName: '',
        phone: '',
        address: ''
      });
      const [error, setError] = useState('');
      const [loading, setLoading] = useState(false);

      if (!isOpen) return null;

      const handleChange = (field, val) => {
        setFormData(prev => ({ ...prev, [field]: val }));
      };

      const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        setLoading(true);
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'register', ...formData })
          });
          const data = await res.json();
          if (data.success) {
            onSuccess(data.user, data.message);
            onClose();
          } else {
            setError(data.message || 'สมัครสมาชิกไม่สำเร็จ');
          }
        } catch (err) {
          setError('เกิดข้อผิดพลาดในการเชื่อมต่อเซิร์ฟเวอร์');
        } finally {
          setLoading(false);
        }
      };

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-fade-in">
          <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-8 space-y-4 shadow-2xl max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between border-b border-slate-800 pb-3">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-2xl shopee-gradient flex items-center justify-center font-bold text-white shadow-md">
                  <Icons.Sparkles className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-black text-lg text-white">สมัครสมาชิก Shopee Member Club</h3>
                  <p className="text-xs text-orange-400 font-bold">รับฟรี 100 Shopee Coins + โค้ดส่งฟรีทันที!</p>
                </div>
              </div>
              <button onClick={onClose} className="p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white cursor-pointer">
                <Icons.X className="w-5 h-5" />
              </button>
            </div>

            <QuickDemoSwitcher onQuickSwitch={(tier) => {
              onQuickSwitch(tier);
              onClose();
            }} />

            {error && (
              <div className="bg-rose-950/80 border border-rose-500/50 text-rose-200 text-xs p-3 rounded-xl font-bold">
                {error}
              </div>
            )}

            <form onSubmit={handleSubmit} className="space-y-3 text-xs">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">Username <span className="text-orange-400">*</span></label>
                  <input
                    type="text"
                    required
                    placeholder="shopee_fan"
                    value={formData.username}
                    onChange={(e) => handleChange('username', e.target.value)}
                    className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">Email <span className="text-orange-400">*</span></label>
                  <input
                    type="email"
                    required
                    placeholder="user@example.com"
                    value={formData.email}
                    onChange={(e) => handleChange('email', e.target.value)}
                    className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">รหัสผ่าน <span className="text-orange-400">*</span></label>
                  <input
                    type="password"
                    required
                    placeholder="อย่างน้อย 6 ตัวอักษร"
                    value={formData.password}
                    onChange={(e) => handleChange('password', e.target.value)}
                    className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-300 mb-1">ชื่อ-นามสกุล <span className="text-orange-400">*</span></label>
                  <input
                    type="text"
                    required
                    placeholder="สมชาย ใจดี"
                    value={formData.fullName}
                    onChange={(e) => handleChange('fullName', e.target.value)}
                    className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                  />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-300 mb-1">เบอร์โทรศัพท์ (10 หลัก) <span className="text-orange-400">*</span></label>
                <input
                  type="tel"
                  required
                  placeholder="0812345678"
                  value={formData.phone}
                  onChange={(e) => handleChange('phone', e.target.value)}
                  className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                />
              </div>

              <div>
                <label className="block font-semibold text-slate-300 mb-1">ที่อยู่จัดส่งสินค้า</label>
                <textarea
                  rows={2}
                  placeholder="บ้านเลขที่ ถนน แขวง/ตำบล เขต/อำเภอ จังหวัด รหัสไปรษณีย์"
                  value={formData.address}
                  onChange={(e) => handleChange('address', e.target.value)}
                  className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100 focus:outline-none focus:border-orange-500"
                ></textarea>
              </div>

              <button
                type="submit"
                disabled={loading}
                className="w-full py-3 rounded-xl shopee-gradient hover:brightness-110 text-white font-black text-xs shadow-lg cursor-pointer transition-all mt-2"
              >
                {loading ? 'กำลังบันทึกข้อมูล...' : 'REGISTER NOW (สมัครสมาชิกรับ 100 Coins)'}
              </button>
            </form>

            <div className="text-center pt-2 border-t border-slate-800 text-xs text-slate-400">
              มีบัญชีสมาชิกอยู่แล้ว?{' '}
              <button onClick={onSwitchToLogin} className="text-orange-400 font-bold hover:underline cursor-pointer">
                เข้าสู่ระบบที่นี่
              </button>
            </div>
          </div>
        </div>
      );
    }

    // --- MAIN REACT APP ---
    function App() {
      const [currentUser, setCurrentUser] = useState(window.PHP_USER || null);
      const [userOrders, setUserOrders] = useState([]);
      const [coinLogs, setCoinLogs] = useState([]);
      const [fashionCatalog, setFashionCatalog] = useState(window.PHP_FASHION_CATALOG || []);
      const [selectedCategory, setSelectedCategory] = useState('all');

      const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
      const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
      const [isMemberHubOpen, setIsMemberHubOpen] = useState(false);
      const [memberHubTab, setMemberHubTab] = useState('tier');
      const [isAddProductOpen, setIsAddProductOpen] = useState(false);
      const [selectedProductModal, setSelectedProductModal] = useState(null);

      const [cart, setCart] = useState([]);
      const [selectedVoucher, setSelectedVoucher] = useState(null);
      const [useCoins, setUseCoins] = useState(false);

      const [totalOrderedCount, setTotalOrderedCount] = useState(STORE_CONFIG.totalOrdered || 284);
      const [remainingStock, setRemainingStock] = useState(STORE_CONFIG.remainingStock || 66);
      const [orders, setOrders] = useState(window.PHP_INITIAL_ORDERS || []);

      const [formData, setFormData] = useState({
        fullName: currentUser ? (currentUser.full_name || '') : '',
        phone: currentUser ? (currentUser.phone || '') : '',
        address: currentUser ? (currentUser.address || '') : '',
        note: '',
        paymentMethod: 'promptpay'
      });

      const [isSubmitting, setIsSubmitting] = useState(false);
      const [isCartOpen, setIsCartOpen] = useState(false);
      const [confirmedOrder, setConfirmedOrder] = useState(null);
      const [toasts, setToasts] = useState([]);

      const addToast = (message, type = 'success') => {
        const id = Date.now();
        setToasts(prev => [...prev, { id, message, type }]);
        setTimeout(() => {
          setToasts(prev => prev.filter(t => t.id !== id));
        }, 3500);
      };

      const refreshUserData = async () => {
        try {
          const res = await fetch('index.php?action=get_user');
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            setUserOrders(data.orders || []);
            setCoinLogs(data.coinLogs || []);
          }
        } catch (err) {}
      };

      useEffect(() => {
        if (currentUser) {
          setFormData(prev => ({
            ...prev,
            fullName: currentUser.full_name || prev.fullName,
            phone: currentUser.phone || prev.phone,
            address: currentUser.address || prev.address
          }));
          refreshUserData();
        }
      }, [currentUser?.id]);

      const handleQuickSwitchTier = async (tierKey) => {
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'quick_login', tier: tierKey })
          });
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            addToast(data.message, 'success');
            refreshUserData();
          } else {
            addToast(data.message || 'สลับบัญชีไม่สำเร็จ', 'error');
          }
        } catch (err) {
          addToast('เชื่อมต่อเซิร์ฟเวอร์ล้มเหลว', 'error');
        }
      };

      const handleClaimCoins = async () => {
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'claim_daily_coins' })
          });
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            addToast(`เช็คอินสำเร็จ! รับ +${data.earnedCoins} Shopee Coins (วันที่ ${data.streak}/7) 🎉`, 'success');
            refreshUserData();
          } else {
            addToast(data.message, 'error');
          }
        } catch (err) {
          addToast('เกิดข้อผิดพลาดในการรับเหรียญ', 'error');
        }
      };

      const handleSpinWheel = async () => {
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'lucky_spin' })
          });
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            addToast(data.message, 'success');
            refreshUserData();
            return data;
          } else {
            addToast(data.message, 'error');
            return null;
          }
        } catch (err) {
          addToast('เกิดข้อผิดพลาดในการหมุนวงล้อ', 'error');
          return null;
        }
      };

      const handleClaimMission = async (missionId) => {
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'claim_mission', missionId })
          });
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            addToast(data.message, 'success');
            refreshUserData();
          } else {
            addToast(data.message, 'error');
          }
        } catch (err) {
          addToast('เกิดข้อผิดพลาดในการรับรางวัลภารกิจ', 'error');
        }
      };

      const handleCollectVoucher = async (code) => {
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'collect_voucher', voucherCode: code })
          });
          const data = await res.json();
          if (data.success) {
            setCurrentUser(data.user);
            addToast('เก็บโค้ดส่วนลดเข้ากระเป๋าสำเร็จ!', 'success');
            refreshUserData();
          } else {
            addToast(data.message, 'error');
          }
        } catch (err) {
          addToast('เกิดข้อผิดพลาดในการเก็บโค้ด', 'error');
        }
      };

      const handleLogout = async () => {
        try {
          await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ action: 'logout' })
          });
          setCurrentUser(null);
          setUserOrders([]);
          setCoinLogs([]);
          setIsMemberHubOpen(false);
          addToast('ออกจากระบบเรียบร้อยแล้ว');
        } catch (err) {}
      };

      const handleAddToCart = (product, color, size, quantity = 1) => {
        const cartItem = {
          id: `${product.id}-${color.id}-${size.label}`,
          productId: product.id,
          title: product.name,
          color: color,
          size: size,
          price: product.price,
          quantity: quantity,
          image: product.image
        };

        setCart(prev => {
          const existing = prev.find(i => i.id === cartItem.id);
          if (existing) {
            return prev.map(i => i.id === cartItem.id ? { ...i, quantity: i.quantity + quantity } : i);
          }
          return [...prev, cartItem];
        });

        addToast(`เพิ่ม "${product.name}" ลงตะกร้าแล้ว!`, 'success');
      };

      const handleUpdateCartQty = (id, delta) => {
        setCart(prev => prev.map(item => {
          if (item.id === id) {
            const newQty = item.quantity + delta;
            return newQty > 0 ? { ...item, quantity: newQty } : null;
          }
          return item;
        }).filter(Boolean));
      };

      const handleRemoveCartItem = (id) => {
        setCart(prev => prev.filter(item => item.id !== id));
      };

      // Cart Calculations
      const cartSubtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
      const totalCartCount = cart.reduce((sum, item) => sum + item.quantity, 0);
      const shippingCost = totalCartCount >= STORE_CONFIG.freeShippingMinQty || selectedVoucher === 'SHOPEEFREE' ? 0 : STORE_CONFIG.shippingFee;
      
      let voucherDiscount = 0;
      if (selectedVoucher === 'MALL10') {
        voucherDiscount = Math.round(cartSubtotal * 0.10);
      } else if (selectedVoucher === 'NEWUSER50') {
        voucherDiscount = Math.min(50, cartSubtotal);
      } else if (selectedVoucher === 'BDAY100') {
        voucherDiscount = Math.min(100, cartSubtotal);
      }

      function intval(v) { return parseInt(v, 10) || 0; }

      const availableCoins = currentUser ? intval(currentUser.coins || 0) : 0;
      const maxCoinsDiscount = Math.min(availableCoins, Math.round(cartSubtotal * 0.25));
      const coinsDiscount = useCoins ? maxCoinsDiscount : 0;
      const grandTotal = Math.max(0, cartSubtotal + shippingCost - voucherDiscount - coinsDiscount);

      const handleCheckoutSubmit = async (e) => {
        e.preventDefault();
        if (cart.length === 0) {
          addToast('ตะกร้าสินค้าว่างเปล่า', 'error');
          return;
        }

        if (!formData.fullName.trim() || !formData.phone.trim() || !formData.address.trim()) {
          addToast('กรุณากรอกข้อมูลการจัดส่งให้ครบถ้วน', 'error');
          return;
        }

        setIsSubmitting(true);
        try {
          const res = await fetch('index.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              fullName: formData.fullName,
              phone: formData.phone,
              address: formData.address,
              note: formData.note,
              paymentMethod: formData.paymentMethod,
              voucherCode: selectedVoucher || '',
              coinsUsed: coinsDiscount,
              items: cart
            })
          });

          const data = await res.json();
          if (res.ok && data.success) {
            setConfirmedOrder(data.order);
            if (data.user) setCurrentUser(data.user);
            if (data.totalOrdered) setTotalOrderedCount(data.totalOrdered);
            if (data.remainingStock) setRemainingStock(data.remainingStock);
            if (data.allOrders) setOrders(data.allOrders);

            setCart([]);
            setIsCartOpen(false);
            addToast('สั่งซื้อสำเร็จ! ได้รับ Shopee Coins คืนเข้ากระเป๋า 🎉', 'success');
            refreshUserData();
          } else {
            addToast(data.message || 'เกิดข้อผิดพลาดในการบันทึกคำสั่งซื้อ', 'error');
          }
        } catch (err) {
          addToast('เชื่อมต่อเซิร์ฟเวอร์ล้มเหลว', 'error');
        } finally {
          setIsSubmitting(false);
        }
      };

      const categories = [
        { id: 'all', name: '🌟 ทั้งหมด (All Catalog)' },
        { id: 't-shirts', name: '👕 เสื้อยืด (T-Shirts)' },
        { id: 'hoodies', name: '🧥 เสื้อกันหนาว & แจ็คเก็ต' },
        { id: 'pants', name: '👖 กางเกง (Pants)' },
        { id: 'accessories', name: '🧢 แอคเซสเซอรี่' }
      ];

      const filteredCatalog = useMemo(() => {
        if (selectedCategory === 'all') return fashionCatalog;
        return fashionCatalog.filter(p => p.category === selectedCategory);
      }, [fashionCatalog, selectedCategory]);

      return (
        <div className="min-h-screen flex flex-col bg-[#080d1a] text-slate-100 selection:bg-orange-500 selection:text-white">
          
          {/* SHOPEE TOP BAR BANNER */}
          <div className="shopee-gradient text-white text-xs font-semibold py-2 px-4 sm:px-8 shadow-md">
            <div className="max-w-[1600px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 text-center sm:text-left">
              <div className="flex items-center space-x-2">
                <span className="bg-white/20 px-2 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider flex items-center gap-1">
                  <Icons.Shopee className="w-3.5 h-3.5" /> Shopee Mall Official
                </span>
                <span>🔥 สินค้าแฟชั่นพรีเมียม <strong>รับประกันของแท้ 100%</strong> • คืนเงิน 2 เท่า • ส่งฟรีทั่วไทย</span>
              </div>

              <div className="flex items-center space-x-3 text-[11px] font-bold">
                {currentUser ? (
                  <button
                    onClick={() => {
                      setMemberHubTab('streak');
                      setIsMemberHubOpen(true);
                    }}
                    className="bg-black/25 hover:bg-black/40 px-3 py-1 rounded-full flex items-center space-x-1.5 transition-all cursor-pointer"
                  >
                    <span>🪙 เหรียญของคุณ:</span>
                    <strong className="text-amber-300">{currentUser.coins} Coins</strong>
                    <span className="text-[10px] bg-amber-400 text-slate-950 font-black px-1.5 rounded-full">เช็คอิน</span>
                  </button>
                ) : (
                  <button
                    onClick={() => setIsLoginModalOpen(true)}
                    className="bg-black/20 hover:bg-black/30 px-2.5 py-1 rounded-full cursor-pointer text-amber-300 font-bold"
                  >
                    ⚡ สมัครสมาชิกรับฟรี 100 Coins
                  </button>
                )}
                <span>Flash Express / Kerry COD</span>
              </div>
            </div>
          </div>

          {/* MAIN HEADER */}
          <header className="sticky top-0 z-40 bg-[#0c1322]/90 backdrop-blur-xl border-b border-slate-800 shadow-xl">
            <div className="max-w-[1600px] mx-auto px-4 sm:px-8 h-20 flex items-center justify-between">
              
              {/* Logo & Shopee Mall Badge */}
              <div className="flex items-center space-x-3">
                <div className="w-11 h-11 rounded-2xl shopee-gradient flex items-center justify-center shadow-lg shadow-orange-500/25 font-black text-2xl text-white">
                  S
                </div>
                <div>
                  <div className="flex items-center space-x-2">
                    <span className="text-xl font-black tracking-tight text-white">
                      APEX <span className="text-orange-400">STUDIO</span>
                    </span>
                    <span className="px-2 py-0.5 rounded bg-rose-600 text-white text-[9px] font-black tracking-wider">
                      MALL
                    </span>
                  </div>
                  <p className="text-[10px] text-slate-400 font-semibold">Official Shopee Flagship Store</p>
                </div>
              </div>

              {/* Navigation Links */}
              <nav className="hidden lg:flex items-center space-x-5 text-xs font-bold text-slate-300">
                <a href="#catalog" className="hover:text-orange-400 transition-colors">สินค้าทั้งหมด</a>
                <a href="#flash-sale" className="text-orange-400 hover:text-orange-300 flex items-center space-x-1">
                  <Icons.Sparkles className="w-3.5 h-3.5" />
                  <span>Flash Sale</span>
                </a>
                
                {/* Shopee Member Club Direct Nav Buttons */}
                <button
                  onClick={() => {
                    setMemberHubTab('tier');
                    if (!currentUser) setIsLoginModalOpen(true);
                    else setIsMemberHubOpen(true);
                  }}
                  className="px-3 py-1.5 rounded-xl bg-purple-500/10 border border-purple-500/30 text-purple-300 hover:bg-purple-600 hover:text-white font-bold transition-all flex items-center space-x-1.5 cursor-pointer"
                >
                  <span>👑</span>
                  <span>Shopee VIP Club</span>
                </button>

                <button
                  onClick={() => {
                    setMemberHubTab('spin');
                    if (!currentUser) setIsLoginModalOpen(true);
                    else setIsMemberHubOpen(true);
                  }}
                  className="px-3 py-1.5 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-300 hover:bg-amber-500 hover:text-slate-950 font-bold transition-all flex items-center space-x-1.5 cursor-pointer"
                >
                  <span>🎡</span>
                  <span>วงล้อลุ้นโชค</span>
                </button>

                <button
                  onClick={() => {
                    setMemberHubTab('missions');
                    if (!currentUser) setIsLoginModalOpen(true);
                    else setIsMemberHubOpen(true);
                  }}
                  className="px-3 py-1.5 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 hover:bg-rose-600 hover:text-white font-bold transition-all flex items-center space-x-1.5 cursor-pointer"
                >
                  <span>🎯</span>
                  <span>ภารกิจสะสมเหรียญ</span>
                </button>

                <button
                  onClick={() => setIsAddProductOpen(true)}
                  className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 font-bold transition-all flex items-center space-x-1.5 cursor-pointer"
                >
                  <Icons.Upload className="w-3.5 h-3.5 text-orange-400" />
                  <span>+ เพิ่มสินค้า</span>
                </button>
              </nav>

              {/* Header Right Actions */}
              <div className="flex items-center space-x-3">
                {currentUser ? (
                  <button
                    onClick={() => {
                      setMemberHubTab('tier');
                      setIsMemberHubOpen(true);
                    }}
                    className="px-3.5 py-2 rounded-2xl bg-slate-800 hover:bg-slate-700 border border-orange-500/50 text-orange-300 font-bold text-xs flex items-center space-x-2 cursor-pointer shadow-md"
                  >
                    {currentUser.avatar ? (
                      <img src={currentUser.avatar} alt="User" className="w-6 h-6 rounded-full object-cover border border-orange-400" />
                    ) : (
                      <div className="w-6 h-6 rounded-full shopee-gradient text-white flex items-center justify-center font-black text-[10px]">
                        {currentUser.username ? currentUser.username[0].toUpperCase() : 'U'}
                      </div>
                    )}
                    <span className="hidden sm:inline">{currentUser.full_name || currentUser.username}</span>
                    <span className="bg-orange-500 text-white text-[9px] font-black px-1.5 py-0.5 rounded shadow">
                      {currentUser.membership_tier ? currentUser.membership_tier.toUpperCase() : 'VIP'}
                    </span>
                  </button>
                ) : (
                  <div className="flex items-center space-x-2">
                    <button
                      onClick={() => setIsLoginModalOpen(true)}
                      className="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold text-xs cursor-pointer border border-slate-700"
                    >
                      เข้าสู่ระบบ
                    </button>
                    <button
                      onClick={() => setIsRegisterModalOpen(true)}
                      className="px-3.5 py-2 rounded-xl shopee-gradient text-white font-black text-xs cursor-pointer shadow-md"
                    >
                      สมัครสมาชิก VIP
                    </button>
                  </div>
                )}

                {/* Cart Trigger */}
                <button
                  onClick={() => setIsCartOpen(true)}
                  className="relative touch-target px-4 py-2.5 rounded-2xl bg-slate-800 hover:bg-slate-700 border border-slate-700/80 transition-all flex items-center space-x-2.5 group shadow-lg cursor-pointer"
                >
                  <div className="relative">
                    <Icons.ShoppingBag className="w-5 h-5 text-orange-400 group-hover:scale-110 transition-transform" />
                    {totalCartCount > 0 && (
                      <span className="absolute -top-2 -right-2 shopee-gradient text-white font-black text-[10px] w-5 h-5 rounded-full flex items-center justify-center shadow-md">
                        {totalCartCount}
                      </span>
                    )}
                  </div>
                  <div className="hidden sm:flex flex-col text-left text-xs">
                    <span className="text-slate-400 text-[10px]">ตะกร้า</span>
                    <span className="text-orange-400 font-black">฿{cartSubtotal.toLocaleString()}</span>
                  </div>
                </button>
              </div>

            </div>
          </header>

          {/* SHOPEE MEMBER VIP CLUB HERO BANNER */}
          <section className="bg-gradient-to-r from-orange-950/40 via-purple-950/30 to-slate-950 border-b border-slate-800 py-6 px-4 sm:px-8">
            <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
              
              <div className="w-full md:w-2/3 space-y-3">
                <div className="flex items-center space-x-2.5">
                  <span className="px-3 py-1 rounded-full shopee-gradient text-white text-xs font-black uppercase tracking-wider flex items-center space-x-1.5 shadow-lg">
                    <span>👑</span>
                    <span>SHOPEE MEMBER CLUB VIP</span>
                  </span>
                  <span className="text-xs text-amber-300 font-bold">
                    สมาชิกลอยัลตี้รับ Shopee Coins & สิทธิพิเศษสูงสุด 4 ระดับ
                  </span>
                </div>

                <h1 className="text-2xl sm:text-3xl font-black text-white">
                  ระบบสมาชิกสไตล์ Shopee: Classic, Silver, Gold & Platinum Super VIP
                </h1>
                <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">
                  ช้อปเสื้อผ้าแฟชั่นสตรีท APEX STUDIO สะสมยอดออเดอร์เพื่อเลื่อนระดับ VIP รับเงินคืน Coins สูงสุด 10%, โค้ดส่งฟรี x8 โค้ดต่อเดือน, เช็คอิน 7 วัน และของขวัญวันเกิด
                </p>

                {/* 1-Click Quick Tier Switcher Bar in Hero */}
                <div className="pt-2">
                  <QuickDemoSwitcher onQuickSwitch={handleQuickSwitchTier} />
                </div>
              </div>

              {/* Shopee VIP Quick Actions Box */}
              <div className="flex flex-col gap-2.5 w-full md:w-auto shrink-0 text-xs">
                <div
                  onClick={() => {
                    setMemberHubTab('streak');
                    if (!currentUser) setIsLoginModalOpen(true);
                    else setIsMemberHubOpen(true);
                  }}
                  className="glass-card p-3.5 rounded-2xl border border-amber-500/40 hover:border-amber-400 cursor-pointer flex items-center space-x-3 transition-all hover:scale-102"
                >
                  <span className="text-2xl">📅</span>
                  <div>
                    <p className="font-extrabold text-white">เช็คอิน 7 วันรับเหรียญ</p>
                    <p className="text-[10px] text-amber-400 font-semibold">รับสูงสุด +50 Coins & Super Box</p>
                  </div>
                </div>

                <div
                  onClick={() => {
                    setMemberHubTab('spin');
                    if (!currentUser) setIsLoginModalOpen(true);
                    else setIsMemberHubOpen(true);
                  }}
                  className="glass-card p-3.5 rounded-2xl border border-purple-500/40 hover:border-purple-400 cursor-pointer flex items-center space-x-3 transition-all hover:scale-102"
                >
                  <span className="text-2xl">🎡</span>
                  <div>
                    <p className="font-extrabold text-white">วงล้อลุ้นโชค Shopee Rewards</p>
                    <p className="text-[10px] text-purple-300 font-semibold">หมุนฟรีลุ้นรับ 100 Coins & โค้ดลด</p>
                  </div>
                </div>
              </div>

            </div>
          </section>

          {/* FLASH SALE & CAMPAIGN BANNER */}
          <section id="flash-sale" className="bg-[#0b101d] border-b border-slate-800 py-6 px-4 sm:px-8">
            <div className="max-w-[1600px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
              
              <div className="w-full md:w-2/3 space-y-2.5">
                <div className="flex items-center space-x-3">
                  <span className="px-2.5 py-0.5 rounded-full shopee-gradient text-white text-[11px] font-black uppercase tracking-wider flex items-center space-x-1 shadow">
                    <Icons.Sparkles className="w-3 h-3" />
                    <span>FLASH SALE ⚡ ลดสูงสุด 50%</span>
                  </span>
                  <div className="flex items-center space-x-1 text-xs text-orange-400 font-bold">
                    <span>นับถอยหลัง: <strong>02 : 18 : 45</strong></span>
                  </div>
                </div>

                <h2 className="text-xl sm:text-2xl font-black text-white">
                  Apex Heavyweight Oversized Tee 220 GSM Bio-washed
                </h2>

                <div className="space-y-1 max-w-xl">
                  <div className="flex justify-between text-xs font-bold">
                    <span className="text-slate-300">ขายแล้ว {totalOrderedCount} / {STORE_CONFIG.campaignGoal || 350} ชิ้น</span>
                    <span className="text-orange-400">คงเหลือ {remainingStock} ชิ้น!</span>
                  </div>
                  <div className="w-full h-2.5 bg-slate-800 rounded-full overflow-hidden p-0.5 border border-slate-700">
                    <div
                      className="h-full shopee-gradient rounded-full transition-all duration-700"
                      style={{ width: `${Math.min(100, (totalOrderedCount / (STORE_CONFIG.campaignGoal || 350)) * 100)}%` }}
                    ></div>
                  </div>
                </div>
              </div>

              <div className="flex gap-3 text-xs">
                <div className="glass-card p-3 rounded-2xl border border-slate-800 flex items-center space-x-2">
                  <span className="text-xl">🛡️</span>
                  <div>
                    <p className="font-bold text-white">Shopee Mall แท้ 100%</p>
                    <p className="text-[10px] text-slate-400">คืนเงิน 2 เท่าหากไม่แท้</p>
                  </div>
                </div>
              </div>

            </div>
          </section>

          {/* FASHION PRODUCTS CATALOG */}
          <main id="catalog" className="flex-1 max-w-[1600px] w-full mx-auto px-4 sm:px-8 py-10 space-y-8">
            
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-slate-800 pb-4">
              <div>
                <h2 className="text-2xl sm:text-3xl font-black text-white tracking-tight flex items-center space-x-2">
                  <span>สินค้าทั้งหมดในร้าน</span>
                  <span className="text-orange-400 text-sm font-bold">({filteredCatalog.length} รายการ)</span>
                </h2>
                <p className="text-xs text-slate-400 mt-0.5">ภาพถ่ายสินค้าจริงและสวมใส่บนตัวแบบ (Real Product Photography)</p>
              </div>

              <div className="flex items-center space-x-2">
                <button
                  onClick={() => setIsAddProductOpen(true)}
                  className="px-4 py-2 rounded-2xl shopee-gradient text-white text-xs font-black flex items-center space-x-1.5 shadow-lg cursor-pointer"
                >
                  <Icons.Plus className="w-4 h-4" />
                  <span>เพิ่มสินค้าใหม่ (อัปโหลดรูปภาพ)</span>
                </button>
              </div>
            </div>

            {/* Category Filter Tabs */}
            <div className="flex flex-wrap gap-2">
              {categories.map((cat) => (
                <button
                  key={cat.id}
                  onClick={() => setSelectedCategory(cat.id)}
                  className={`px-4 py-2 rounded-2xl text-xs font-extrabold transition-all cursor-pointer border ${
                    selectedCategory === cat.id
                      ? 'shopee-gradient text-white border-orange-500 shadow-lg shadow-orange-500/20 scale-105'
                      : 'bg-slate-900 text-slate-400 border-slate-800 hover:text-white'
                  }`}
                >
                  {cat.name}
                </button>
              ))}
            </div>

            {/* Product Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {filteredCatalog.map((prod) => (
                <div
                  key={prod.id}
                  className="group glass-card rounded-3xl overflow-hidden border border-slate-800/90 hover:border-orange-500/60 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 flex flex-col justify-between"
                >
                  <div>
                    <div className="relative aspect-[4/5] overflow-hidden bg-slate-950">
                      <img
                        src={prod.image}
                        alt={prod.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                      <div className="absolute top-3 left-3 flex flex-col space-y-1">
                        <span className={`px-2.5 py-0.5 rounded-md text-[10px] font-black text-white shadow-md ${prod.badge_color || 'bg-rose-600'}`}>
                          {prod.badge || 'SHOPEE MALL'}
                        </span>
                      </div>
                      <div className="absolute top-3 right-3 bg-slate-950/80 backdrop-blur-md px-2.5 py-1 rounded-full border border-slate-800 text-[10px] font-bold text-amber-400 flex items-center space-x-1">
                        <span>★ {prod.rating}</span>
                        <span className="text-slate-500">({prod.reviews_count})</span>
                      </div>
                      <div className="absolute bottom-3 left-3 bg-slate-950/85 backdrop-blur-md px-2.5 py-1 rounded-lg text-[10px] text-slate-300 font-semibold border border-slate-800">
                        ขายแล้ว {prod.sold_count || 140} ชิ้น
                      </div>
                    </div>

                    <div className="p-4 space-y-2">
                      <span className="text-[10px] text-orange-400 font-extrabold uppercase tracking-wider">{prod.category_name}</span>
                      <h3 className="font-extrabold text-sm text-white group-hover:text-orange-400 transition-colors line-clamp-1">
                        {prod.name}
                      </h3>
                      <p className="text-[11px] text-slate-400 line-clamp-2">{prod.subtitle}</p>

                      <div className="flex items-baseline space-x-2 pt-1">
                        <span className="text-lg font-black text-white">฿{prod.price.toLocaleString()}</span>
                        {prod.original_price && (
                          <span className="text-xs text-slate-500 line-through">฿{prod.original_price.toLocaleString()}</span>
                        )}
                        <span className="text-[10px] text-orange-400 font-bold">
                          - {Math.round((1 - prod.price / (prod.original_price || prod.price * 1.5)) * 100)}%
                        </span>
                      </div>
                    </div>
                  </div>

                  <div className="p-4 pt-0 flex gap-2">
                    <button
                      onClick={() => setSelectedProductModal(prod)}
                      className="flex-1 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs cursor-pointer text-center transition-all"
                    >
                      ดูรูปจริง / เลือกไซส์
                    </button>
                    <button
                      onClick={() => handleAddToCart(prod, prod.colors?.[0] || COLOR_OPTIONS[0], { label: prod.sizes?.[0] || 'M' }, 1)}
                      className="p-2.5 rounded-xl shopee-gradient hover:brightness-110 text-white font-bold cursor-pointer transition-all shadow-md"
                      title="เพิ่มลงตะกร้า"
                    >
                      <Icons.ShoppingBag className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              ))}
            </div>

          </main>

          {/* CART DRAWER */}
          {isCartOpen && (
            <div className="fixed inset-0 z-50 overflow-hidden">
              <div onClick={() => setIsCartOpen(false)} className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"></div>

              <div className="fixed inset-y-0 right-0 max-w-full flex pl-10">
                <div className="w-screen max-w-md bg-[#111827] border-l border-slate-800 shadow-2xl flex flex-col justify-between animate-slide-in-right">
                  
                  <div className="p-5 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
                    <div className="flex items-center space-x-2">
                      <Icons.ShoppingBag className="w-5 h-5 text-orange-400" />
                      <h3 className="font-bold text-slate-100 text-base">ตะกร้าสินค้า Shopee ({totalCartCount})</h3>
                    </div>
                    <button onClick={() => setIsCartOpen(false)} className="p-2 rounded-xl text-slate-400 hover:text-white bg-slate-800 cursor-pointer">
                      <Icons.X className="w-5 h-5" />
                    </button>
                  </div>

                  <div className="flex-1 overflow-y-auto p-5 space-y-5">
                    {cart.length === 0 ? (
                      <div className="py-16 text-center space-y-3">
                        <p className="font-bold text-slate-300 text-sm">ยังไม่มีสินค้าในตะกร้า</p>
                        <button onClick={() => setIsCartOpen(false)} className="px-5 py-2.5 rounded-xl shopee-gradient text-white font-bold text-xs cursor-pointer">
                          เริ่มเลือกช้อปสินค้า
                        </button>
                      </div>
                    ) : (
                      <div className="space-y-4">
                        {cart.map((item) => (
                          <div key={item.id} className="p-3.5 rounded-2xl bg-slate-800/60 border border-slate-800 flex space-x-3 items-center">
                            <div className="w-14 h-16 rounded-xl overflow-hidden bg-slate-950 border border-slate-700 shrink-0">
                              {item.image ? (
                                <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
                              ) : (
                                <div className="w-full h-full flex items-center justify-center font-bold text-xs text-white" style={{ backgroundColor: item.color.hex }}>
                                  {item.size.label}
                                </div>
                              )}
                            </div>

                            <div className="flex-1 min-w-0 space-y-1">
                              <h4 className="font-bold text-slate-200 text-xs truncate">{item.title}</h4>
                              <p className="text-[11px] text-slate-400">ไซส์: {item.size.label} • ฿{item.price}</p>
                              <div className="flex items-center space-x-1.5 bg-slate-900 px-2 py-0.5 rounded-lg border border-slate-700 w-fit">
                                <button onClick={() => handleUpdateCartQty(item.id, -1)} className="w-5 h-5 text-slate-300 cursor-pointer"><Icons.Minus className="w-3 h-3" /></button>
                                <span className="text-xs font-bold text-orange-400 w-5 text-center">{item.quantity}</span>
                                <button onClick={() => handleUpdateCartQty(item.id, 1)} className="w-5 h-5 text-slate-300 cursor-pointer"><Icons.Plus className="w-3 h-3" /></button>
                              </div>
                            </div>

                            <div className="text-right space-y-2">
                              <span className="font-bold text-sm text-slate-100 block">฿{(item.price * item.quantity).toLocaleString()}</span>
                              <button onClick={() => handleRemoveCartItem(item.id)} className="text-rose-400 p-1 text-xs cursor-pointer"><Icons.Trash className="w-4 h-4" /></button>
                            </div>
                          </div>
                        ))}

                        {/* SHOPEE VOUCHER SELECTOR */}
                        <div className="p-3.5 rounded-2xl bg-orange-950/20 border border-orange-500/30 space-y-2">
                          <div className="flex items-center justify-between text-xs">
                            <span className="font-bold text-orange-400 flex items-center space-x-1">
                              <Icons.Tag className="w-3.5 h-3.5" />
                              <span>โค้ดส่วนลด Shopee</span>
                            </span>
                            <span className="text-[10px] text-slate-400">เลือกใช้โค้ด</span>
                          </div>
                          
                          <select
                            value={selectedVoucher || ''}
                            onChange={(e) => setSelectedVoucher(e.target.value)}
                            className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white"
                          >
                            <option value="">-- ไม่ใช้โค้ดส่วนลด --</option>
                            <option value="SHOPEEFREE">SHOPEEFREE - ส่งฟรีขั้นต่ำ 0.- (ลด ฿50)</option>
                            <option value="MALL10">MALL10 - ส่วนลด 10% Shopee Mall</option>
                            <option value="NEWUSER50">NEWUSER50 - ลด 50.- สมาชิกใหม่</option>
                            <option value="BDAY100">BDAY100 - ของขวัญวันเกิด VIP ลด 100.-</option>
                          </select>
                        </div>

                        {/* SHOPEE COINS REDEMPTION */}
                        {currentUser && availableCoins > 0 && (
                          <div className="p-3.5 rounded-2xl bg-amber-950/20 border border-amber-500/30 flex items-center justify-between text-xs">
                            <div className="flex items-center space-x-2">
                              <span className="text-base">🪙</span>
                              <div>
                                <p className="font-bold text-amber-300">ใช้ Shopee Coins</p>
                                <p className="text-[10px] text-slate-400">มี {availableCoins} Coins (ลดได้สูงสุด ฿{maxCoinsDiscount})</p>
                              </div>
                            </div>
                            <input
                              type="checkbox"
                              checked={useCoins}
                              onChange={(e) => setUseCoins(e.target.checked)}
                              className="w-5 h-5 accent-orange-500 cursor-pointer"
                            />
                          </div>
                        )}

                        {/* CHECKOUT FORM */}
                        <div className="border-t border-slate-800 pt-4 space-y-3">
                          <h4 className="font-extrabold text-xs text-slate-200 flex items-center space-x-1.5">
                            <Icons.User className="w-4 h-4 text-orange-400" />
                            <span>ข้อมูลผู้รับและที่อยู่จัดส่ง</span>
                          </h4>

                          <form id="checkout-form" onSubmit={handleCheckoutSubmit} className="space-y-3 text-xs">
                            <div>
                              <label className="block text-slate-400 mb-1">ชื่อ-นามสกุล <span className="text-orange-400">*</span></label>
                              <input
                                type="text"
                                required
                                value={formData.fullName}
                                onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                                className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100"
                              />
                            </div>
                            <div>
                              <label className="block text-slate-400 mb-1">เบอร์โทรศัพท์ <span className="text-orange-400">*</span></label>
                              <input
                                type="tel"
                                required
                                value={formData.phone}
                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100"
                              />
                            </div>
                            <div>
                              <label className="block text-slate-400 mb-1">ที่อยู่จัดส่ง <span className="text-orange-400">*</span></label>
                              <textarea
                                rows={2}
                                required
                                value={formData.address}
                                onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                                className="w-full py-2 px-3 rounded-xl bg-slate-950 border border-slate-800 text-slate-100"
                              ></textarea>
                            </div>

                            <div>
                              <label className="block text-slate-400 mb-1">ช่องทางชำระเงิน</label>
                              <div className="grid grid-cols-2 gap-2">
                                <button
                                  type="button"
                                  onClick={() => setFormData({ ...formData, paymentMethod: 'promptpay' })}
                                  className={`p-2.5 rounded-xl border text-left cursor-pointer ${
                                    formData.paymentMethod === 'promptpay' ? 'bg-orange-500/20 border-orange-500 text-orange-300' : 'bg-slate-950 border-slate-800 text-slate-400'
                                  }`}
                                >
                                  <p className="font-bold text-xs text-white">Mobile Banking</p>
                                  <p className="text-[10px] text-slate-400">QR PromptPay</p>
                                </button>
                                <button
                                  type="button"
                                  onClick={() => setFormData({ ...formData, paymentMethod: 'cod' })}
                                  className={`p-2.5 rounded-xl border text-left cursor-pointer ${
                                    formData.paymentMethod === 'cod' ? 'bg-orange-500/20 border-orange-500 text-orange-300' : 'bg-slate-950 border-slate-800 text-slate-400'
                                  }`}
                                >
                                  <p className="font-bold text-xs text-white">เก็บเงินปลายทาง</p>
                                  <p className="text-[10px] text-slate-400">COD จ่ายตอนรับของ</p>
                                </button>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    )}
                  </div>

                  {cart.length > 0 && (
                    <div className="p-5 border-t border-slate-800 bg-slate-950/90 space-y-3">
                      <div className="space-y-1 text-xs text-slate-300">
                        <div className="flex justify-between"><span>ยอดรวมสินค้า</span><span>฿{cartSubtotal.toLocaleString()}</span></div>
                        <div className="flex justify-between"><span>ค่าจัดส่ง</span><span>{shippingCost === 0 ? 'ฟรี (FREE)' : `฿${shippingCost}`}</span></div>
                        {voucherDiscount > 0 && (
                          <div className="flex justify-between text-orange-400"><span>โค้ดส่วนลด</span><span>-฿{voucherDiscount}</span></div>
                        )}
                        {coinsDiscount > 0 && (
                          <div className="flex justify-between text-amber-400"><span>ส่วนลด Shopee Coins</span><span>-฿{coinsDiscount}</span></div>
                        )}
                        <div className="flex justify-between font-bold text-white pt-2 border-t border-slate-800 text-sm">
                          <span>ยอดชำระสุทธิ</span><span className="text-orange-400 text-xl font-black">฿{grandTotal.toLocaleString()}</span>
                        </div>
                      </div>

                      <button
                        type="submit"
                        form="checkout-form"
                        disabled={isSubmitting}
                        className="w-full py-3.5 rounded-xl shopee-gradient text-white font-black text-sm shadow-xl cursor-pointer disabled:opacity-40"
                      >
                        {isSubmitting ? 'กำลังดำเนินการ...' : 'สั่งซื้อสินค้า (PLACE ORDER)'}
                      </button>
                    </div>
                  )}

                </div>
              </div>
            </div>
          )}

          {/* CONFIRMED ORDER POPUP */}
          {confirmedOrder && (
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md">
              <div className="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-8 space-y-5 shadow-2xl my-8 animate-fade-in">
                <div className="text-center space-y-2">
                  <div className="w-14 h-14 rounded-full bg-emerald-500/20 text-emerald-400 border border-emerald-500/40 mx-auto flex items-center justify-center shadow-lg">
                    <Icons.Check className="w-7 h-7" />
                  </div>
                  <h3 className="text-2xl font-black text-white">สั่งซื้อสินค้าสำเร็จ!</h3>
                  <p className="text-xs text-orange-400 font-semibold">{confirmedOrder.customer.paymentLabel}</p>
                  <div className="inline-block px-3 py-1 rounded-full bg-slate-800 border border-slate-700 text-orange-400 font-mono font-bold text-xs">
                    เลขที่ออเดอร์: {confirmedOrder.orderId}
                  </div>
                </div>

                {confirmedOrder.customer.paymentMethod === 'promptpay' ? (
                  <div className="glass-card p-5 rounded-2xl text-center space-y-3 border border-slate-800">
                    <p className="text-xs font-bold text-orange-400">สแกน QR Code เพื่อชำระเงินผ่าน Mobile Banking</p>
                    <div className="w-44 h-44 bg-white p-3 rounded-2xl mx-auto flex flex-col items-center justify-center shadow-inner">
                      <Icons.QrCode className="w-36 h-36 text-slate-900" />
                      <span className="text-[8px] text-slate-600 font-black tracking-widest uppercase">Thai QR PromptPay</span>
                    </div>
                    <div className="text-xs space-y-0.5 text-slate-300">
                      <p>ยอดชำระ: <strong className="text-orange-400 text-lg font-black">฿{confirmedOrder.grandTotal.toLocaleString()}</strong></p>
                      <p className="text-slate-400">ธนาคารกสิกรไทย: 012-3-45678-9 (บจก. เอเพ็กซ์ สตูดิโอ)</p>
                    </div>
                  </div>
                ) : (
                  <div className="glass-card p-5 rounded-2xl text-center space-y-2 border border-orange-500/30">
                    <p className="font-extrabold text-sm text-white">เก็บเงินปลายทาง (Cash on Delivery)</p>
                    <p className="text-xs text-slate-300">
                      เตรียมเงินสดหรือสแกนจ่ายกับพนักงานขนส่ง Flash Express / Kerry ยอดรวม <strong>฿{confirmedOrder.grandTotal.toLocaleString()}</strong>
                    </p>
                  </div>
                )}

                <div className="flex gap-2">
                  <button
                    onClick={() => {
                      setConfirmedOrder(null);
                      setMemberHubTab('orders');
                      setIsMemberHubOpen(true);
                    }}
                    className="flex-1 py-3 rounded-xl bg-slate-800 text-xs font-bold text-slate-200 cursor-pointer"
                  >
                    ดูคำสั่งซื้อใน Shopee VIP
                  </button>
                  <button
                    onClick={() => setConfirmedOrder(null)}
                    className="flex-1 py-3 rounded-xl shopee-gradient text-white font-black text-xs cursor-pointer"
                  >
                    กลับสู่หน้าร้าน
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* ALL MODALS */}
          <ShopeeMemberHubModal
            isOpen={isMemberHubOpen}
            onClose={() => setIsMemberHubOpen(false)}
            currentUser={currentUser}
            onLogout={handleLogout}
            userOrders={userOrders}
            coinLogs={coinLogs}
            initialTab={memberHubTab}
            onProfileUpdate={(u) => setCurrentUser(u)}
            onClaimCoins={handleClaimCoins}
            onSpinWheel={handleSpinWheel}
            onClaimMission={handleClaimMission}
            onCollectVoucher={handleCollectVoucher}
            onQuickSwitchTier={handleQuickSwitchTier}
            onUploadSlipForOrder={(orderId, slipUrl) => {
              setUserOrders(prev => prev.map(o => o.orderId === orderId ? { ...o, slipImage: slipUrl, status: 'Slip Uploaded' } : o));
            }}
          />

          <AddProductModal
            isOpen={isAddProductOpen}
            onClose={() => setIsAddProductOpen(false)}
            onProductAdded={(newCatalog) => setFashionCatalog(newCatalog)}
          />

          <ProductDetailModal
            isOpen={!!selectedProductModal}
            onClose={() => setSelectedProductModal(null)}
            product={selectedProductModal}
            onAddToCart={handleAddToCart}
          />

          <LoginModal
            isOpen={isLoginModalOpen}
            onClose={() => setIsLoginModalOpen(false)}
            onSuccess={(u, msg) => {
              setCurrentUser(u);
              addToast(msg);
              setIsLoginModalOpen(false);
            }}
            onSwitchToRegister={() => {
              setIsLoginModalOpen(false);
              setIsRegisterModalOpen(true);
            }}
            onQuickSwitch={handleQuickSwitchTier}
          />

          <RegisterModal
            isOpen={isRegisterModalOpen}
            onClose={() => setIsRegisterModalOpen(false)}
            onSuccess={(u, msg) => {
              setCurrentUser(u);
              addToast(msg);
              setIsRegisterModalOpen(false);
            }}
            onSwitchToLogin={() => {
              setIsRegisterModalOpen(false);
              setIsLoginModalOpen(true);
            }}
            onQuickSwitch={handleQuickSwitchTier}
          />

          {/* TOAST NOTIFICATIONS */}
          <div className="fixed bottom-5 right-5 z-50 space-y-2 pointer-events-none">
            {toasts.map((toast) => (
              <div key={toast.id} className="pointer-events-auto px-4 py-3 rounded-2xl bg-slate-900 text-white border border-orange-500/50 text-xs font-bold flex items-center space-x-2 shadow-2xl animate-fade-in">
                <span className="text-orange-400">✨</span>
                <span>{toast.message}</span>
              </div>
            ))}
          </div>

          {/* FOOTER */}
          <footer className="mt-auto border-t border-slate-800 bg-[#060a14] py-8 px-4 sm:px-8 text-xs text-slate-500">
            <div className="max-w-[1600px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-center sm:text-left">
              <div className="space-y-1">
                <div className="flex items-center space-x-2 justify-center sm:justify-start">
                  <span className="font-bold text-slate-300">APEX STUDIO OFFICIAL SHOP</span>
                  <span className="bg-rose-600 text-white text-[9px] font-black px-1.5 py-0.5 rounded">SHOPEE MALL</span>
                </div>
                <p>© 2026 APEX STUDIO. All rights reserved. Shopee Member Club & Fashion Store.</p>
              </div>

              <div className="flex items-center space-x-4 font-semibold text-slate-400">
                <span>100% Authentic</span>
                <span>•</span>
                <span>Shopee Coins</span>
                <span>•</span>
                <span>COD Supported</span>
              </div>
            </div>
          </footer>

        </div>
      );
    }

    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>