<?php include ADMIN_PATH . '/templates/header.php'; ?>

<?php
$settings = $settings ?? [];

/* ===== Frontend ===== */
$logo     = $settings['logo']   ?? [];
$colors   = $settings['colors'] ?? [];
$fonts    = $settings['fonts']  ?? [];

/* ===== Admin Theme ===== */
$adminTheme  = $settings['admin_theme'] ?? [];
$adminFonts  = $adminTheme['fonts']  ?? [];
$adminColors = $adminTheme['colors'] ?? [];
$adminMode   = $adminTheme['mode']   ?? 'light';
$defaults    = $defaults ?? [];
$fontMap     = $fontMap  ?? [];
?>

<div class="container-fluid py-3 theme-customizer-page">

    <!-- Page Title -->
    <div class="row mb-3">
        <div class="col-12">
            <h2 class="page-title mb-0">
                <i class="bi bi-palette me-2"></i>
                <?= __('theme.customizer.title', 'Theme Customizer') ?>
            </h2>
        </div>
    </div>

    <?php if (!empty($_GET['success'])): ?>
        <div class="alert alert-success">
            <?= __('ui.success', 'Settings saved successfully.') ?>
        </div>
    <?php endif; ?>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#frontend-theme" type="button">
                <i class="bi bi-globe me-1"></i>
                <?= __('theme.customizer.frontend', 'Website Theme') ?>
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#admin-theme" type="button">
                <i class="bi bi-layout-sidebar me-1"></i>
                <?= __('theme.customizer.admin', 'Admin Panel') ?>
            </button>
        </li>
    </ul>

    <form action="/admin/appearance/customize/save" method="POST">
        <?= \Core\System\Csrf::field(); ?>

        <div class="tab-content">

            <!-- ============================= -->
            <!-- Frontend Theme -->
            <!-- ============================= -->
            <div class="tab-pane fade show active" id="frontend-theme">

                <!-- Colors -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="bi bi-droplet-half me-1"></i>
                        <?= __('theme.customizer.colors', 'Main Colors') ?>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <?php
                            $colorKeys = ['primary','secondary','success','danger','warning','info','light','dark'];
                            foreach ($colorKeys as $key): ?>
                                <div class="col-6 col-md-3">
                                    <label class="form-label small">
                                        <?= __('colors.' . $key, ucfirst($key)) ?>
                                    </label>
                                    <input type="color"
                                           class="form-control form-control-color"
                                           name="colors[<?= $key ?>]"
                                           value="<?= htmlspecialchars($colors[$key] ?? '#000000', ENT_QUOTES) ?>">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <!-- Fonts -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="bi bi-fonts me-1"></i>
                        <?= __('theme.customizer.fonts', 'Fonts') ?>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <?= __('theme.customizer.font_body', 'Body Font') ?>
                                </label>
                                <select name="fonts[body]" class="form-select">
                                    <option value="ar_cairo"     <?= (($fonts['body'] ?? '') === 'ar_cairo') ? 'selected' : '' ?>><?= __('fonts.ar_cairo', 'Arabic – Cairo') ?></option>
                                    <option value="ar_tajawal"   <?= (($fonts['body'] ?? '') === 'ar_tajawal') ? 'selected' : '' ?>><?= __('fonts.ar_tajawal', 'Arabic – Tajawal') ?></option>
                                    <option value="ar_noto_kufi" <?= (($fonts['body'] ?? '') === 'ar_noto_kufi') ? 'selected' : '' ?>><?= __('fonts.ar_noto_kufi', 'Arabic – Noto Kufi') ?></option>
                                    <option value="en_poppins"   <?= (($fonts['body'] ?? '') === 'en_poppins') ? 'selected' : '' ?>><?= __('fonts.en_poppins', 'English – Poppins') ?></option>
                                    <option value="en_roboto"    <?= (($fonts['body'] ?? '') === 'en_roboto') ? 'selected' : '' ?>><?= __('fonts.en_roboto', 'English – Roboto') ?></option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <?= __('theme.customizer.font_heading', 'Headings Font') ?>
                                </label>
                                <select name="fonts[heading]" class="form-select">
                                    <option value="ar_cairo"     <?= (($fonts['heading'] ?? '') === 'ar_cairo') ? 'selected' : '' ?>><?= __('fonts.ar_cairo', 'Arabic – Cairo') ?></option>
                                    <option value="ar_tajawal"   <?= (($fonts['heading'] ?? '') === 'ar_tajawal') ? 'selected' : '' ?>><?= __('fonts.ar_tajawal', 'Arabic – Tajawal') ?></option>
                                    <option value="ar_noto_kufi" <?= (($fonts['heading'] ?? '') === 'ar_noto_kufi') ? 'selected' : '' ?>><?= __('fonts.ar_noto_kufi', 'Arabic – Noto Kufi') ?></option>
                                    <option value="en_poppins"   <?= (($fonts['heading'] ?? '') === 'en_poppins') ? 'selected' : '' ?>><?= __('fonts.en_poppins', 'English – Poppins') ?></option>
                                    <option value="en_roboto"    <?= (($fonts['heading'] ?? '') === 'en_roboto') ? 'selected' : '' ?>><?= __('fonts.en_roboto', 'English – Roboto') ?></option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Custom CSS -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="bi bi-code-slash me-1"></i>
                        <?= __('theme.customizer.custom_css', 'Custom CSS') ?>
                    </div>
                    <div class="card-body">
                        <textarea name="custom_css"
                                  class="form-control"
                                  rows="8"><?= htmlspecialchars($settings['custom_css'] ?? '', ENT_QUOTES) ?></textarea>
                    </div>
                </div>

            </div>

            <!-- ============================= -->
            <!-- Admin Theme -->
            <!-- ============================= -->
            <div class="tab-pane fade" id="admin-theme">

                <!-- Admin Fonts -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="bi bi-fonts me-1"></i>
                        <?= __('theme.customizer.admin_fonts', 'Admin Panel Fonts') ?>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <?= __('theme.customizer.font_body', 'Body Font') ?>
                                </label>
                                <select name="admin_fonts[body]" class="form-select">
                                    <?php foreach (['ar_cairo','ar_tajawal','ar_noto_kufi','en_poppins','en_roboto'] as $f): ?>
                                        <option value="<?= $f ?>" <?= (($adminFonts['body'] ?? '') === $f) ? 'selected' : '' ?>>
                                            <?= __('fonts.' . $f, $f) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    <?= __('theme.customizer.font_heading', 'Headings Font') ?>
                                </label>
                                <select name="admin_fonts[heading]" class="form-select">
                                    <?php foreach (['ar_cairo','ar_tajawal','ar_noto_kufi','en_poppins','en_roboto'] as $f): ?>
                                        <option value="<?= $f ?>" <?= (($adminFonts['heading'] ?? '') === $f) ? 'selected' : '' ?>>
                                            <?= __('fonts.' . $f, $f) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Admin Colors (EXTENDED) -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="bi bi-droplet-half me-1"></i>
                        <?= __('theme.customizer.admin_colors', 'Admin Panel Colors') ?>
                    </div>

                    <div class="card-body">

                        <!-- Bootstrap / UI Colors -->
                        <div class="mb-3 fw-semibold">
                            <?= __('theme.customizer.admin_colors_bootstrap', 'Bootstrap Colors (Buttons / Badges / Alerts)') ?>
                        </div>

                        <div class="row g-3 mb-4">
                            <?php
                            $adminBootstrapDefaults = [
                                'primary'   => '#0d6efd',
                                'secondary' => '#6c757d',
                                'success'   => '#198754',
                                'info'      => '#0dcaf0',
                                'warning'   => '#ffc107',
                                'danger'    => '#dc3545',
                                'light'     => '#f8f9fa',
                                'dark'      => '#212529',
                            ];
                            foreach ($adminBootstrapDefaults as $key => $default): ?>
                                <div class="col-6 col-md-3">
                                    <label class="form-label small">
                                        <?= __('colors.' . $key, ucfirst($key)) ?>
                                    </label>
                                    <input type="color"
                                           name="admin_colors[<?= $key ?>]"
                                           class="form-control form-control-color"
                                           value="<?= htmlspecialchars($adminColors[$key] ?? $default, ENT_QUOTES) ?>">
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <!-- Layout Colors -->
                        <div class="mb-3 fw-semibold">
                            <?= __('theme.customizer.admin_colors_layout', 'Layout Colors') ?>
                        </div>

                        <div class="row g-3">
                            <?php
                            $adminLayoutDefaults = [
                                'sidebar_bg'         => '#212529',
                                'sidebar_text'       => '#c2c7d0',
                                'sidebar_active_bg'  => '#0d6efd',
                                'sidebar_active_text'=> '#ffffff',

                                'header_bg'          => '#ffffff',
                                'header_text'        => '#212529',

                                'body_bg'            => '#f4f6f9',
                                'body_text'          => '#212529',

                                'card_bg'            => '#ffffff',
                                'card_header_bg'     => '#ffffff',

                                'link'               => '#0d6efd',
                                'border'             => '#dee2e6',
                            ];
                            foreach ($adminLayoutDefaults as $key => $default): ?>
                                <div class="col-6 col-md-3">
                                    <label class="form-label small">
                                        <?= __('theme.customizer.' . $key, ucfirst(str_replace('_',' ', $key))) ?>
                                    </label>
                                    <input type="color"
                                           name="admin_colors[<?= $key ?>]"
                                           class="form-control form-control-color"
                                           value="<?= htmlspecialchars($adminColors[$key] ?? $default, ENT_QUOTES) ?>">
                                </div>
                            <?php endforeach; ?>
                        </div>

                    </div>
                </div>

            </div>

        </div>

        <div class="mt-4 d-flex gap-2 flex-wrap">
            <button type="submit" class="btn btn-primary">
                <?= __('actions.save_changes', 'Save Changes') ?>
            </button>
            <button type="button" class="btn btn-outline-secondary" id="btnResetFrontend">
                <i class="bi bi-arrow-counterclockwise me-1"></i>
                <?= __('theme.customizer.reset_frontend', 'Restore Frontend Defaults') ?>
            </button>
            <button type="button" class="btn btn-outline-secondary" id="btnResetAdmin">
                <i class="bi bi-arrow-counterclockwise me-1"></i>
                <?= __('theme.customizer.reset_admin', 'Restore Admin Defaults') ?>
            </button>
        </div>

    </form>

</div>

<script>
(function () {
    var frontendDefaults = <?= json_encode($defaults['colors'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    var frontendFontDefaults = <?= json_encode($defaults['fonts'] ?? [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    var adminDefaults = <?= json_encode(($defaults['admin_theme']['colors'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    var adminFontDefaults = <?= json_encode(($defaults['admin_theme']['fonts'] ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;

    function applyDefaults(defaults, selector) {
        Object.keys(defaults || {}).forEach(function (key) {
            var input = document.querySelector(selector.replace('%key%', key));
            if (input) input.value = defaults[key];
        });
    }

    var btnFrontend = document.getElementById('btnResetFrontend');
    var btnAdmin    = document.getElementById('btnResetAdmin');

    if (btnFrontend) {
        btnFrontend.addEventListener('click', function () {
            if (!confirm('<?= __('theme.customizer.reset_confirm', 'Restore all frontend defaults?') ?>')) return;
            applyDefaults(frontendDefaults, 'input[name="colors[%key%]"]');
            applyDefaults(frontendFontDefaults, 'select[name="fonts[%key%]"]');
        });
    }

    if (btnAdmin) {
        btnAdmin.addEventListener('click', function () {
            if (!confirm('<?= __('theme.customizer.reset_confirm_admin', 'Restore all admin panel defaults?') ?>')) return;
            applyDefaults(adminDefaults, 'input[name="admin_colors[%key%]"]');
            applyDefaults(adminFontDefaults, 'select[name="admin_fonts[%key%]"]');
        });
    }
})();
</script>

<?php include ADMIN_PATH . '/templates/footer.php'; ?>
