<?php
session_start();
$ADMIN_USER = 'admin';
$ADMIN_PASS = 'Alarcade123#';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
    if ($_POST['username'] === $ADMIN_USER && $_POST['password'] === $ADMIN_PASS) {
        $_SESSION['branding_auth'] = true;
    }
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['logout'])) {
    unset($_SESSION['branding_auth']);
}

if (!($_SESSION['branding_auth'] ?? false)) {
    ?><!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EL3AB Branding Admin</title>
    <style>body{background:#0a0a1a;color:#f8fafc;font-family:'IBM Plex Sans Arabic',sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}form{background:#1a1a2e;padding:40px;border-radius:16px;width:320px;text-align:center}input{width:100%;padding:12px;margin:8px 0;background:#2a2a4a;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px}button{width:100%;padding:12px;margin-top:16px;background:linear-gradient(135deg,#E4AC38,#FFCC66);border:none;border-radius:8px;color:#1a1a1a;font-weight:700;font-size:15px;cursor:pointer}h2{color:#E4AC38;margin-bottom:16px}</style></head><body>
    <form method="POST"><h2>EL3AB Branding</h2><input name="username" placeholder="Username" required><input name="password" type="password" placeholder="Password" required><button name="login" value="1">دخول</button></form></body></html><?php
    exit;
}

$BRAND_DIR = __DIR__ . '/../public/assets/brand/';
if (!is_dir($BRAND_DIR)) mkdir($BRAND_DIR, 0777, true);

$THEME_FILE = __DIR__ . '/../public/assets/brand/theme.json';

// Load theme from Supabase first (persistent), fallback to local file
require_once __DIR__ . '/../includes/supabase.php';
$sdb = supabaseService();
$themeRows = $sdb->get('platform_theme', ['select' => 'id,value']);
$theme = [];
if (is_array($themeRows) && !isset($themeRows['error'])) {
    foreach ($themeRows as $row) {
        $theme[$row['id']] = $row['value'];
    }
}
// Load assets from platform_assets table
$assetRows = $sdb->get('platform_assets', ['select' => 'id,asset_url']);
if (is_array($assetRows) && !isset($assetRows['error'])) {
    if (!isset($theme['assets'])) $theme['assets'] = [];
    foreach ($assetRows as $row) {
        if ($row['asset_url']) {
            $theme['assets'][$row['id']] = $row['asset_url'];
        }
    }
}
// Merge local file on top (for assets that are still local)
if (file_exists($THEME_FILE)) {
    $localTheme = json_decode(file_get_contents($THEME_FILE), true) ?: [];
    $theme = array_merge($theme, $localTheme);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['save_theme'])) {
    $theme = array_merge($theme, $_POST['theme'] ?? []);
    file_put_contents($THEME_FILE, json_encode($theme, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    // Also save to Supabase (persistent across deploys)
    require_once __DIR__ . '/../includes/supabase.php';
    $sdb = supabaseService();
    foreach ($_POST['theme'] ?? [] as $key => $value) {
        if (empty($key) || $value === null) continue;
        $existing = $sdb->get('platform_theme', ['id' => 'eq.' . $key, 'select' => 'id', 'limit' => 1]);
        if (!empty($existing) && !isset($existing['error'])) {
            $sdb->update('platform_theme', ['value' => $value], ['id' => 'eq.' . $key]);
        } else {
            $cat = 'color';
            if (strpos($key, 'anim_') === 0 || strpos($key, 'btn_') === 0) $cat = 'animation';
            if (strpos($key, 'ludo_') === 0 || strpos($key, 'board_') === 0) $cat = 'game';
            if (strpos($key, 'juice_') === 0) $cat = 'juice';
            $sdb->insert('platform_theme', ['id' => $key, 'category' => $cat, 'group_name' => 'player_app', 'label' => $key, 'value' => $value, 'default_value' => $value, 'value_type' => (strpos($value, '#') === 0) ? 'hex' : 'string']);
        }
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['asset'])) {
    $slot = $_POST['slot'] ?? '';
    $expectedW = intval($_POST['expected_w'] ?? 64);
    $expectedH = intval($_POST['expected_h'] ?? 64);
    $file = $_FILES['asset'];
    if ($file['error'] === 0 && $slot) {
        $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
        $fileName = 'branding/' . $slot . '.' . $ext;
        $fileContent = file_get_contents($file['tmp_name']);

        // Upload to Supabase Storage (persistent across deploys)
        $storageUrl = SUPABASE_URL . '/storage/v1/object/profile-images/' . $fileName;
        $ch = curl_init($storageUrl);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
        curl_setopt($ch, CURLOPT_POSTFIELDS, $fileContent);
        $mimeTypes = ['svg' => 'image/svg+xml', 'png' => 'image/png', 'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg', 'webp' => 'image/webp', 'gif' => 'image/gif'];
        curl_setopt($ch, CURLOPT_HTTPHEADER, [
            'apikey: ' . SUPABASE_SERVICE_KEY,
            'Authorization: Bearer ' . SUPABASE_SERVICE_KEY,
            'Content-Type: ' . ($mimeTypes[$ext] ?? 'application/octet-stream'),
            'x-upsert: true'
        ]);
        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
        $uploadResult = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);

        if ($httpCode >= 200 && $httpCode < 300) {
            // Public URL with anon key for browser access
            $anonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzM1Njg5NjAwLCJleHAiOjE4OTM0NTYwMDB9.31PF6PvP-pSrvRuQwLFptQoejR0W1A7o53lZhEbnz84';
            $publicUrl = SUPABASE_URL . '/storage/v1/object/public/profile-images/' . $fileName . '?apikey=' . $anonKey . '&v=' . time();
            $theme['assets'][$slot] = $publicUrl;

            // Save asset URL to Supabase platform_assets table (upsert)
            $existing = $sdb->get('platform_assets', ['id' => 'eq.' . $slot, 'select' => 'id', 'limit' => 1]);
            if (!empty($existing) && !isset($existing['error'])) {
                $result = $sdb->update('platform_assets', ['asset_url' => $publicUrl, 'dimensions' => $expectedW . 'x' . $expectedH], ['id' => 'eq.' . $slot]);
            } else {
                $result = $sdb->insert('platform_assets', ['id' => $slot, 'category' => 'custom', 'label' => $slot, 'asset_url' => $publicUrl, 'dimensions' => $expectedW . 'x' . $expectedH]);
            }
            if (isset($result['error'])) {
                error_log('[branding] platform_assets save failed: ' . json_encode($result));
            }

            // Also save locally for immediate preview
            @mkdir($BRAND_DIR, 0777, true);
            file_put_contents($BRAND_DIR . $slot . '.' . $ext, $fileContent);
            file_put_contents($THEME_FILE, json_encode($theme, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
        }
    }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EL3AB — Branding Admin</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: #0a0a1a; color: #f8fafc; font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; line-height: 1.6; }
        .container { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
        h1 { color: #E4AC38; font-size: 24px; margin-bottom: 8px; }
        h2 { color: #94a3b8; font-size: 18px; margin: 32px 0 12px; border-bottom: 1px solid #1a1a2e; padding-bottom: 8px; }
        h3 { color: #64748b; font-size: 14px; margin: 16px 0 8px; }
        .logout { float: left; background: none; border: 1px solid #333; color: #94a3b8; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
        .section { background: #1a1a2e; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        @media(max-width:600px) { .grid { grid-template-columns: 1fr; } }
        .field { margin-bottom: 12px; }
        .field label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; font-weight: 600; }
        .field .hint { font-size: 10px; color: #64748b; margin-top: 2px; }
        input[type="color"] { width: 48px; height: 36px; border: 1px solid #333; border-radius: 6px; background: #2a2a4a; cursor: pointer; }
        input[type="text"], input[type="number"], select { width: 100%; padding: 8px 12px; background: #2a2a4a; border: 1px solid #333; border-radius: 6px; color: #fff; font-size: 13px; }
        .color-row { display: flex; align-items: center; gap: 8px; }
        .color-row input[type="text"] { flex: 1; }
        .upload-box { border: 2px dashed #333; border-radius: 8px; padding: 16px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
        .upload-box:hover { border-color: #E4AC38; }
        .upload-box .size-hint { font-size: 11px; color: #E4AC38; font-weight: 600; margin-top: 4px; }
        .upload-box .current { margin-top: 8px; }
        .upload-box img { max-width: 80px; max-height: 80px; border-radius: 4px; }
        button[type="submit"] { background: linear-gradient(135deg, #E4AC38, #FFCC66); color: #1a1a1a; border: none; padding: 12px 32px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 16px; }
        .saved { background: #34D399; color: #000; padding: 8px 16px; border-radius: 6px; margin: 8px 0; font-size: 13px; font-weight: 600; }
    </style>
</head>
<body>
<div class="container">
    <form method="POST" style="display:inline;"><button class="logout" name="logout" value="1">خروج</button></form>
    <h1>🎨 EL3AB Branding Admin</h1>
    <p style="color:#64748b;font-size:13px;margin-bottom:24px;">إدارة الهوية البصرية — الألوان والأيقونات والأصول تظهر كافتراضي لكل اللاعبين</p>

    <?php if (isset($_POST['save_theme'])): ?><div class="saved">✓ تم حفظ التغييرات</div><?php endif; ?>

    <form method="POST">
    <input type="hidden" name="save_theme" value="1">

    <!-- COLORS -->
    <h2>🎨 الألوان الأساسية</h2>
    <div class="section">
        <div class="grid">
            <?php
            $colors = [
                ['key' => 'bg_deep', 'label' => 'خلفية عميقة', 'default' => '#050810', 'hint' => 'أغمق طبقة في التطبيق'],
                ['key' => 'bg_base', 'label' => 'خلفية أساسية', 'default' => '#0A1020', 'hint' => 'خلفية الشاشات'],
                ['key' => 'bg_card', 'label' => 'خلفية البطاقات', 'default' => '#121A2E', 'hint' => 'سطح البطاقات'],
                ['key' => 'bg_elevated', 'label' => 'خلفية مرتفعة', 'default' => '#1A2440', 'hint' => 'الحقول والعناصر المرتفعة'],
                ['key' => 'gold', 'label' => 'الذهبي (العلامة التجارية)', 'default' => '#E4AC38', 'hint' => 'اللون الرئيسي، الأزرار، الجوائز'],
                ['key' => 'gold_soft', 'label' => 'ذهبي فاتح', 'default' => '#FFCC66', 'hint' => 'تدرج الأزرار الذهبية'],
                ['key' => 'blue', 'label' => 'الأزرق', 'default' => '#2082F0', 'hint' => 'الروابط، المنافسة'],
                ['key' => 'cyan', 'label' => 'السماوي', 'default' => '#00FFFF', 'hint' => 'تأثيرات التوهج'],
                ['key' => 'purple', 'label' => 'البنفسجي', 'default' => '#6834BE', 'hint' => 'النادر/الأسطوري'],
                ['key' => 'success', 'label' => 'النجاح/الفوز', 'default' => '#34D399', 'hint' => 'لون الفوز والنجاح'],
                ['key' => 'error', 'label' => 'الخطأ/الخسارة', 'default' => '#EF4444', 'hint' => 'لون الخسارة والخطأ'],
                ['key' => 'text_primary', 'label' => 'نص أساسي', 'default' => '#F8FAFC', 'hint' => 'لون النص الرئيسي'],
                ['key' => 'text_secondary', 'label' => 'نص ثانوي', 'default' => '#94A3B8', 'hint' => 'نص أقل أهمية'],
            ];
            foreach ($colors as $c):
                $val = $theme[$c['key']] ?? $c['default'];
            ?>
            <div class="field">
                <label><?= $c['label'] ?></label>
                <div class="color-row">
                    <input type="color" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                    <input type="text" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>" pattern="#[0-9A-Fa-f]{6}">
                </div>
                <div class="hint"><?= $c['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- GAME COLORS -->
    <h2>🎮 ألوان الألعاب</h2>
    <div class="section">
        <div class="grid">
            <?php
            $gameColors = [
                ['key' => 'chess_primary', 'label' => 'شطرنج — أساسي', 'default' => '#2563EB'],
                ['key' => 'chess_secondary', 'label' => 'شطرنج — ثانوي', 'default' => '#F5B731'],
                ['key' => 'domino_primary', 'label' => 'دومينو — أساسي', 'default' => '#10B981'],
                ['key' => 'domino_secondary', 'label' => 'دومينو — ثانوي', 'default' => '#06B6D4'],
                ['key' => 'ludo_primary', 'label' => 'لودو — أساسي', 'default' => '#8B5CF6'],
                ['key' => 'ludo_secondary', 'label' => 'لودو — ثانوي', 'default' => '#EC4899'],
                ['key' => 'backgammon_primary', 'label' => 'طاولة — أساسي', 'default' => '#F59E0B'],
                ['key' => 'backgammon_secondary', 'label' => 'طاولة — ثانوي', 'default' => '#EF4444'],
            ];
            foreach ($gameColors as $c):
                $val = $theme[$c['key']] ?? $c['default'];
            ?>
            <div class="field">
                <label><?= $c['label'] ?></label>
                <div class="color-row">
                    <input type="color" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                    <input type="text" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- CHESS BOARD -->
    <h2>♟ ألوان رقعة الشطرنج</h2>
    <div class="section">
        <div class="grid">
            <?php
            $boardColors = [
                ['key' => 'board_light', 'label' => 'مربع فاتح', 'default' => '#F0D9B5', 'hint' => 'لون المربعات الفاتحة'],
                ['key' => 'board_dark', 'label' => 'مربع غامق', 'default' => '#B58863', 'hint' => 'لون المربعات الغامقة'],
                ['key' => 'board_highlight_light', 'label' => 'تمييز فاتح', 'default' => '#CDD16A', 'hint' => 'آخر نقلة — مربع فاتح'],
                ['key' => 'board_highlight_dark', 'label' => 'تمييز غامق', 'default' => '#AAA23A', 'hint' => 'آخر نقلة — مربع غامق'],
                ['key' => 'board_check', 'label' => 'تهديد الملك', 'default' => '#FF6B6B', 'hint' => 'عندما يكون الملك مكشوف'],
            ];
            foreach ($boardColors as $c):
                $val = $theme[$c['key']] ?? $c['default'];
            ?>
            <div class="field">
                <label><?= $c['label'] ?></label>
                <div class="color-row">
                    <input type="color" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                    <input type="text" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                </div>
                <div class="hint"><?= $c['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- CHESS PIECES -->
    <h2>♟ قطع الشطرنج</h2>
    <p style="color:#64748b;font-size:12px;margin-bottom:16px;">ارفع صور PNG أو SVG لكل قطعة — ستظهر على الرقعة مباشرة بدل الرسم الافتراضي</p>
    <div class="section">
        <h3 style="color:#f8fafc;margin-bottom:12px;">⬜ القطع البيضاء</h3>
        <div class="grid">
            <?php
            $whitePieces = [
                ['slot' => 'chess_piece_wK', 'label' => 'ملك أبيض ♔', 'w' => 128, 'h' => 128, 'hint' => 'White King'],
                ['slot' => 'chess_piece_wQ', 'label' => 'وزير أبيض ♕', 'w' => 128, 'h' => 128, 'hint' => 'White Queen'],
                ['slot' => 'chess_piece_wR', 'label' => 'قلعة بيضاء ♖', 'w' => 128, 'h' => 128, 'hint' => 'White Rook'],
                ['slot' => 'chess_piece_wB', 'label' => 'فيل أبيض ♗', 'w' => 128, 'h' => 128, 'hint' => 'White Bishop'],
                ['slot' => 'chess_piece_wN', 'label' => 'حصان أبيض ♘', 'w' => 128, 'h' => 128, 'hint' => 'White Knight'],
                ['slot' => 'chess_piece_wP', 'label' => 'بيدق أبيض ♙', 'w' => 128, 'h' => 128, 'hint' => 'White Pawn'],
            ];
            foreach ($whitePieces as $a):
                $current = $theme['assets'][$a['slot']] ?? null;
            ?>
            <div class="field">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="slot" value="<?= $a['slot'] ?>">
                    <input type="hidden" name="expected_w" value="<?= $a['w'] ?>">
                    <input type="hidden" name="expected_h" value="<?= $a['h'] ?>">
                    <label><?= $a['label'] ?></label>
                    <div class="upload-box" onclick="this.querySelector('input[type=file]').click()">
                        <input type="file" name="asset" accept=".svg,.png,.webp" style="display:none" onchange="this.form.submit()">
                        <?php if ($current): ?>
                        <div class="current"><img src="<?= $current ?>" style="width:64px;height:64px;object-fit:contain;background:#F0D9B5;border-radius:8px;padding:4px;"></div>
                        <div style="font-size:10px;color:#34D399;margin-top:4px;">✓ مرفوع</div>
                        <?php else: ?>
                        📤 اضغط للرفع
                        <?php endif; ?>
                        <div class="size-hint"><?= $a['w'] ?>×<?= $a['h'] ?>px — <?= $a['hint'] ?></div>
                    </div>
                </form>
            </div>
            <?php endforeach; ?>
        </div>

        <h3 style="color:#f8fafc;margin:20px 0 12px;">⬛ القطع السوداء</h3>
        <div class="grid">
            <?php
            $blackPieces = [
                ['slot' => 'chess_piece_bK', 'label' => 'ملك أسود ♚', 'w' => 128, 'h' => 128, 'hint' => 'Black King'],
                ['slot' => 'chess_piece_bQ', 'label' => 'وزير أسود ♛', 'w' => 128, 'h' => 128, 'hint' => 'Black Queen'],
                ['slot' => 'chess_piece_bR', 'label' => 'قلعة سوداء ♜', 'w' => 128, 'h' => 128, 'hint' => 'Black Rook'],
                ['slot' => 'chess_piece_bB', 'label' => 'فيل أسود ♝', 'w' => 128, 'h' => 128, 'hint' => 'Black Bishop'],
                ['slot' => 'chess_piece_bN', 'label' => 'حصان أسود ♞', 'w' => 128, 'h' => 128, 'hint' => 'Black Knight'],
                ['slot' => 'chess_piece_bP', 'label' => 'بيدق أسود ♟', 'w' => 128, 'h' => 128, 'hint' => 'Black Pawn'],
            ];
            foreach ($blackPieces as $a):
                $current = $theme['assets'][$a['slot']] ?? null;
            ?>
            <div class="field">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="slot" value="<?= $a['slot'] ?>">
                    <input type="hidden" name="expected_w" value="<?= $a['w'] ?>">
                    <input type="hidden" name="expected_h" value="<?= $a['h'] ?>">
                    <label><?= $a['label'] ?></label>
                    <div class="upload-box" onclick="this.querySelector('input[type=file]').click()">
                        <input type="file" name="asset" accept=".svg,.png,.webp" style="display:none" onchange="this.form.submit()">
                        <?php if ($current): ?>
                        <div class="current"><img src="<?= $current ?>" style="width:64px;height:64px;object-fit:contain;background:#B58863;border-radius:8px;padding:4px;"></div>
                        <div style="font-size:10px;color:#34D399;margin-top:4px;">✓ مرفوع</div>
                        <?php else: ?>
                        📤 اضغط للرفع
                        <?php endif; ?>
                        <div class="size-hint"><?= $a['w'] ?>×<?= $a['h'] ?>px — <?= $a['hint'] ?></div>
                    </div>
                </form>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- LUDO BOARD -->
    <h2>🎲 Ludo Board Colors</h2>
    <div class="section">
        <div class="grid">
            <?php
            $ludoColors = [
                ['key' => 'ludo_red', 'label' => 'Red player zone', 'default' => '#E53935', 'hint' => 'Red home zone + pieces'],
                ['key' => 'ludo_blue', 'label' => 'Blue player zone', 'default' => '#1E88E5', 'hint' => 'Blue home zone + pieces'],
                ['key' => 'ludo_green', 'label' => 'Green player zone', 'default' => '#43A047', 'hint' => 'Green home zone + pieces'],
                ['key' => 'ludo_yellow', 'label' => 'Yellow player zone', 'default' => '#FDD835', 'hint' => 'Yellow home zone + pieces'],
                ['key' => 'ludo_board_bg', 'label' => 'Board background', 'default' => '#FAFAFA', 'hint' => 'White board surface'],
                ['key' => 'ludo_path', 'label' => 'Path cells', 'default' => '#FFFFFF', 'hint' => 'Shared path square color'],
                ['key' => 'ludo_safe', 'label' => 'Safe square star', 'default' => '#F9A825', 'hint' => 'Star on safe positions'],
                ['key' => 'ludo_piece_border', 'label' => 'Piece border', 'default' => '#FFFFFF', 'hint' => 'White stroke around pieces'],
                ['key' => 'ludo_grid_line', 'label' => 'Grid lines', 'default' => '#DDDDDD', 'hint' => 'Grid lines on board'],
            ];
            foreach ($ludoColors as $c):
                $val = $theme[$c['key']] ?? $c['default'];
            ?>
            <div class="field">
                <label><?= $c['label'] ?></label>
                <div class="color-row">
                    <input type="color" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                    <input type="text" name="theme[<?= $c['key'] ?>]" value="<?= $val ?>">
                </div>
                <div class="hint"><?= $c['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- ANIMATIONS -->
    <h2>⚡ الحركة والرسوم المتحركة</h2>
    <div class="section">
        <div class="grid">
            <?php
            $anims = [
                ['key' => 'anim_speed', 'label' => 'سرعة الانتقال (ms)', 'default' => '250', 'hint' => 'المدة الافتراضية للانتقالات', 'type' => 'number'],
                ['key' => 'anim_fast', 'label' => 'سرعة سريعة (ms)', 'default' => '150', 'hint' => 'أزرار، تغذية راجعة', 'type' => 'number'],
                ['key' => 'anim_slow', 'label' => 'سرعة بطيئة (ms)', 'default' => '400', 'hint' => 'انتقالات المشاهد', 'type' => 'number'],
                ['key' => 'btn_scale', 'label' => 'تصغير الزر عند الضغط', 'default' => '0.92', 'hint' => '0.9 = ضغط قوي, 0.97 = ضغط خفيف', 'type' => 'text'],
                ['key' => 'border_radius', 'label' => 'انحناء الزوايا (px)', 'default' => '12', 'hint' => 'نصف قطر الأزرار', 'type' => 'number'],
                ['key' => 'card_radius', 'label' => 'انحناء البطاقات (px)', 'default' => '20', 'hint' => 'نصف قطر البطاقات والنوافذ', 'type' => 'number'],
            ];
            foreach ($anims as $a):
                $val = $theme[$a['key']] ?? $a['default'];
            ?>
            <div class="field">
                <label><?= $a['label'] ?></label>
                <input type="<?= $a['type'] ?>" name="theme[<?= $a['key'] ?>]" value="<?= $val ?>">
                <div class="hint"><?= $a['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- BUTTON SHAPES -->
    <h2>🔘 أشكال الأزرار</h2>
    <div class="section">
        <div class="grid">
            <?php
            $shapes = [
                ['key' => 'btn_radius', 'label' => 'انحناء الأزرار الأساسية (px)', 'default' => '9999', 'hint' => '9999 = حبة (pill), 12 = مستطيل ناعم, 0 = حاد', 'type' => 'number'],
                ['key' => 'btn_secondary_radius', 'label' => 'انحناء الأزرار الثانوية (px)', 'default' => '9999', 'hint' => 'أزرار الإلغاء والخيارات', 'type' => 'number'],
                ['key' => 'btn_height', 'label' => 'ارتفاع الزر (px)', 'default' => '44', 'hint' => 'الحد الأدنى لارتفاع الزر — 44 للمس', 'type' => 'number'],
                ['key' => 'btn_font_weight', 'label' => 'ثقل خط الزر', 'default' => '700', 'hint' => '400=عادي, 600=سميك, 700=عريض, 800=أعرض', 'type' => 'number'],
                ['key' => 'btn_shadow', 'label' => 'ظل الزر الأساسي', 'default' => '0 4px 16px rgba(228,172,56,0.3)', 'hint' => 'CSS box-shadow كامل', 'type' => 'text'],
                ['key' => 'card_border_width', 'label' => 'سمك حدود البطاقة (px)', 'default' => '1', 'hint' => '0 = بلا حدود, 1 = ناعم, 2 = واضح', 'type' => 'number'],
                ['key' => 'input_radius', 'label' => 'انحناء حقول الإدخال (px)', 'default' => '12', 'hint' => 'حقول النص وكلمة المرور', 'type' => 'number'],
            ];
            foreach ($shapes as $s):
                $val = $theme[$s['key']] ?? $s['default'];
            ?>
            <div class="field">
                <label><?= $s['label'] ?></label>
                <input type="<?= $s['type'] ?>" name="theme[<?= $s['key'] ?>]" value="<?= $val ?>">
                <div class="hint"><?= $s['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <button type="submit">💾 حفظ كل التغييرات</button>
    </form>

    <!-- JUICE SETTINGS -->
    <h2>🧃 إعدادات الـ Juice (التأثيرات)</h2>
    <div class="section">
        <div class="grid">
            <?php
            $juiceSettings = [
                ['key' => 'juice_particles', 'label' => 'تفعيل الجسيمات (Particles)', 'default' => '1', 'hint' => '1=مفعل, 0=معطل', 'type' => 'number'],
                ['key' => 'juice_shake_intensity', 'label' => 'شدة الاهتزاز', 'default' => '4', 'hint' => '0=بلا, 2=خفيف, 4=عادي, 8=قوي', 'type' => 'number'],
                ['key' => 'juice_haptic', 'label' => 'تفعيل الاهتزاز (Haptic)', 'default' => '1', 'hint' => '1=مفعل, 0=معطل', 'type' => 'number'],
                ['key' => 'juice_confetti_count', 'label' => 'عدد جسيمات الاحتفال', 'default' => '30', 'hint' => 'عند الفوز — 0 لإلغاء', 'type' => 'number'],
                ['key' => 'juice_coin_fly_count', 'label' => 'عدد العملات الطائرة', 'default' => '5', 'hint' => 'عملات تطير للـ HUD', 'type' => 'number'],
                ['key' => 'juice_bounce_scale', 'label' => 'حجم الارتداد (Bounce)', 'default' => '1.08', 'hint' => '1.0=بلا, 1.05=خفيف, 1.15=مبالغ', 'type' => 'text'],
                ['key' => 'juice_slam_scale', 'label' => 'حجم الاصطدام (Slam)', 'default' => '1.5', 'hint' => 'عند ظهور النتائج', 'type' => 'text'],
                ['key' => 'juice_float_amount', 'label' => 'مسافة الطفو (px)', 'default' => '5', 'hint' => 'حركة المربعات في الصفحة الرئيسية', 'type' => 'number'],
            ];
            foreach ($juiceSettings as $j):
                $val = $theme[$j['key']] ?? $j['default'];
            ?>
            <div class="field">
                <label><?= $j['label'] ?></label>
                <input type="<?= $j['type'] ?>" name="theme[<?= $j['key'] ?>]" value="<?= $val ?>">
                <div class="hint"><?= $j['hint'] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- EMOJI REPLACEMENTS -->
    <h2>😀 استبدال الرموز التعبيرية</h2>
    <p style="color:#64748b;font-size:12px;margin-bottom:16px;">استبدل أي رمز تعبيري بصورة SVG أو PNG — تظهر بنفس الحجم بلا تشويه</p>
    <div class="section">
        <div class="grid">
            <?php
            $emojiSlots = [
                ['key' => 'trophy', 'emoji' => '🏆', 'label' => 'كأس الفوز', 'size' => 72, 'hint' => 'شاشة نتيجة الفوز'],
                ['key' => 'skull', 'emoji' => '💀', 'label' => 'أيقونة الخسارة', 'size' => 72, 'hint' => 'شاشة نتيجة الخسارة'],
                ['key' => 'handshake', 'emoji' => '🤝', 'label' => 'أيقونة التعادل', 'size' => 72, 'hint' => 'شاشة نتيجة التعادل'],
                ['key' => 'gift', 'emoji' => '🎁', 'label' => 'صندوق المكافأة', 'size' => 48, 'hint' => 'شاشة المكافأة اليومية'],
                ['key' => 'robot', 'emoji' => '🤖', 'label' => 'أيقونة البوت', 'size' => 32, 'hint' => 'بجانب اسم الخصم الآلي'],
                ['key' => 'star', 'emoji' => '⭐', 'label' => 'نجمة التقييم', 'size' => 20, 'hint' => 'شاشة المراجعة'],
                ['key' => 'dice', 'emoji' => '🎲', 'label' => 'أيقونة النرد', 'size' => 48, 'hint' => 'مربع اللودو + زر الرمي'],
                ['key' => 'gamepad', 'emoji' => '🎮', 'label' => 'لاعب واحد', 'size' => 24, 'hint' => 'قائمة اللعبة — لاعب واحد'],
                ['key' => 'swords', 'emoji' => '⚔️', 'label' => 'متعدد اللاعبين', 'size' => 24, 'hint' => 'قائمة اللعبة — أونلاين'],
                ['key' => 'medal_gold', 'emoji' => '🥇', 'label' => 'ميدالية ذهبية', 'size' => 20, 'hint' => 'المركز الأول في الترتيب'],
                ['key' => 'medal_silver', 'emoji' => '🥈', 'label' => 'ميدالية فضية', 'size' => 20, 'hint' => 'المركز الثاني'],
                ['key' => 'medal_bronze', 'emoji' => '🥉', 'label' => 'ميدالية برونزية', 'size' => 20, 'hint' => 'المركز الثالث'],
                ['key' => 'coin', 'emoji' => '🪙', 'label' => 'عملة', 'size' => 16, 'hint' => 'بجانب أسعار المتجر'],
                ['key' => 'gem', 'emoji' => '💎', 'label' => 'جوهرة', 'size' => 16, 'hint' => 'بجانب أسعار الجواهر'],
                ['key' => 'person', 'emoji' => '👤', 'label' => 'صورة لاعب افتراضية', 'size' => 32, 'hint' => 'الأفاتار الافتراضي'],
                ['key' => 'people', 'emoji' => '👥', 'label' => 'أيقونة الأصدقاء', 'size' => 32, 'hint' => 'شاشة الأصدقاء الفارغة'],
                ['key' => 'bell', 'emoji' => '🔔', 'label' => 'جرس الإشعارات', 'size' => 18, 'hint' => 'أيقونة الإشعارات في الهيدر'],
                ['key' => 'speaker_on', 'emoji' => '🔊', 'label' => 'صوت مفعل', 'size' => 20, 'hint' => 'إعدادات الصوت'],
                ['key' => 'speaker_off', 'emoji' => '🔇', 'label' => 'صوت معطل', 'size' => 20, 'hint' => 'إعدادات الصوت'],
                ['key' => 'art', 'emoji' => '🎨', 'label' => 'أيقونة المتجر', 'size' => 24, 'hint' => 'بطاقات المتجر'],
                ['key' => 'puzzle', 'emoji' => '🧩', 'label' => 'أحجيات', 'size' => 16, 'hint' => 'زر الأحجيات في القائمة'],
                ['key' => 'chart', 'emoji' => '📊', 'label' => 'تحليل', 'size' => 16, 'hint' => 'زر التحليل'],
                ['key' => 'clipboard', 'emoji' => '📋', 'label' => 'مبارياتي', 'size' => 16, 'hint' => 'زر المباريات'],
                ['key' => 'share', 'emoji' => '📤', 'label' => 'مشاركة', 'size' => 16, 'hint' => 'زر المشاركة'],
                ['key' => 'checkmark', 'emoji' => '✅', 'label' => 'Success mark', 'size' => 20, 'hint' => 'Operation success feedback'],
                ['key' => 'cross', 'emoji' => '❌', 'label' => 'Error mark', 'size' => 20, 'hint' => 'Operation failure feedback'],
                ['key' => 'flag', 'emoji' => '⚐', 'label' => 'Resign flag', 'size' => 16, 'hint' => 'Chess resign button'],
                ['key' => 'book', 'emoji' => '📖', 'label' => 'Book/Theory', 'size' => 14, 'hint' => 'Move classification: book move'],
                // HUD icons
                ['key' => 'hud_coin', 'emoji' => '●', 'label' => 'HUD coin dot', 'size' => 16, 'hint' => 'Coin indicator in top HUD bar'],
                ['key' => 'hud_gem', 'emoji' => '◆', 'label' => 'HUD gem diamond', 'size' => 16, 'hint' => 'Gem indicator in top HUD bar'],
                ['key' => 'hud_level', 'emoji' => '⬡', 'label' => 'HUD level hex', 'size' => 16, 'hint' => 'Level indicator in top HUD bar'],
                // Game specific
                ['key' => 'lightning', 'emoji' => '⚡', 'label' => 'Puzzle rating bolt', 'size' => 16, 'hint' => 'Puzzle difficulty indicator'],
                ['key' => 'best_move_star', 'emoji' => '★', 'label' => 'Best move star', 'size' => 14, 'hint' => 'Move classification: best move'],
                ['key' => 'particle_star', 'emoji' => '✦', 'label' => 'Particle star', 'size' => 10, 'hint' => 'Star burst particle effect'],
                ['key' => 'backgammon_icon', 'emoji' => '◎', 'label' => 'Backgammon game icon', 'size' => 48, 'hint' => 'Home screen backgammon tile'],
                ['key' => 'domino_tile', 'emoji' => '⬚', 'label' => 'Domino game icon', 'size' => 48, 'hint' => 'Home screen domino tile'],
                ['key' => 'ludo_hex', 'emoji' => '⬡', 'label' => 'Ludo game icon', 'size' => 48, 'hint' => 'Home screen ludo tile (if not using dice)'],
                ['key' => 'chess_pawn', 'emoji' => '♟', 'label' => 'Chess pawn', 'size' => 48, 'hint' => 'Home screen chess tile'],
                // Social
                ['key' => 'challenge_swords', 'emoji' => '⚔️', 'label' => 'Challenge swords', 'size' => 20, 'hint' => 'Challenge friend to game'],
                ['key' => 'search_icon', 'emoji' => '🔍', 'label' => 'Search icon', 'size' => 16, 'hint' => 'Search button in social'],
                ['key' => 'online_dot', 'emoji' => '🟢', 'label' => 'Online indicator', 'size' => 12, 'hint' => 'Online status dot'],
                // Dice faces
                ['key' => 'dice_1', 'emoji' => '⚀', 'label' => 'Dice face 1', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 1'],
                ['key' => 'dice_2', 'emoji' => '⚁', 'label' => 'Dice face 2', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 2'],
                ['key' => 'dice_3', 'emoji' => '⚂', 'label' => 'Dice face 3', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 3'],
                ['key' => 'dice_4', 'emoji' => '⚃', 'label' => 'Dice face 4', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 4'],
                ['key' => 'dice_5', 'emoji' => '⚄', 'label' => 'Dice face 5', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 5'],
                ['key' => 'dice_6', 'emoji' => '⚅', 'label' => 'Dice face 6', 'size' => 56, 'hint' => 'Ludo dice — shown when rolled 6 (golden glow)'],
                // Puzzle themes
                ['key' => 'theme_fork', 'emoji' => '🔱', 'label' => 'Fork theme', 'size' => 16, 'hint' => 'Puzzle theme: fork'],
                ['key' => 'theme_pin', 'emoji' => '📌', 'label' => 'Pin theme', 'size' => 16, 'hint' => 'Puzzle theme: pin'],
                ['key' => 'theme_castle', 'emoji' => '🏰', 'label' => 'Back rank theme', 'size' => 16, 'hint' => 'Puzzle theme: back rank mate'],
                ['key' => 'theme_crown', 'emoji' => '👑', 'label' => 'Promotion theme', 'size' => 16, 'hint' => 'Puzzle theme: promotion'],
                ['key' => 'theme_sacrifice', 'emoji' => '💥', 'label' => 'Sacrifice theme', 'size' => 16, 'hint' => 'Puzzle theme: sacrifice'],
                // Tournaments
                ['key' => 'tournament_cup', 'emoji' => '🏆', 'label' => 'Tournament trophy', 'size' => 20, 'hint' => 'Tournament list & leaderboard button'],
                ['key' => 'money_bag', 'emoji' => '💰', 'label' => 'Entry fee', 'size' => 14, 'hint' => 'Tournament entry fee indicator'],
                // Misc
                ['key' => 'thinking_dots', 'emoji' => '●●●', 'label' => 'Bot thinking dots', 'size' => 14, 'hint' => 'Chess bot thinking indicator'],
                ['key' => 'building', 'emoji' => '🏛️', 'label' => 'Organization', 'size' => 32, 'hint' => 'Organization/club icon'],
            ];
            foreach ($emojiSlots as $e):
                $current = $theme['assets']['emoji_' . $e['key']] ?? null;
            ?>
            <div class="field">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="slot" value="emoji_<?= $e['key'] ?>">
                    <input type="hidden" name="expected_w" value="<?= $e['size'] ?>">
                    <input type="hidden" name="expected_h" value="<?= $e['size'] ?>">
                    <label><?= $e['emoji'] ?> <?= $e['label'] ?></label>
                    <div class="upload-box" onclick="this.querySelector('input[type=file]').click()">
                        <input type="file" name="asset" accept=".svg,.png,.jpg,.webp" style="display:none" onchange="this.form.submit()">
                        <?php if ($current): ?>
                        <div class="current"><img src="<?= $current ?>" style="width:<?= min($e['size'], 48) ?>px;height:<?= min($e['size'], 48) ?>px;object-fit:contain;"></div>
                        <?php else: ?>
                        <span style="font-size:24px;"><?= $e['emoji'] ?></span> → ارفع بديل
                        <?php endif; ?>
                        <div class="size-hint"><?= $e['size'] ?>×<?= $e['size'] ?>px — <?= $e['hint'] ?></div>
                    </div>
                </form>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- ASSET UPLOADS -->
    <h2>📦 الأصول البصرية</h2>
    <p style="color:#64748b;font-size:12px;margin-bottom:16px;">ارفع صور SVG أو PNG — ستظهر فوراً كافتراضي لكل اللاعبين</p>

    <div class="section">
        <div class="grid">
            <?php
            $assetSlots = [
                ['slot' => 'logo', 'label' => 'شعار المنصة', 'w' => 200, 'h' => 60, 'hint' => 'يظهر في الهيدر — يُفضل SVG شفاف'],
                ['slot' => 'logo_icon', 'label' => 'أيقونة الشعار (مربعة)', 'w' => 64, 'h' => 64, 'hint' => 'الأيقونة المختصرة للشعار'],
                ['slot' => 'splash_bg', 'label' => 'خلفية شاشة البداية', 'w' => 1080, 'h' => 1920, 'hint' => 'خلفية كاملة عند فتح التطبيق'],
                ['slot' => 'favicon', 'label' => 'Favicon', 'w' => 32, 'h' => 32, 'hint' => 'أيقونة تبويب المتصفح'],
                ['slot' => 'coin_icon', 'label' => 'أيقونة العملات (HUD)', 'w' => 24, 'h' => 24, 'hint' => 'تظهر بجانب رقم العملات في الأعلى'],
                ['slot' => 'gem_icon', 'label' => 'أيقونة الجواهر (HUD)', 'w' => 24, 'h' => 24, 'hint' => 'تظهر بجانب رقم الجواهر في الأعلى'],
                ['slot' => 'xp_icon', 'label' => 'أيقونة المستوى (HUD)', 'w' => 24, 'h' => 24, 'hint' => 'تظهر بجانب رقم المستوى'],
                ['slot' => 'chess_icon', 'label' => 'أيقونة الشطرنج', 'w' => 64, 'h' => 64, 'hint' => 'في مربع الشطرنج بالصفحة الرئيسية'],
                ['slot' => 'domino_icon', 'label' => 'أيقونة الدومينو', 'w' => 64, 'h' => 64, 'hint' => 'في مربع الدومينو بالصفحة الرئيسية'],
                ['slot' => 'ludo_icon', 'label' => 'أيقونة اللودو', 'w' => 64, 'h' => 64, 'hint' => 'في مربع اللودو بالصفحة الرئيسية'],
                ['slot' => 'backgammon_icon', 'label' => 'أيقونة الطاولة', 'w' => 64, 'h' => 64, 'hint' => 'في مربع الطاولة بالصفحة الرئيسية'],
                ['slot' => 'win_trophy', 'label' => 'كأس الفوز', 'w' => 128, 'h' => 128, 'hint' => 'شاشة نتيجة المباراة — فوز'],
                ['slot' => 'loss_icon', 'label' => 'أيقونة الخسارة', 'w' => 128, 'h' => 128, 'hint' => 'شاشة نتيجة المباراة — خسارة'],
                ['slot' => 'draw_icon', 'label' => 'أيقونة التعادل', 'w' => 128, 'h' => 128, 'hint' => 'شاشة نتيجة المباراة — تعادل'],
                ['slot' => 'daily_reward', 'label' => 'صندوق المكافأة اليومية', 'w' => 128, 'h' => 128, 'hint' => 'شاشة المكافأة اليومية'],
                ['slot' => 'rank_gold', 'label' => 'ميدالية ذهبية (#1)', 'w' => 32, 'h' => 32, 'hint' => 'بجانب المركز الأول في الترتيب'],
                ['slot' => 'rank_silver', 'label' => 'ميدالية فضية (#2)', 'w' => 32, 'h' => 32, 'hint' => 'بجانب المركز الثاني'],
                ['slot' => 'rank_bronze', 'label' => 'ميدالية برونزية (#3)', 'w' => 32, 'h' => 32, 'hint' => 'بجانب المركز الثالث'],
                ['slot' => 'default_avatar', 'label' => 'صورة افتراضية للاعب', 'w' => 128, 'h' => 128, 'hint' => 'تظهر إذا اللاعب ما رفع صورة'],
                ['slot' => 'notification_bell', 'label' => 'أيقونة الإشعارات', 'w' => 24, 'h' => 24, 'hint' => 'جرس الإشعارات في الهيدر'],
                ['slot' => 'tab_play', 'label' => 'أيقونة تبويب "العب"', 'w' => 24, 'h' => 24, 'hint' => 'شريط التنقل السفلي'],
                ['slot' => 'tab_rank', 'label' => 'أيقونة تبويب "الترتيب"', 'w' => 24, 'h' => 24, 'hint' => 'شريط التنقل السفلي'],
                ['slot' => 'tab_social', 'label' => 'أيقونة تبويب "الأصدقاء"', 'w' => 24, 'h' => 24, 'hint' => 'شريط التنقل السفلي'],
                ['slot' => 'tab_shop', 'label' => 'أيقونة تبويب "المتجر"', 'w' => 24, 'h' => 24, 'hint' => 'شريط التنقل السفلي'],
                ['slot' => 'tab_profile', 'label' => 'أيقونة تبويب "حسابي"', 'w' => 24, 'h' => 24, 'hint' => 'شريط التنقل السفلي'],
            ];
            foreach ($assetSlots as $a):
                $current = $theme['assets'][$a['slot']] ?? null;
                $displayW = min($a['w'], 80);
                $displayH = min($a['h'], 80);
            ?>
            <div class="field">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="slot" value="<?= $a['slot'] ?>">
                    <input type="hidden" name="expected_w" value="<?= $a['w'] ?>">
                    <input type="hidden" name="expected_h" value="<?= $a['h'] ?>">
                    <label><?= $a['label'] ?></label>
                    <div class="upload-box" onclick="this.querySelector('input[type=file]').click()">
                        <input type="file" name="asset" accept=".svg,.png,.jpg,.jpeg,.webp,.gif,.ico" style="display:none" onchange="this.form.submit()">
                        <?php if ($current): ?>
                        <div class="current"><img src="<?= $current ?>" style="width:<?= $displayW ?>px;height:<?= $displayH ?>px;object-fit:contain;image-rendering:auto;"></div>
                        <div style="font-size:10px;color:#64748b;margin-top:4px;">✓ مرفوع</div>
                        <?php else: ?>
                        📤 اضغط للرفع
                        <?php endif; ?>
                        <div class="size-hint"><?= $a['w'] ?>×<?= $a['h'] ?>px — <?= $a['hint'] ?></div>
                    </div>
                </form>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

</div>

<!-- Sticky save bar -->
<div id="save-bar" style="position:fixed;bottom:0;left:0;right:0;background:#0f0f1e;border-top:1px solid rgba(255,255,255,0.1);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;z-index:999;">
  <span id="save-status" style="font-size:12px;color:#64748b;">No unsaved changes</span>
  <button id="save-btn" onclick="saveAll()" style="background:linear-gradient(135deg,#E4AC38,#FFCC66);color:#1a1a1a;border:none;padding:10px 28px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;opacity:0.5;pointer-events:none;transition:opacity 0.2s;">💾 Save All</button>
</div>

<script>
let hasChanges = false;
const saveBtn = document.getElementById('save-btn');
const saveStatus = document.getElementById('save-status');

function markDirty() {
  if (!hasChanges) {
    hasChanges = true;
    saveBtn.style.opacity = '1';
    saveBtn.style.pointerEvents = 'auto';
    saveStatus.textContent = '⚠️ Unsaved changes';
    saveStatus.style.color = '#FBBF24';
  }
}

function saveAll() {
  saveBtn.textContent = 'Saving...';
  saveBtn.style.opacity = '0.6';

  // Collect all theme values from inputs
  const values = {};
  document.querySelectorAll('input[name^="theme["]').forEach(input => {
    const match = input.name.match(/theme\[(.+?)\]/);
    if (match && input.value) {
      values[match[1]] = input.value;
    }
  });

  // Save directly to Supabase via API (reliable, no session dependency)
  fetch('/api/branding.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ action: 'save_theme', values })
  })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        hasChanges = false;
        saveBtn.textContent = '✓ Saved!';
        saveBtn.style.opacity = '0.5';
        saveBtn.style.pointerEvents = 'none';
        saveStatus.textContent = '✓ All changes saved to database';
        saveStatus.style.color = '#34D399';
        setTimeout(() => {
          saveBtn.textContent = '💾 Save All';
          saveStatus.textContent = 'No unsaved changes';
          saveStatus.style.color = '#64748b';
        }, 2000);
      } else {
        saveBtn.textContent = '❌ Error: ' + (data.error || 'unknown');
        saveBtn.style.opacity = '1';
      }
    })
    .catch((err) => {
      saveBtn.textContent = '❌ Network error — retry';
      saveBtn.style.opacity = '1';
    });
}

// Mark dirty on any input change (NO auto-save)
document.querySelectorAll('input[name^="theme["]').forEach(input => {
  input.addEventListener('input', markDirty);
  input.addEventListener('change', markDirty);
});

// Sync color picker ↔ text input (no save, just sync visuals)
document.querySelectorAll('.color-row').forEach(row => {
  const colorInput = row.querySelector('input[type="color"]');
  const textInput = row.querySelector('input[type="text"]');
  if (colorInput && textInput) {
    colorInput.addEventListener('input', () => { textInput.value = colorInput.value; markDirty(); });
    textInput.addEventListener('input', () => { if (/^#[0-9A-Fa-f]{6}$/.test(textInput.value)) { colorInput.value = textInput.value; markDirty(); } });
  }
});

// Warn before leaving with unsaved changes
window.addEventListener('beforeunload', (e) => {
  if (hasChanges) { e.preventDefault(); e.returnValue = ''; }
});
</script>
</body>
</html>
