<?php



 
HookSystem::addAction('admin.appearance_render.branding', function (array $vars): void {
    $settings = $vars['settings'] ?? $vars;
    $logo      = $settings['site_logo'] ?? '';
    $logoDark  = $settings['site_logo_dark'] ?? '';
    $favicon   = $settings['site_favicon'] ?? '';
    $hDesktop  = (int) ($settings['site_logo_height_desktop'] ?? 36);
    $hMobile   = (int) ($settings['site_logo_height_mobile'] ?? 28);
     
    $dmEnabled = ($settings['simply_dark_mode_enabled'] ?? '1') === '1';
    $dmDefault = $settings['simply_dark_mode_default'] ?? 'light';
    $darkLogoNeeded = $dmEnabled || $dmDefault === 'dark';
    $lightLogoNeeded = $dmEnabled || $dmDefault === 'light';
    ?>
    <form method="POST" action="/admin/appearance" enctype="multipart/form-data">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="branding">

        <div class="space-y-5">

            
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-3.5 border-b border-gray-200">
                    <div class="flex items-center gap-2.5">
                        <span class="text-gray-400"><i class="fa-solid fa-image text-sm"></i></span>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900">Site Logos</h3>
                            <p class="text-xs text-gray-500 mt-0.5">Upload separate logos for light and dark themes. Leave empty to show the site name as text.</p>
                        </div>
                    </div>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

                        
                        <div class="br-logo-card<?php if (!$lightLogoNeeded): ?> br-logo-card--disabled<?php endif; ?>"><?php if (!$lightLogoNeeded): ?>
                            <div class="br-disabled-banner"><i class="fa-solid fa-circle-info" style="font-size:10px"></i> Site uses dark theme only. <a href="/admin/appearance?sub=colors#tp-darkmode" class="br-activate-link">Dark Mode settings</a></div>
                        <?php endif; ?>
                            <div class="br-logo-card__preview br-logo-card__preview--light" id="brPreviewLight">
                                <?php if ($logo): ?>
                                    <img src="/uploads/branding/<?= htmlspecialchars($logo) ?>" alt="Light logo" id="brImgLight" style="height:<?= $hDesktop ?>px;">
                                    <label class="br-del-logo" title="Remove logo">
                                        <input type="checkbox" name="remove_logo" value="1" hidden>
                                        <i class="fa-solid fa-trash-can"></i>
                                    </label>
                                <?php else: ?>
                                    <span class="br-logo-card__empty"><i class="fa-light fa-image" style="font-size:24px;opacity:.3;"></i></span>
                                <?php endif; ?>
                            </div>
                            <div class="br-logo-card__body">
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="fa-regular fa-sun text-amber-500" style="font-size:13px;"></i>
                                    <span class="text-sm font-semibold text-gray-800">Light Theme</span>
                                </div>
                                <input type="file" name="site_logo" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
                                       class="br-file-input">
                            </div>
                        </div>

                        
                        <div class="br-logo-card<?php if (!$darkLogoNeeded): ?> br-logo-card--disabled<?php endif; ?>"><?php if (!$darkLogoNeeded): ?>
                            <div class="br-disabled-banner"><i class="fa-solid fa-circle-info" style="font-size:10px"></i> Dark mode is disabled. <a href="/admin/appearance?sub=colors#tp-darkmode" class="br-activate-link">Dark Mode settings</a></div>
                        <?php endif; ?>
                            <div class="br-logo-card__preview br-logo-card__preview--dark" id="brPreviewDark">
                                <?php if ($logoDark): ?>
                                    <img src="/uploads/branding/<?= htmlspecialchars($logoDark) ?>" alt="Dark logo" id="brImgDark" style="height:<?= $hDesktop ?>px;">
                                    <label class="br-del-logo" title="Remove logo">
                                        <input type="checkbox" name="remove_logo_dark" value="1" hidden>
                                        <i class="fa-solid fa-trash-can"></i>
                                    </label>
                                <?php elseif ($logo): ?>
                                    <img src="/uploads/branding/<?= htmlspecialchars($logo) ?>" alt="Light logo (fallback)" id="brImgDark" style="height:<?= $hDesktop ?>px;filter:brightness(0) invert(1);opacity:.5;">
                                <?php else: ?>
                                    <span class="br-logo-card__empty"><i class="fa-light fa-image" style="font-size:24px;opacity:.3;"></i></span>
                                <?php endif; ?>
                            </div>
                            <div class="br-logo-card__body">
                                <div class="flex items-center gap-2 mb-2">
                                    <i class="fa-regular fa-moon text-indigo-400" style="font-size:13px;"></i>
                                    <span class="text-sm font-semibold text-gray-800">Dark Theme</span>
                                </div>
                                <input type="file" name="site_logo_dark" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
                                       class="br-file-input">
                                <?php if (!$logoDark): ?>
                                    <p class="text-[11px] text-gray-400 mt-1"><i class="fa-solid fa-circle-info mr-0.5" style="font-size:9px;"></i> Falls back to light logo with inverted colors if empty.</p>
                                <?php endif; ?>
                            </div>
                        </div>

                    </div>
                    <p class="mt-4 text-xs text-gray-500"><i class="fa-solid fa-circle-info mr-1"></i> Recommended: PNG or SVG with transparent background. Max 5 MB.</p>
                </div>
            </div>

            
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-3.5 border-b border-gray-200">
                    <div class="flex items-center gap-2.5">
                        <span class="text-gray-400"><i class="fa-solid fa-up-right-and-down-left-from-center text-sm"></i></span>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-900">Logo Size</h3>
                            <p class="text-xs text-gray-500 mt-0.5">Adjust the logo height for desktop and mobile. The preview above updates live.</p>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-5">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        
                        <div>
                            <label class="flex items-center gap-1.5 text-sm font-medium text-gray-700 mb-2.5">
                                <i class="fa-solid fa-desktop text-gray-400" style="font-size:12px;"></i> Desktop
                            </label>
                            <div class="flex items-center gap-3">
                                <input type="range" id="brHDesktop" name="site_logo_height_desktop" min="16" max="80" step="2" value="<?= $hDesktop ?>"
                                       class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                <span class="br-size-badge" id="brHDesktopVal"><?= $hDesktop ?>px</span>
                            </div>
                            <p class="mt-1 text-[11px] text-gray-400">Default: 36px</p>
                        </div>
                        
                        <div>
                            <label class="flex items-center gap-1.5 text-sm font-medium text-gray-700 mb-2.5">
                                <i class="fa-solid fa-mobile-screen text-gray-400" style="font-size:12px;"></i> Mobile
                            </label>
                            <div class="flex items-center gap-3">
                                <input type="range" id="brHMobile" name="site_logo_height_mobile" min="12" max="56" step="2" value="<?= $hMobile ?>"
                                       class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                <span class="br-size-badge" id="brHMobileVal"><?= $hMobile ?>px</span>
                            </div>
                            <p class="mt-1 text-[11px] text-gray-400">Default: 28px</p>
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                <div class="px-6 py-3.5 border-b border-gray-200">
                    <div class="flex items-center gap-2.5">
                        <span class="text-gray-400"><i class="fa-solid fa-globe text-sm"></i></span>
                        <h3 class="text-sm font-semibold text-gray-900">Favicon</h3>
                    </div>
                </div>
                <div class="px-6 py-4">
                    <div class="flex items-center gap-5">
                        <div class="br-favicon-wrap">
                            <div class="br-favicon-preview">
                                <?php if ($favicon): ?>
                                    <img src="/uploads/branding/<?= htmlspecialchars($favicon) ?>" alt="Favicon">
                                <?php else: ?>
                                    <i class="fa-light fa-globe" style="font-size:18px;opacity:.3;"></i>
                                <?php endif; ?>
                            </div>
                            <?php if ($favicon): ?>
                                <label class="br-del-favicon" title="Remove favicon">
                                    <input type="checkbox" name="remove_favicon" value="1" hidden>
                                    <i class="fa-solid fa-trash-can"></i>
                                </label>
                            <?php endif; ?>
                        </div>
                        <div class="flex-1">
                            <input type="file" name="site_favicon" accept="image/jpeg,image/png,image/gif,image/webp,image/svg+xml"
                                   class="br-file-input">
                            <p class="text-[11px] text-gray-400 mt-1">Square image, at least 32x32px. Shown in the browser tab.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="mt-5">
            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">
                <i class="fa-solid fa-check" style="margin-right:6px;font-size:12px;"></i> Save changes
            </button>
        </div>
    </form>

    <style>
    .br-logo-card{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
    .br-logo-card__preview{display:flex;align-items:center;justify-content:center;min-height:60px;padding:16px 24px;transition:min-height .15s;position:relative}
    .br-logo-card__preview--light{background:#f8fafc;border-bottom:1px solid #e5e7eb}
    .br-logo-card__preview--dark{background:#0f172a;border-bottom:1px solid #1e293b}
    .br-logo-card__preview img{max-width:100%;object-fit:contain;transition:height .15s}
    .br-logo-card__empty{display:flex;align-items:center;justify-content:center;color:#94a3af}
    .br-logo-card__body{padding:14px 16px}
    .br-file-input{display:block;width:100%;font-size:12px;color:#6b7280}
    .br-file-input::file-selector-button{margin-right:8px;padding:5px 12px;border-radius:6px;border:1px solid #e5e7eb;font-size:12px;font-weight:500;background:#f9fafb;color:#374151;cursor:pointer;transition:all .12s}
    .br-file-input::file-selector-button:hover{background:#eef2ff;border-color:#c7d2fe;color:#4f46e5}
    .br-del-logo{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(239,68,68,.1);color:#ef4444;font-size:12px;cursor:pointer;transition:all .12s;border:1px solid transparent}
    .br-del-logo:hover{background:#ef4444;color:#fff;border-color:#ef4444}
    .br-del-logo.checked{background:#ef4444;color:#fff;border-color:#ef4444}
    .br-size-badge{min-width:46px;padding:4px 8px;font-size:12px;font-weight:600;color:#374151;background:#f3f4f6;border-radius:6px;text-align:center;font-variant-numeric:tabular-nums}
    .br-favicon-wrap{position:relative;flex-shrink:0}
    .br-favicon-preview{width:48px;height:48px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;display:flex;align-items:center;justify-content:center}
    .br-favicon-preview img{width:32px;height:32px;object-fit:contain}
    .br-del-favicon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(239,68,68,.85);color:#fff;font-size:13px;cursor:pointer;opacity:0;transition:opacity .15s}
    .br-del-favicon:hover{opacity:1}
    .br-del-favicon.checked{opacity:1}
    .br-logo-card--disabled{opacity:.5;pointer-events:none;position:relative}
    .br-logo-card--disabled .br-del-logo{display:none}
    .br-disabled-banner{pointer-events:auto;padding:6px 12px;font-size:11px;font-weight:500;color:#9ca3af;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .br-activate-link{color:#4f46e5;font-weight:600;text-decoration:none;margin-left:2px}
    .br-activate-link:hover{text-decoration:underline}
@media(max-width:639px){
    .br-logo-card__body{padding:12px}
    .br-file-input::file-selector-button{padding:4px 8px;font-size:11px}
}
@media(max-width:479px){
    .br-logo-card__preview{min-height:48px;padding:12px}
}
    </style>

    <script>
    (function() {
        var hd = document.getElementById('brHDesktop');
        var hm = document.getElementById('brHMobile');
        var hdVal = document.getElementById('brHDesktopVal');
        var hmVal = document.getElementById('brHMobileVal');
        var imgLight = document.getElementById('brImgLight');
        var imgDark = document.getElementById('brImgDark');

        function updatePreviews() {
            var h = hd.value + 'px';
            hdVal.textContent = h;
            if (imgLight) imgLight.style.height = h;
            if (imgDark) imgDark.style.height = h;
        }

        hd.addEventListener('input', updatePreviews);
        hm.addEventListener('input', function() {
            hmVal.textContent = this.value + 'px';
        });

        
        document.querySelectorAll('.br-del-logo, .br-del-favicon').forEach(function(el) {
            el.addEventListener('click', function() {
                var cb = this.querySelector('input[type=checkbox]');
                cb.checked = !cb.checked;
                this.classList.toggle('checked', cb.checked);
                
                var img = this.closest('.br-logo-card__preview, .br-favicon-wrap');
                if (img) {
                    var imgEl = img.querySelector('img');
                    if (imgEl) imgEl.style.opacity = cb.checked ? '0.25' : '';
                }
            });
        });
    })();
    </script>
    <?php
});

 
HookSystem::addAction('admin.appearance_save.branding', function (): void {
     
    if (!empty($_FILES['site_logo']['tmp_name']) && $_FILES['site_logo']['error'] === UPLOAD_ERR_OK) {
        $result = FileUpload::image($_FILES['site_logo'], 'branding');
        if ($result['success']) {
            $old = Setting::get('site_logo', '');
            if ($old !== '') { FileUpload::delete('branding/' . $old); }
            Setting::set('site_logo', $result['path']);
        }
    } elseif (!empty($_POST['remove_logo'])) {
        $old = Setting::get('site_logo', '');
        if ($old !== '') { FileUpload::delete('branding/' . $old); }
        Setting::set('site_logo', '');
    }
     
    if (!empty($_FILES['site_logo_dark']['tmp_name']) && $_FILES['site_logo_dark']['error'] === UPLOAD_ERR_OK) {
        $result = FileUpload::image($_FILES['site_logo_dark'], 'branding');
        if ($result['success']) {
            $old = Setting::get('site_logo_dark', '');
            if ($old !== '') { FileUpload::delete('branding/' . $old); }
            Setting::set('site_logo_dark', $result['path']);
        }
    } elseif (!empty($_POST['remove_logo_dark'])) {
        $old = Setting::get('site_logo_dark', '');
        if ($old !== '') { FileUpload::delete('branding/' . $old); }
        Setting::set('site_logo_dark', '');
    }
     
    if (!empty($_FILES['site_favicon']['tmp_name']) && $_FILES['site_favicon']['error'] === UPLOAD_ERR_OK) {
        $result = FileUpload::image($_FILES['site_favicon'], 'branding');
        if ($result['success']) {
            $old = Setting::get('site_favicon', '');
            if ($old !== '') { FileUpload::delete('branding/' . $old); }
            Setting::set('site_favicon', $result['path']);
        }
    } elseif (!empty($_POST['remove_favicon'])) {
        $old = Setting::get('site_favicon', '');
        if ($old !== '') { FileUpload::delete('branding/' . $old); }
        Setting::set('site_favicon', '');
    }
     
    $hd = max(16, min(80, (int) ($_POST['site_logo_height_desktop'] ?? 36)));
    Setting::set('site_logo_height_desktop', (string) $hd);
    $hm = max(12, min(56, (int) ($_POST['site_logo_height_mobile'] ?? 28)));
    Setting::set('site_logo_height_mobile', (string) $hm);
});
