@php
    $customWallpaperPath = $appearance['custom_wallpaper'] ?? null;
    $customWallpaperUrl = $customWallpaperPath ? storage_url($customWallpaperPath) : null;
    $activeWallpaper = $appearance['wallpaper'] ?? 'default';
@endphp

<x-app-layout>
    <x-settings.shell title="Appearance" :back="route('gc.settings.index')">
        <form method="POST" action="{{ route('gc.settings.appearance.update') }}" enctype="multipart/form-data" class="settings-form settings-appearance">
            @csrf
            @method('PATCH')

            <p class="settings-section-label">Theme</p>
            <div class="settings-card settings-theme-picker">
                <label class="settings-theme-option">
                    <input type="radio" name="theme" value="light" @checked(($appearance['theme'] ?? '') === 'light')>
                    <span><i class="fa-solid fa-sun"></i> Light</span>
                </label>
                <label class="settings-theme-option">
                    <input type="radio" name="theme" value="dark" @checked(($appearance['theme'] ?? 'dark') === 'dark')>
                    <span><i class="fa-solid fa-moon"></i> Dark</span>
                </label>
                <label class="settings-theme-option">
                    <input type="radio" name="theme" value="system" @checked(($appearance['theme'] ?? '') === 'system')>
                    <span><i class="fa-solid fa-desktop"></i> System</span>
                </label>
            </div>

            <p class="settings-section-label">Chat wallpaper</p>
            <div class="settings-card settings-wallpaper-grid">
                @foreach($wallpapers as $wp)
                    <label class="settings-wallpaper-tile wallpaper-{{ $wp }}">
                        <input type="radio" name="wallpaper" value="{{ $wp }}" @checked($activeWallpaper === $wp)>
                    </label>
                @endforeach

                <label
                    class="settings-wallpaper-tile wallpaper-custom {{ $customWallpaperUrl ? 'has-image' : '' }}"
                    @if($customWallpaperUrl) style="background-image:url('{{ $customWallpaperUrl }}')" @endif
                >
                    <input type="radio" name="wallpaper" value="custom" @checked($activeWallpaper === 'custom')>
                    <span class="settings-wallpaper-custom-label">
                        <i class="fa-solid fa-image"></i>
                        <small>Custom</small>
                    </span>
                </label>
            </div>

            <div class="settings-card settings-custom-wallpaper-upload">
                <p class="settings-custom-wallpaper-title">Custom wallpaper</p>
                <p class="settings-custom-wallpaper-hint">Upload a photo from your device (JPG, PNG, WebP — max 5MB).</p>

                <div
                    id="custom-wallpaper-preview"
                    class="settings-custom-wallpaper-preview {{ $customWallpaperUrl ? '' : 'is-empty' }}"
                    @if($customWallpaperUrl) style="background-image:url('{{ $customWallpaperUrl }}')" @endif
                    @if(!$customWallpaperUrl) hidden @endif
                ></div>

                <label class="settings-file-btn" for="custom-wallpaper-input">
                    <i class="fa-solid fa-upload"></i>
                    <span>{{ $customWallpaperUrl ? 'Change image' : 'Choose image' }}</span>
                </label>
                <input type="file" name="custom_wallpaper" accept="image/jpeg,image/png,image/webp,image/gif" id="custom-wallpaper-input" class="settings-file-input">
            </div>

            <p class="settings-section-label">Font size</p>
            <div class="settings-card">
                <select name="font_size" class="settings-select full">
                    <option value="small" @selected(($appearance['font_size'] ?? '') === 'small')>Small</option>
                    <option value="medium" @selected(($appearance['font_size'] ?? 'medium') === 'medium')>Medium</option>
                    <option value="large" @selected(($appearance['font_size'] ?? '') === 'large')>Large</option>
                </select>
            </div>

            <button type="submit" class="settings-btn-primary full">Save</button>
        </form>
    </x-settings.shell>
</x-app-layout>