<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-palette-fill me-2 text-accent"></i>Personalizar</h1>
</div>

<?php if ($sucesso): ?>
<div class="pbi-alert pbi-alert-success mb-4">
    <i class="bi bi-check-circle-fill fs-5"></i>
    <div><strong>Tema aplicado!</strong> A interface foi atualizada.</div>
</div>
<?php endif; ?>

<div class="pbi-card">
    <div class="pbi-card-header">
        <i class="bi bi-brush me-2 text-accent"></i>Tema de Cores
    </div>
    <div class="pbi-card-body">
        <p class="text-muted small mb-4">Escolha o tema visual da interface. A preferência é salva para todos os usuários desta instalação.</p>

        <form method="POST" action="/set-tema">
            <input type="hidden" name="redirect" value="/personalizar?ok=1">

            <?php
            $temaSalvo = $config['tema'] ?? 'aurora';
            $gruposTemas = [
                '✨ Premium v1.4.8' => [
                    'aurora'         => ['label'=>'Aurora',          'sidebar'=>'#ffffff','bg'=>'#FAFAFB','accent'=>'#6366F1','topbar'=>'#ffffff'],
                    'mastersoft-pro' => ['label'=>'Mastersoft Pro',  'sidebar'=>'#ffffff','bg'=>'#FDFCFA','accent'=>'#EA580C','topbar'=>'#ffffff'],
                    'carbon'         => ['label'=>'Carbon',          'sidebar'=>'#0F0F11','bg'=>'#0A0A0B','accent'=>'#22D3EE','topbar'=>'#0F0F11'],
                    'onyx'           => ['label'=>'Onyx',            'sidebar'=>'#0A0A0A','bg'=>'#000000','accent'=>'#D4AF37','topbar'=>'#0A0A0A'],
                    'forest'         => ['label'=>'Forest',          'sidebar'=>'#ffffff','bg'=>'#FAFAF7','accent'=>'#15803D','topbar'=>'#ffffff'],
                    'slate'          => ['label'=>'Slate',           'sidebar'=>'#ffffff','bg'=>'#F8FAFC','accent'=>'#0F766E','topbar'=>'#ffffff'],
                ],
                'Claros' => [
                    'claro'   => ['label'=>'Claro',      'sidebar'=>'#ffffff','bg'=>'#f1f5f9','accent'=>'#4f8ef7','topbar'=>'#1e293b'],
                    'grafite' => ['label'=>'Grafite',    'sidebar'=>'#1f2937','bg'=>'#f8fafc','accent'=>'#6b7280','topbar'=>'#111827'],
                ],
                'Escuros' => [
                    'escuro'      => ['label'=>'Noturno',    'sidebar'=>'#0f172a','bg'=>'#0f172a','accent'=>'#60a5fa','topbar'=>'#020617'],
                    'meia_noite'  => ['label'=>'Meia-Noite', 'sidebar'=>'#09090b','bg'=>'#09090b','accent'=>'#22d3ee','topbar'=>'#000000'],
                    'escuro_roxo' => ['label'=>'Dark Roxo',  'sidebar'=>'#120b22','bg'=>'#0f0a1e','accent'=>'#a78bfa','topbar'=>'#07040f'],
                ],
                'Azuis' => [
                    'oceano'  => ['label'=>'Azul Royal', 'sidebar'=>'#1e40af','bg'=>'#f0f4ff','accent'=>'#3b82f6','topbar'=>'#1e3a8a'],
                    'marinho' => ['label'=>'Marinho',    'sidebar'=>'#1e3a5f','bg'=>'#f0f5ff','accent'=>'#3b82f6','topbar'=>'#0f2241'],
                    'ceu'     => ['label'=>'Céu',        'sidebar'=>'#0369a1','bg'=>'#f0f9ff','accent'=>'#0ea5e9','topbar'=>'#075985'],
                ],
                'Verdes' => [
                    'floresta' => ['label'=>'Esmeralda', 'sidebar'=>'#166534','bg'=>'#f0fdf4','accent'=>'#22c55e','topbar'=>'#14532d'],
                    'teal'     => ['label'=>'Teal',      'sidebar'=>'#0f766e','bg'=>'#f0fdfa','accent'=>'#14b8a6','topbar'=>'#134e4a'],
                ],
                'Roxos / Rosa' => [
                    'ametista' => ['label'=>'Ametista',  'sidebar'=>'#6d28d9','bg'=>'#faf5ff','accent'=>'#8b5cf6','topbar'=>'#4c1d95'],
                    'indigo'   => ['label'=>'Índigo',    'sidebar'=>'#3730a3','bg'=>'#eef2ff','accent'=>'#6366f1','topbar'=>'#1e1b4b'],
                    'rosa'     => ['label'=>'Rosa',      'sidebar'=>'#be185d','bg'=>'#fff1f2','accent'=>'#f43f5e','topbar'=>'#881337'],
                ],
                'Quentes' => [
                    'carvao'  => ['label'=>'Âmbar',   'sidebar'=>'#c2410c','bg'=>'#fff7ed','accent'=>'#f97316','topbar'=>'#7c2d12'],
                    'dourado' => ['label'=>'Dourado',  'sidebar'=>'#92400e','bg'=>'#fffbeb','accent'=>'#d97706','topbar'=>'#451a03'],
                    'carmim'  => ['label'=>'Carmim',   'sidebar'=>'#991b1b','bg'=>'#fff5f5','accent'=>'#ef4444','topbar'=>'#7f1d1d'],
                ],
            ];
            foreach ($gruposTemas as $nomeGrupo => $temas):
            ?>
            <div class="pbi-seg-grupo-label"><?= \App\Core\View::e($nomeGrupo) ?></div>
            <div class="pbi-temas-grid mb-4">
                <?php foreach ($temas as $id => $t): ?>
                <label class="pbi-tema-card <?= $temaSalvo === $id ? 'selecionado' : '' ?>">
                    <input type="radio" name="tema" value="<?= $id ?>"
                           <?= $temaSalvo === $id ? 'checked' : '' ?>
                           onchange="this.form.submit()">
                    <span class="pbi-tema-preview">
                        <span class="pbi-tema-preview-topbar" style="background:<?= $t['topbar'] ?>"></span>
                        <span class="pbi-tema-preview-body">
                            <span class="pbi-tema-preview-sidebar" style="background:<?= $t['sidebar'] ?>"></span>
                            <span class="pbi-tema-preview-content" style="background:<?= $t['bg'] ?>">
                                <span class="pbi-tema-preview-dot" style="background:<?= $t['accent'] ?>"></span>
                            </span>
                        </span>
                    </span>
                    <span class="pbi-tema-label"><?= \App\Core\View::e($t['label']) ?></span>
                    <i class="bi bi-check-circle-fill pbi-tema-check"></i>
                </label>
                <?php endforeach; ?>
            </div>
            <?php endforeach; ?>

            <button type="submit" class="pbi-btn pbi-btn-primary mt-2">
                <i class="bi bi-check-lg me-1"></i> Salvar Tema
            </button>
        </form>
    </div>
</div>
