@extends('layouts.mobile')

@section('title', 'Configuración')
@section('back', route('profile'))
@section('app-eyebrow', 'Perfil')
@section('app-title', 'Configuración')

{{-- Pantalla "detrás" del perfil: preferencias de la app (idioma, unidades,
     avisos, privacidad). Espejo del tab "config" de la web. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="perfilConfig()" x-init="load()">

    <template x-if="loading"><div class="fm-skel" style="height:200px;"></div></template>

    <template x-if="!loading">
        <div class="fm-stack">
            <div class="fm-card fm-stack" style="gap:16px;">
                <div class="fm-sectitle" style="margin:0;"><span>Preferencias</span><span x-show="saved" x-cloak class="fm-badge fm-badge--green">Guardado</span></div>

                <div>
                    <span class="fm-label">Idioma</span>
                    <div class="fm-seg">
                        <template x-for="opt in ['es','en','de']" :key="opt">
                            <button type="button" :class="form.locale === opt ? 'on' : ''" @click="form.locale = opt; save()" x-text="opt.toUpperCase()"></button>
                        </template>
                    </div>
                </div>

                <div>
                    <span class="fm-label">Unidades</span>
                    <div class="fm-seg">
                        <button type="button" :class="form.unit_system === 'metric' ? 'on' : ''" @click="form.unit_system='metric'; save()">°C · g</button>
                        <button type="button" :class="form.unit_system === 'imperial' ? 'on' : ''" @click="form.unit_system='imperial'; save()">°F · oz</button>
                    </div>
                </div>
            </div>

            <div class="fm-card fm-stack" style="gap:14px;">
                <div class="fm-sectitle" style="margin:0;"><span>Avisos y privacidad</span></div>
                <label class="fm-row" style="justify-content:space-between;">
                    <span style="font:500 14px var(--font-sans);">Notificaciones</span>
                    <input type="checkbox" x-model="form.notifications_allowed" @change="save()">
                </label>
                <label class="fm-row" style="justify-content:space-between;">
                    <span style="font:500 14px var(--font-sans);">Boletín</span>
                    <input type="checkbox" x-model="form.newsletter_opt_in" @change="save()">
                </label>
                <label class="fm-row" style="justify-content:space-between;">
                    <span style="font:500 14px var(--font-sans);">Perfil público</span>
                    <input type="checkbox" x-model="form.profile_public" @change="save()">
                </label>
            </div>

            <div class="fm-card fm-row">
                <span class="fm-glyph" style="width:40px;height:40px;border-radius:12px;background:var(--rust-100);color:var(--rust-500);"><i class="fa-solid fa-triangle-exclamation"></i></span>
                <div style="flex:1;">
                    <div style="font:600 13.5px var(--font-sans);color:var(--text-primary);">Cuenta y suscripción</div>
                    <div class="fm-muted" style="font-size:12.5px;margin-top:2px;">Cancelar la suscripción o eliminar la cuenta se gestiona desde la versión web (con confirmación por correo).</div>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function perfilConfig() {
    return {
        loading: true, saved: false, _t: null,
        form: { locale: 'es', unit_system: 'metric', notifications_allowed: true, newsletter_opt_in: true, profile_public: true },
        async load() {
            if (!window.fmRequireAuth(location.pathname)) { this.loading = false; return; }
            try {
                const u = (await window.FermentyAPI.me()).data;
                this.form = {
                    locale: u.locale || 'es',
                    unit_system: u.unit_system || 'metric',
                    notifications_allowed: !!u.notifications_allowed,
                    newsletter_opt_in: !!u.newsletter_opt_in,
                    profile_public: !!u.profile_public,
                };
            } catch (e) {}
            this.loading = false;
        },
        async save() {
            try {
                await window.FermentyAPI.updateMe(this.form);
                this.saved = true; clearTimeout(this._t); this._t = setTimeout(() => this.saved = false, 1500);
            } catch (e) {}
        },
    };
}
</script>
@endpush