@extends('layouts.mobile')

@section('title', 'Perfil')
@section('app-eyebrow', 'Tu cuenta y estadísticas')
@section('app-title', 'Mi perfil')

{{-- Espejo del /perfil web: avatar + infos, estadísticas y últimos lotes.
     Editar perfil y Configuración se acceden desde "Accesos" más abajo, no
     desde el topbar — se usan poco y no merecen espacio permanente ahí. --}}
@section('content')
<div class="fm-pad fm-stack" x-data="perfilScreen()" x-init="load()">

    {{-- Guest --}}
    <template x-if="!authed">
        <div class="fm-card fm-stack" style="gap:12px;text-align:center;align-items:center;">
            <span class="fm-glyph" style="width:56px;height:56px;border-radius:50%;"><i class="fa-solid fa-user" style="font-size:22px;"></i></span>
            <div class="fm-h2">Tu rincón fermentista</div>
            <div class="fm-muted" style="font-size:14px;line-height:1.5;">Crea una cuenta para guardar tus lotes, recetas y preferencias en todos tus dispositivos.</div>
            <button class="fm-btn fm-btn--gold fm-btn--block" onclick="fmRequireAuth('{{ route('profile') }}', 'register')">Crear cuenta o entrar</button>
        </div>
    </template>

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

            <template x-if="user">
                <div class="fm-stack">
                    {{-- Avatar (tocar para cambiar la foto) + infos --}}
                    <div class="fm-card fm-stack" style="align-items:center;text-align:center;gap:10px;">
                        <button type="button" @click="$refs.avatarInput.click()" aria-label="Cambiar foto de perfil"
                                style="position:relative;background:none;border:none;padding:0;cursor:pointer;">
                            <span class="fm-glyph" style="width:76px;height:76px;border-radius:50%;font-size:28px;overflow:hidden;padding:0;">
                                <template x-if="user.avatar_url"><img :src="user.avatar_url" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:50%;"></template>
                                <template x-if="!user.avatar_url"><span x-text="(user.name||'?')[0].toUpperCase()"></span></template>
                            </span>
                            <span style="position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green-700);color:#fff;border:2px solid var(--surface-card);">
                                <i class="fa-solid" :class="avatarBusy ? 'fa-spinner fa-spin' : 'fa-camera'" style="font-size:11px;"></i>
                            </span>
                        </button>
                        <input type="file" x-ref="avatarInput" accept="image/jpeg,image/png,image/gif" style="display:none;"
                               @change="uploadAvatar($event.target)">
                        <template x-if="avatarError"><div style="font:500 12px var(--font-sans);color:var(--rust-500);" x-text="avatarError"></div></template>
                        <div>
                            <div class="fm-title" style="font-size:19px;" x-text="user.name"></div>
                            <div class="fm-muted" style="font-size:13px;margin-top:3px;" x-text="user.email"></div>
                        </div>
                        <div style="display:flex;gap:6px;flex-wrap:wrap;justify-content:center;">
                            {{-- El plan de pago se llama Pro en todas partes (Lexico). --}}
                            <span class="fm-badge" :class="user.is_premium ? 'fm-badge--gold' : 'fm-badge--neutral'" x-text="'Plan ' + (user.is_premium ? 'Pro' : 'Gratis')"></span>
                            <template x-if="user.fermenter_profile"><span class="fm-badge fm-badge--green"><i class="fa-solid fa-seedling" style="font-size:10px;"></i> <span x-text="cap(user.fermenter_profile)"></span></span></template>
                            <template x-if="user.favorite_ferment"><span class="fm-badge fm-badge--neutral"><i class="fa-solid fa-heart" style="font-size:10px;color:var(--rust-500);"></i> <span x-text="user.favorite_ferment.name"></span></span></template>
                        </div>
                    </div>

                    {{-- Premium banner --}}
                    <template x-if="!user.is_premium">
                        <a href="{{ route('premium') }}" class="fm-card fm-card--tap fm-row" style="text-decoration:none;background:var(--gold-100);border:none;">
                            <span class="fm-glyph" style="width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.6);color:var(--gold-700);"><i class="fa-solid fa-crown"></i></span>
                            <div style="flex:1;"><div style="font:700 14px var(--font-sans);color:var(--green-900);">Pásate a Pro</div><div style="font:400 12.5px var(--font-sans);color:var(--gold-700);">Mediciones, recetas propias y más</div></div>
                            <i class="fa-solid fa-chevron-right" style="color:var(--gold-700);"></i>
                        </a>
                    </template>

                    {{-- Estadísticas: cada fila con destino lleva a lo que cuenta
                         (lotes → Mis lotes con su filtro; posts → tu página de
                         comunidad). Las que no tienen pantalla propia, sin enlace. --}}
                    <div>
                        <div class="fm-sectitle"><span>Estadísticas</span></div>
                        <div class="fm-card fm-card--flush">
                            <template x-for="(row, i) in statRows" :key="i">
                                <a :href="row[2] || null" class="fm-row" :class="row[2] && 'fm-card--tap'"
                                   style="padding:12px 16px;justify-content:space-between;text-decoration:none;color:inherit;"
                                   :style="i < statRows.length - 1 ? { borderBottom: '1px solid var(--border-subtle)' } : {}">
                                    <span style="font:500 14px var(--font-sans);color:var(--text-secondary);" x-text="row[0]"></span>
                                    <span style="display:inline-flex;align-items:center;gap:8px;">
                                        <span class="fm-data" style="font-weight:700;font-size:15px;" x-text="row[1]"></span>
                                        <i x-show="row[2]" class="fa-solid fa-chevron-right" style="color:var(--ink-400);font-size:12px;"></i>
                                    </span>
                                </a>
                            </template>
                        </div>
                    </div>

                    {{-- Accesos --}}
                    <div class="fm-stack" style="gap:8px;">
                        <a href="{{ route('profile.edit') }}" class="fm-listrow fm-card--tap" style="text-decoration:none;">
                            <i class="fa-solid fa-user-pen" style="color:var(--green-600);width:20px;text-align:center;"></i>
                            <span style="flex:1;font:500 14px var(--font-sans);color:var(--text-primary);">Editar perfil</span>
                            <i class="fa-solid fa-chevron-right" style="color:var(--ink-400);"></i>
                        </a>
                        <a href="{{ route('profile.settings') }}" class="fm-listrow fm-card--tap" style="text-decoration:none;">
                            <i class="fa-solid fa-gear" style="color:var(--green-600);width:20px;text-align:center;"></i>
                            <span style="flex:1;font:500 14px var(--font-sans);color:var(--text-primary);">Configuración</span>
                            <i class="fa-solid fa-chevron-right" style="color:var(--ink-400);"></i>
                        </a>
                        <a href="{{ route('onboarding') }}" class="fm-listrow fm-card--tap" style="text-decoration:none;">
                            <i class="fa-solid fa-wand-magic-sparkles" style="color:var(--green-600);width:20px;text-align:center;"></i>
                            <span style="flex:1;font:500 14px var(--font-sans);color:var(--text-primary);">Repetir el tour</span>
                            <i class="fa-solid fa-chevron-right" style="color:var(--ink-400);"></i>
                        </a>
                        {{-- Ancla a la pestaña "Mis lotes" de Fermentos (sustituye al bloque "Últimos lotes") --}}
                        <a href="{{ route('catalogue') }}#lotes" class="fm-listrow fm-card--tap" style="text-decoration:none;">
                            <i class="fa-solid fa-jar" style="color:var(--green-600);width:20px;text-align:center;"></i>
                            <span style="flex:1;font:500 14px var(--font-sans);color:var(--text-primary);">Mis lotes</span>
                            <i class="fa-solid fa-chevron-right" style="color:var(--ink-400);"></i>
                        </a>
                    </div>

                    <button class="fm-btn fm-btn--soft fm-btn--block" @click="logout()"><i class="fa-solid fa-right-from-bracket"></i> Cerrar sesión</button>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection

@push('scripts')
<script>
function perfilScreen() {
    return {
        authed: window.fmAuthed(), loading: true,
        user: null, stats: null,
        avatarBusy: false, avatarError: '',
        async load() {
            if (!this.authed) return;
            try {
                const r = await window.FermentyAPI.me();
                this.user = r.data;
                this.stats = r.stats || null;
            } catch (e) {}
            this.loading = false;
        },
        async uploadAvatar(input) {
            const file = input.files && input.files[0];
            if (!file || this.avatarBusy) return;
            this.avatarBusy = true; this.avatarError = '';
            try {
                const r = await window.FermentyAPI.uploadAvatar(file);
                this.user = r.data;
                // El topbar y otras pantallas leen fm_user de localStorage
                localStorage.setItem('fm_user', JSON.stringify(r.data));
            } catch (e) {
                this.avatarError = (e.data && e.data.message) || 'No se pudo subir la foto. Prueba con un JPG/PNG de menos de 2 MB.';
            }
            this.avatarBusy = false;
            input.value = '';
        },
        get statRows() {
            const s = this.stats || {};
            const lotes = @json(route('catalogue'));
            return [
                ['Total lotes', s.total_batches ?? '—', lotes + '#lotes'],
                ['Activos', s.active_batches ?? '—', lotes + '#lotes-activos'],
                ['Completados', s.completed_batches ?? '—', lotes + '#lotes-completados'],
                ['Recetas propias', s.recipes ?? '—', null],
                ['Posts comunidad', s.posts ?? '—', this.user ? '/comunidad/usuario/' + this.user.id : null],
            ];
        },
        cap(s) { return s ? s[0].toUpperCase() + s.slice(1) : ''; },
        async logout() { try { await window.FermentyAPI.logout(); } catch (e) {} sessionStorage.removeItem('fm_unread'); window.fmLogout(); },
    };
}
</script>
@endpush