<?php
declare(strict_types=1);

require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/auth.php';
require_once __DIR__ . '/functions.php';

$slug = isset($settings_section_slug) ? (string)$settings_section_slug : 'general';
$section = stg_get_section($slug);
$pageTitle = (string)$section['title'];
$values = stg_page_values($slug);
$result = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($slug === 'home' && isset($_POST['theme_preset_action'])) {
        $presetAction = trim((string)$_POST['theme_preset_action']);
        if ($presetAction === 'save') {
            $result = stg_save_theme_preset((string)($_POST['theme_preset_name'] ?? ''), $_POST + $values);
        } elseif ($presetAction === 'apply') {
            $result = stg_apply_theme_preset((string)($_POST['theme_preset_key'] ?? ''));
        } elseif ($presetAction === 'delete') {
            $result = stg_delete_theme_preset((string)($_POST['theme_preset_key'] ?? ''));
        }
    } else {
        $result = stg_save_section($slug, $_POST);
    }
    $values = stg_page_values($slug);
    if (function_exists('admin_log_activity') && !empty($result['ok'])) {
        admin_log_activity('settings.save', 'حفظ إعدادات', 'تم حفظ قسم الإعدادات: ' . $slug, 'settings_section', 0, ['section' => $slug, 'saved' => (int)($result['saved'] ?? 0)]);
    }
}

require_once __DIR__ . '/../includes/header.php';
require_once __DIR__ . '/../includes/sidebar.php';
?>
<style>
.stg-wrap{padding:20px}
.stg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.stg-top h1{margin:0;font-size:28px;color:#0f172a}
.stg-top p{margin:8px 0 0;color:#64748b;max-width:820px}
.stg-actions a,.stg-actions button{display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:#fff;border:none;border-radius:12px;padding:11px 16px;text-decoration:none;cursor:pointer;font-weight:700}
.stg-actions a.secondary{background:#0f172a}
.stg-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:18px}
.stg-nav-item{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;border:1px solid #dbeafe;background:#fff;text-decoration:none;color:#0f172a;font-weight:700}
.stg-nav-item i{color:#2563eb}
.stg-nav-item.active{background:#2563eb;color:#fff;border-color:#2563eb}
.stg-nav-item.active i{color:#fff}
.stg-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 8px 28px rgba(15,23,42,.05)}
.stg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.stg-field{display:flex;flex-direction:column;gap:8px}
.stg-field label{font-weight:700;color:#0f172a;font-size:14px}
.stg-field input,.stg-field select,.stg-field textarea{width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:11px 12px;font:inherit;background:#fff}
.stg-field textarea{resize:vertical}
.stg-color-row{display:flex;align-items:center;gap:10px}
.stg-color-picker{width:60px !important;min-width:60px;height:46px;padding:4px !important;border-radius:12px;cursor:pointer}
.stg-color-text{direction:ltr;text-align:left}
.stg-field small{color:#64748b}
.stg-alert{border-radius:14px;padding:14px 16px;margin-bottom:14px}
.stg-alert.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.stg-alert.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.stg-alert ul{margin:8px 0 0;padding-right:20px}
.stg-footer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.stg-theme-presets{margin-bottom:18px}
.stg-theme-head h2{margin:0 0 6px;color:#0f172a;font-size:22px}
.stg-theme-head p{margin:0;color:#64748b}
.stg-theme-save-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;margin-bottom:14px}
.stg-theme-save-row input{flex:1 1 260px;border:1px solid #cbd5e1;border-radius:12px;padding:11px 12px;font:inherit;background:#fff}
.stg-theme-save-row button,.stg-preset-actions button{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:11px 14px;cursor:pointer;font-weight:700;background:#2563eb;color:#fff}
.stg-preset-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:8px}
.stg-preset-item{border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.stg-preset-meta{display:flex;flex-direction:column;gap:4px}
.stg-preset-meta strong{font-size:16px;color:#0f172a}
.stg-preset-meta span{font-size:12px;color:#64748b}
.stg-preset-meta em{display:inline-flex;align-self:flex-start;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;border-radius:999px;padding:4px 10px;font-style:normal;font-size:12px;font-weight:700}
.stg-preset-swatches{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stg-preset-swatches span{width:24px;height:24px;border-radius:999px;border:1px solid rgba(15,23,42,.08);display:inline-block}
.stg-preset-preview{border:1px solid #e2e8f0;border-radius:18px;padding:10px;background:#f8fafc}
.stg-mini-phone{width:100%;max-width:220px;margin:0 auto;border:1px solid rgba(15,23,42,.12);border-radius:24px;padding:8px;background:#0f172a;box-shadow:0 12px 28px rgba(15,23,42,.12)}
.stg-mini-screen{border-radius:18px;overflow:hidden;min-height:230px;display:flex;flex-direction:column}
.stg-mini-topbar{padding:6px 12px;font-size:10px;font-weight:700;text-align:center}
.stg-mini-appbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:11px;font-weight:700}
.stg-mini-appbar .dots{display:flex;gap:4px}
.stg-mini-appbar .dots span{width:6px;height:6px;border-radius:999px;display:inline-block;background:currentColor;opacity:.8}
.stg-mini-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:10px}
.stg-mini-hero{border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.stg-mini-hero strong{font-size:12px;line-height:1.4}
.stg-mini-hero small{font-size:10px;line-height:1.4}
.stg-mini-button{display:inline-flex;align-self:flex-start;padding:7px 12px;border-radius:999px;font-size:10px;font-weight:700}
.stg-mini-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stg-mini-card{border-radius:12px;padding:8px;min-height:68px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid transparent}
.stg-mini-card b{font-size:10px;line-height:1.3}
.stg-mini-card span{font-size:9px}
.stg-mini-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 10px;border-top:1px solid rgba(15,23,42,.06)}
.stg-mini-nav span{height:8px;border-radius:999px;display:block;opacity:.55}
.stg-mini-nav span.active{opacity:1;height:10px}
.stg-preset-actions{display:flex;gap:8px;flex-wrap:wrap}
.stg-preset-actions form{margin:0}
.stg-preset-actions button.apply{background:#2563eb}
.stg-preset-actions button.danger{background:#b91c1c}
.stg-empty-presets{padding:16px;border:1px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:#64748b;margin-top:14px}
@media (max-width:768px){.stg-wrap{padding:12px}.stg-top h1{font-size:22px}.stg-theme-save-row{flex-direction:column;align-items:stretch}.stg-preset-actions{flex-direction:column}}
</style>

<div class="stg-wrap">
    <?= stg_render_nav($slug); ?>

    <div class="stg-top">
        <div>
            <h1><?= stg_h($pageTitle); ?></h1>
            <p><?= stg_h((string)($section['description'] ?? '')); ?></p>
        </div>
        <div class="stg-actions">
            <a class="secondary" href="index.php"><i class="fa-solid fa-grid-2"></i>رجوع إلى فهرس الإعدادات</a>
        </div>
    </div>

    <?= stg_render_flash($result); ?>

    <?php if ($slug === 'home'): ?>
        <?= stg_render_theme_presets_panel($values); ?>
    <?php endif; ?>

    <div class="stg-card">
        <form method="post">
            <div class="stg-grid">
                <?php foreach ($section['fields'] as $field): ?>
                    <?= stg_field_input($field, $values); ?>
                <?php endforeach; ?>
            </div>

            <div class="stg-footer-actions">
                <button type="submit"><i class="fa-solid fa-floppy-disk"></i> حفظ الإعدادات</button>
            </div>
        </form>
    </div>
</div>

<script>
document.querySelectorAll('[data-color-sync]').forEach(function(picker){
  var target = document.getElementById(picker.getAttribute('data-color-sync'));
  if(!target) return;
  picker.addEventListener('input', function(){ target.value = picker.value; });
  target.addEventListener('input', function(){
    if(/^#[0-9a-fA-F]{6}$/.test(target.value)){ picker.value = target.value; }
  });
});
</script>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
