<?php
// test-theme.php - تست تم‌های رنگی (نسخه اصلاح شده)

require_once 'config/database.php';
require_once 'includes/db.php';
require_once 'includes/settings.php';

$settings = getSettings();
$selectedTheme = $_GET['theme'] ?? $settings['theme'] ?? 'blue';
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تست تم‌ها</title>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/themes.css">
    <style>
        body {
            font-family: 'Vazirmatn', sans-serif;
            background: #f8fafc;
            padding: 40px;
            direction: rtl;
            transition: all 0.3s ease;
        }
        /* ===== متغیرهای پیش‌فرض (اگر تمی انتخاب نشده باشد) ===== */
        body:not(.theme-blue):not(.theme-green):not(.theme-purple):not(.theme-orange):not(.theme-red):not(.theme-gold):not(.theme-corporate):not(.theme-dark):not(.theme-light) {
            --primary: #355C9C;
            --secondary: #2FA7A3;
            --accent: #F5C16C;
            --primary-10: rgba(53, 92, 156, 0.10);
            --primary-20: rgba(53, 92, 156, 0.20);
            --border: #E5E7EB;
            --text-secondary: #6B7280;
            --text-muted: #9CA3AF;
            --background: #F8F9FB;
            --surface: #FFFFFF;
            --card: #FFFFFF;
            --text: #1F2937;
        }
        .container { max-width: 900px; margin: 0 auto; }
        .card {
            background: white;
            border-radius: 18px;
            padding: 24px 28px;
            border: 1px solid var(--border, #e5e7eb);
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        }
        .btn {
            padding: 10px 24px;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Vazirmatn', sans-serif;
            display: inline-block;
            margin: 4px;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 2px 8px var(--primary-20);
        }
        .btn-secondary {
            background: var(--secondary);
            color: #fff;
        }
        .btn-accent {
            background: var(--accent);
            color: #1f2937;
        }
        .color-box {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 12px;
            margin: 4px;
        }
        .theme-dot {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 3px solid #e5e7eb;
            cursor: pointer;
            transition: all 0.2s;
            margin: 4px;
            text-decoration: none;
        }
        .theme-dot:hover { transform: scale(1.1); }
        .theme-dot.active { border-color: #1f2937; box-shadow: 0 0 0 2px white, 0 0 0 4px #1f2937; }
        .theme-name { font-size: 14px; font-weight: 600; color: #1f2937; }
        .badge { display: inline-block; padding: 4px 16px; border-radius: 20px; background: var(--primary); color: white; font-size: 13px; }
    </style>
</head>
<body class="<?= $selectedTheme ?>">

<div class="container">

    <div class="card" style="text-align:center;">
        <h1 style="font-size:24px;font-weight:800;color:#1f2937;">🎨 تست تم‌های رنگی</h1>
        <p style="color:#6b7280;">تم فعلی: <strong id="currentThemeName"><?= ucfirst($selectedTheme) ?></strong></p>

        <div style="margin:16px 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;">
            <?php
            $themes = ['blue', 'green', 'purple', 'orange', 'red', 'gold', 'corporate', 'dark', 'light'];
            $colors = [
                'blue' => '#355C9C',
                'green' => '#059669',
                'purple' => '#7C3AED',
                'orange' => '#EA580C',
                'red' => '#DC2626',
                'gold' => '#D4A747',
                'corporate' => '#1E293B',
                'dark' => '#0F172A',
                'light' => '#F8FAFC'
            ];
            foreach ($themes as $t):
                $active = ($t == $selectedTheme) ? 'active' : '';
                $border = ($t == 'light') ? 'border:#d1d5db;' : '';
            ?>
                <a href="?theme=<?= $t ?>" class="theme-dot <?= $active ?>" style="background:<?= $colors[$t] ?>;<?= $border ?>"></a>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- ===== دکمه‌ها ===== -->
    <div class="card">
        <h3 style="font-size:16px;font-weight:700;margin-bottom:12px;">دکمه‌ها</h3>
        <div style="display:flex;flex-wrap:wrap;gap:10px;">
            <button class="btn btn-primary">دکمه اصلی</button>
            <button class="btn btn-secondary">دکمه ثانویه</button>
            <button class="btn btn-accent">دکمه تاکیدی</button>
            <button class="btn" style="background:transparent;border:1.5px solid var(--border);color:var(--text-secondary);">دکمه outline</button>
        </div>
    </div>

    <!-- ===== رنگ‌ها ===== -->
    <div class="card">
        <h3 style="font-size:16px;font-weight:700;margin-bottom:12px;">رنگ‌های اصلی</h3>
        <div style="display:flex;flex-wrap:wrap;gap:8px;">
            <div><span class="color-box" style="background:var(--primary);"></span> Primary</div>
            <div><span class="color-box" style="background:var(--secondary);"></span> Secondary</div>
            <div><span class="color-box" style="background:var(--accent);"></span> Accent</div>
            <div><span class="color-box" style="background:var(--primary-10);"></span> Primary 10%</div>
            <div><span class="color-box" style="background:var(--primary-20);"></span> Primary 20%</div>
        </div>
    </div>

    <!-- ===== کارت‌ها ===== -->
    <div class="card">
        <h3 style="font-size:16px;font-weight:700;margin-bottom:12px;">نمونه کارت</h3>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;">
            <div style="background:var(--background);padding:16px;border-radius:12px;border:1px solid var(--border);">
                <div style="font-weight:700;">عنوان</div>
                <div style="color:var(--text-secondary);font-size:13px;">متن نمونه</div>
            </div>
            <div style="background:var(--surface);padding:16px;border-radius:12px;border:1px solid var(--border);">
                <div style="font-weight:700;">عنوان</div>
                <div style="color:var(--text-secondary);font-size:13px;">متن نمونه</div>
            </div>
            <div style="background:var(--card);padding:16px;border-radius:12px;border:1px solid var(--border);">
                <div style="font-weight:700;">عنوان</div>
                <div style="color:var(--text-secondary);font-size:13px;">متن نمونه</div>
            </div>
        </div>
    </div>

    <!-- ===== متن‌ها ===== -->
    <div class="card">
        <h3 style="font-size:16px;font-weight:700;margin-bottom:12px;">متن‌ها</h3>
        <p style="color:var(--text);font-size:16px;font-weight:700;">متن اصلی (Text)</p>
        <p style="color:var(--text-secondary);">متن ثانویه (Text Secondary)</p>
        <p style="color:var(--text-muted);">متن ملایم (Text Muted)</p>
    </div>

</div>

<script>
    // ===== به‌روزرسانی نام تم =====
    document.querySelectorAll('.theme-dot').forEach(dot => {
        dot.addEventListener('click', function(e) {
            document.querySelectorAll('.theme-dot').forEach(d => d.classList.remove('active'));
            this.classList.add('active');
            const name = this.title || 'تم انتخاب شده';
            document.getElementById('currentThemeName').textContent = name;
        });
    });

    // ===== نمایش تم فعلی =====
    const currentTheme = '<?= $selectedTheme ?>';
    const themeNames = {
        blue: 'آبی',
        green: 'سبز',
        purple: 'بنفش',
        orange: 'نارنجی',
        red: 'قرمز',
        gold: 'طلایی',
        corporate: 'شرکتی',
        dark: 'تاریک',
        light: 'روشن'
    };
    document.getElementById('currentThemeName').textContent = themeNames[currentTheme] || currentTheme;
</script>

</body>
</html>