@extends('layouts.app')

@section('title', 'Editar perfil — Fermenty')

@php $activeTab = request('tab', 'perfil'); @endphp

@section('content')

<div class="mb-3">
    <a href="{{ route('perfil.show') }}" class="btn-back">← Mi perfil</a>
</div>

<div class="row justify-content-center">
    <div class="col-12 col-lg-6">

        {{-- Tab nav --}}
        <div class="d-flex gap-2 mb-4 border-bottom pb-1">
            <button type="button" class="perfil-tab-btn {{ $activeTab === 'perfil' ? 'active' : '' }}"
                    onclick="switchTab('perfil', this)">
                <i class="fa-solid fa-user me-1"></i> Perfil
            </button>
            <button type="button" class="perfil-tab-btn {{ $activeTab === 'config' ? 'active' : '' }}"
                    onclick="switchTab('config', this)">
                <i class="fa-solid fa-gear me-1"></i> Configuración
            </button>
        </div>

        @if(session('success'))
            <div class="alert alert-success mb-3">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('perfil.update') }}" class="fermenty-form">
            @csrf
            @method('PUT')
            <input type="hidden" name="_tab" id="activeTabInput" value="{{ $activeTab }}">

            {{-- ═══════════ TAB PERFIL ═══════════ --}}
            <div id="tab-perfil" class="perfil-tab-pane {{ $activeTab !== 'perfil' ? 'd-none' : '' }}">

                <div class="fermenty-card mb-4">
                    <div class="mb-3">
                        <label class="form-label">Nombre</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $user->name) }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email', $user->email) }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Idioma</label>
                        <select name="locale" class="form-select">
                            <option value="es" {{ $user->locale === 'es' ? 'selected' : '' }}>Español</option>
                            <option value="en" {{ $user->locale === 'en' ? 'selected' : '' }}>English</option>
                            <option value="de" {{ $user->locale === 'de' ? 'selected' : '' }}>Deutsch</option>
                        </select>
                    </div>

                    <div class="mb-0">
                        <label class="form-label">Unidades de medida</label>
                        <select name="unit_system" class="form-select">
                            <option value="metric" {{ $user->unit_system === 'metric' ? 'selected' : '' }}>Métrico (L, kg, °C)</option>
                            <option value="imperial" {{ $user->unit_system === 'imperial' ? 'selected' : '' }}>Imperial (gal, lb, °F)</option>
                        </select>
                    </div>
                </div>

                <div class="fermenty-card mb-4">
                    <div class="card-title">Tu perfil fermentador</div>

                    <div class="mb-3">
                        <label class="form-label">¿Qué tipo de fermentador eres?</label>
                        @php $fp = old('fermenter_profile', $user->fermenter_profile); @endphp
                        <select name="fermenter_profile" class="form-select">
                            <option value="" {{ $fp === null ? 'selected' : '' }}>Sin especificar</option>
                            <option value="principiante" {{ $fp === 'principiante' ? 'selected' : '' }}>Principiante</option>
                            <option value="apasionado"   {{ $fp === 'apasionado'   ? 'selected' : '' }}>Apasionado/a</option>
                            <option value="pro"          {{ $fp === 'pro'          ? 'selected' : '' }}>Pro</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Lo que me apasiona</label>
                        <textarea name="bio" rows="2" maxlength="400" class="form-control"
                                  placeholder="Cuéntanos qué te apasiona de fermentar…">{{ old('bio', $user->bio) }}</textarea>
                        <div class="form-text" style="font-size:.8rem;">Una frase cálida sobre ti. Aparece en tu ficha de autor en el blog.</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Fermento favorito</label>
                        @php $fav = old('favorite_guide_id', $user->favorite_guide_id); @endphp
                        <select name="favorite_guide_id" class="form-select">
                            <option value="">Ninguno</option>
                            @foreach($ferments as $f)
                                <option value="{{ $f->id }}" {{ (string) $fav === (string) $f->id ? 'selected' : '' }}>{{ $f->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-check form-switch mb-0">
                        <input type="checkbox" class="form-check-input" role="switch" id="pub" name="profile_public"
                               value="1" {{ old('profile_public', $user->profile_public) ? 'checked' : '' }}>
                        <label class="form-check-label" for="pub">Perfil público</label>
                        <div class="form-text" style="font-size:.8rem;">Tu nombre y fermento favorito son visibles para otros usuarios.</div>
                    </div>
                </div>

                <div class="d-flex gap-3 mb-5">
                    <button type="submit" class="btn btn-fermenty-primary">Guardar cambios</button>
                    <a href="{{ route('perfil.show') }}" class="btn btn-fermenty-outline">Cancelar</a>
                </div>

            </div>{{-- /tab-perfil --}}

            {{-- ═══════════ TAB CONFIGURACIÓN ═══════════ --}}
            <div id="tab-config" class="perfil-tab-pane {{ $activeTab !== 'config' ? 'd-none' : '' }}">

                <div class="fermenty-card mb-4">
                    <div class="card-title">Comunicaciones</div>

                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" role="switch" id="news" name="newsletter_opt_in"
                               value="1" {{ old('newsletter_opt_in', $user->newsletter_opt_in) ? 'checked' : '' }}>
                        <label class="form-check-label" for="news">Recibir newsletter</label>
                        <div class="form-text" style="font-size:.8rem;">Novedades, artículos y consejos de fermentación por email.</div>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" role="switch" id="notif" name="notifications_allowed"
                               value="1" {{ old('notifications_allowed', $user->notifications_allowed) ? 'checked' : '' }}>
                        <label class="form-check-label" for="notif">Permitir notificaciones</label>
                        <div class="form-text" style="font-size:.8rem;">Alertas de lotes, comentarios y actividad dentro de la app.</div>
                    </div>

                    <div class="d-flex align-items-start gap-2 p-3 rounded mb-3"
                         style="background:var(--surface-alt,#F8F6F2);border:1px solid var(--border,#E8E0D6);">
                        <i class="fa-solid fa-mobile-screen-button mt-1" style="color:var(--brand-primary,#8B5E3C);font-size:.9rem;"></i>
                        <div style="font-size:.85rem;color:var(--text-muted,#7C6E5E);">
                            <strong>Notificaciones push</strong> en móvil se gestionan desde los ajustes de tu dispositivo o navegador.
                        </div>
                    </div>

                    <div class="form-check form-switch mb-0">
                        <input type="checkbox" class="form-check-input" role="switch" id="digest" name="daily_digest"
                               value="1" {{ old('daily_digest', $user->daily_digest) ? 'checked' : '' }}>
                        <label class="form-check-label" for="digest">Resumen diario de notificaciones</label>
                        <div class="form-text" style="font-size:.8rem;">
                            En lugar de recibir un email por cada evento, agrupamos todas las notificaciones del día en un único correo que llega cada tarde. Ideal si prefieres revisar de un vistazo sin que tu bandeja se llene.
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-3 mb-4">
                    <button type="submit" class="btn btn-fermenty-primary">Guardar cambios</button>
                    <a href="{{ route('perfil.show') }}" class="btn btn-fermenty-outline">Cancelar</a>
                </div>

                <div class="fermenty-card mb-4">
                    <div class="card-title">Cambiar contraseña</div>
                    <div class="mb-3">
                        <label class="form-label">Contraseña actual</label>
                        <input type="password" name="current_password"
                               class="form-control @error('current_password') is-invalid @enderror"
                               placeholder="Dejar en blanco si no quieres cambiarla">
                        @error('current_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nueva contraseña</label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Confirmar nueva contraseña</label>
                        <input type="password" name="password_confirmation" class="form-control">
                    </div>
                </div>

                <div class="d-flex gap-3 mb-5">
                    <button type="submit" class="btn btn-fermenty-primary">Guardar cambios</button>
                    <a href="{{ route('perfil.show') }}" class="btn btn-fermenty-outline">Cancelar</a>
                </div>

            </div>{{-- /tab-config --}}

        </form>
    </div>
</div>

<style>
.perfil-tab-btn {
    background: none;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: .9rem;
    color: var(--text-muted, #7C6E5E);
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.perfil-tab-btn.active {
    background: var(--brand-primary, #8B5E3C);
    color: #fff;
}
.perfil-tab-btn:not(.active):hover {
    background: var(--surface-alt, #F0E9E1);
    color: var(--text-body, #3A2F26);
}
</style>

<script>
function switchTab(tab, btn) {
    document.querySelectorAll('.perfil-tab-pane').forEach(p => p.classList.add('d-none'));
    document.querySelectorAll('.perfil-tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + tab).classList.remove('d-none');
    btn.classList.add('active');
    document.getElementById('activeTabInput').value = tab;
    history.replaceState(null, '', '?tab=' + tab);
}
</script>

@endsection