@extends('dashboard.app')

@section('title', 'Preferences')
@section('page_title', 'Preferences')
@section('page_subtitle', 'Personalize your Dewemoji experience.')

@section('dashboard_content')
<div class="grid gap-6 lg:grid-cols-3">
    <div class="lg:col-span-2 rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Personal settings</div>
        <div class="mt-2 text-xl font-semibold text-white">Preferences</div>
        <p class="mt-2 text-sm text-gray-400">Saved locally for now. We will sync these to your account later.</p>

        <form id="preferences-form" class="mt-6 grid gap-4 md:grid-cols-2">
            <div>
                <label class="text-xs uppercase tracking-[0.2em] text-gray-400">Theme</label>
                <select id="pref-theme" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
                    <option value="system">System</option>
                    <option value="light">Light</option>
                    <option value="dark">Dark</option>
                </select>
                <div class="mt-1 text-xs text-gray-400">Matches the global theme toggle.</div>
            </div>
            <div>
                <label class="text-xs uppercase tracking-[0.2em] text-gray-400">Locale</label>
                <select id="pref-locale" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
                    <option value="en-US">English (US)</option>
                    <option value="id-ID">Bahasa Indonesia</option>
                </select>
                <div class="mt-1 text-xs text-gray-400">Controls language defaults.</div>
            </div>
            <div>
                <label class="text-xs uppercase tracking-[0.2em] text-gray-400">Tone lock</label>
                <select id="pref-tone" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
                    <option value="off">Off</option>
                    <option value="on">Always on</option>
                </select>
                <div class="mt-1 text-xs text-gray-400">Prefer a skin tone when available.</div>
            </div>
            <div>
                <label class="text-xs uppercase tracking-[0.2em] text-gray-400">Insert mode</label>
                <select id="pref-insert" class="mt-2 w-full rounded-xl border border-white/10 px-4 py-2 text-sm text-gray-200 theme-surface">
                    <option value="copy">Copy</option>
                    <option value="insert">Insert</option>
                </select>
                <div class="mt-1 text-xs text-gray-400">Default action for emoji pickers.</div>
            </div>
        </form>

        <div id="pref-status" class="mt-4 text-sm text-gray-400"></div>
    </div>

    <div class="rounded-3xl glass-card p-6 space-y-4">
        <div>
            <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Preferences</div>
            <div class="mt-2 text-xl font-semibold text-white">What’s next</div>
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
            Sync preferences across devices and extensions once account settings are wired.
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
            Add tone presets and quick language switching.
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const storageKey = 'dewemoji_prefs';
    const prefTheme = document.getElementById('pref-theme');
    const prefLocale = document.getElementById('pref-locale');
    const prefTone = document.getElementById('pref-tone');
    const prefInsert = document.getElementById('pref-insert');
    const status = document.getElementById('pref-status');

    const readPrefs = () => {
        try {
            return JSON.parse(localStorage.getItem(storageKey) || '{}');
        } catch {
            return {};
        }
    };

    const writePrefs = (prefs) => {
        localStorage.setItem(storageKey, JSON.stringify(prefs));
        if (status) {
            status.textContent = 'Saved just now.';
            setTimeout(() => { status.textContent = ''; }, 1600);
        }
    };

    const applyThemePref = (value) => {
        if (value === 'light') localStorage.setItem('dewemoji_theme', 'light');
        if (value === 'dark') localStorage.setItem('dewemoji_theme', 'dark');
        if (value === 'system') localStorage.removeItem('dewemoji_theme');
        window.location.reload();
    };

    const prefs = readPrefs();
    if (prefTheme) prefTheme.value = prefs.theme || 'system';
    if (prefLocale) prefLocale.value = prefs.locale || 'en-US';
    if (prefTone) prefTone.value = prefs.tone || 'off';
    if (prefInsert) prefInsert.value = prefs.insert || 'copy';

    [prefTheme, prefLocale, prefTone, prefInsert].forEach((el) => {
        if (!el) return;
        el.addEventListener('change', () => {
            const next = {
                theme: prefTheme?.value || 'system',
                locale: prefLocale?.value || 'en-US',
                tone: prefTone?.value || 'off',
                insert: prefInsert?.value || 'copy',
            };
            writePrefs(next);
            if (el === prefTheme) applyThemePref(next.theme);
        });
    });
})();
</script>
@endpush