@extends('layouts.app')

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

@section('content')

<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <div class="page-title">Mi perfil</div>
        <p class="page-subtitle mb-0">Tu cuenta y estadísticas</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('perfil.edit') }}?tab=perfil" class="btn btn-fermenty-outline btn-sm">
            <i class="fa-solid fa-user"></i>
            <span class="d-none d-md-inline ms-1">Editar perfil</span>
        </a>
        <a href="{{ route('perfil.edit') }}?tab=config" class="btn btn-fermenty-outline btn-sm">
            <i class="fa-solid fa-gear"></i>
            <span class="d-none d-md-inline ms-1">Configuración</span>
        </a>
    </div>
</div>

<div class="row g-4">

    <div class="col-12 col-lg-4">
        {{-- Info de usuario --}}
        <div class="fermenty-card mb-4 text-center">
            <div class="profile-avatar mx-auto mb-3" style="cursor:pointer;" onclick="document.getElementById('avatar-upload-form').style.display='block';">
                @if($user->avatar_url)
                    <img src="{{ $user->avatar_url }}" alt="Avatar" style="width:80px;height:80px;border-radius:50%;object-fit:cover;">
                @else
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                @endif
            </div>
            <form id="avatar-upload-form" method="POST" action="{{ route('perfil.avatar.upload') }}" enctype="multipart/form-data" class="mb-3" style="display:none;">
                @csrf
                <div class="mb-2">
                    <input type="file" name="avatar" accept="image/jpeg,image/jpg,image/png,image/gif" class="form-control form-control-sm" required>
                </div>
                <button type="submit" class="btn btn-fermenty-outline btn-sm">Subir foto</button>
                @error('avatar')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                @enderror
            </form>
            <script>
                // Hide form after upload or error
                if (window.location.hash === '#avatar-error') {
                  document.getElementById('avatar-upload-form').style.display = 'block';
                }
            </script>
            <div class="batch-card-name" style="font-size:1.1rem;">{{ $user->name }}</div>
            <div class="batch-card-type">{{ $user->email }}</div>
            <div class="mt-3 d-flex flex-wrap gap-2 justify-content-center">
                <span class="fermenty-badge badge-{{ $user->plan }}">
                    Plan {{ ucfirst($user->plan) }}
                </span>
                @if($user->fermenter_profile)
                    <span class="fermenty-badge badge-active">
                        <i class="fa-solid fa-seedling me-1"></i>{{ ucfirst($user->fermenter_profile) }}
                    </span>
                @endif
                @if($user->favoriteGuide)
                    <span class="fermenty-badge badge-paused">
                        <i class="fa-solid fa-heart me-1"></i>{{ $user->favoriteGuide->name }}
                    </span>
                @endif
            </div>
            @if($user->isFree())
                <div class="mt-3">
                    <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-orange btn-sm">
                        Pasar a Pro
                    </a>
                </div>
            @else
                @php
                    $subTypeAvatar = config('billing.subscription_type', 'default');
                    $subAvatar     = $user->subscribed($subTypeAvatar) ? $user->subscription($subTypeAvatar) : null;
                    // Auto-renewing subs don't "finish" — premium_until is just the next charge.
                    $willAutoRenew = $subAvatar && ! $subAvatar->onGracePeriod();
                    $endingSoon    = $user->premium_until
                        && ! $willAutoRenew
                        && $user->premium_until->lte(now()->addWeek());
                @endphp
                @if($endingSoon)
                    <div class="mt-3">
                        <div class="text-muted mb-2" style="font-size:.85rem;">
                            <i class="fa-solid fa-clock me-1"></i>
                            Tu plan Pro finaliza el
                            <strong>{{ $user->premium_until->translatedFormat('d \d\e F \d\e Y') }}</strong>
                            ({{ $user->premium_until->diffForHumans() }}).
                        </div>
                        <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-orange btn-sm">
                            Actualizar el plan
                        </a>
                    </div>
                @endif
            @endif
        </div>

        {{-- Stats --}}
        <div class="fermenty-card">
            <div class="card-title">Estadísticas</div>
            @foreach([
                'Total lotes'      => $stats['total_batches'],
                'Activos'          => $stats['active_batches'],
                'Completados'      => $stats['completed_batches'],
                'Recetas propias'  => $stats['recipes'],
                'Posts comunidad'  => $stats['posts'],
            ] as $label => $value)
                <div class="ferment-info-row">
                    <span class="ferment-info-label">{{ $label }}</span>
                    <span class="ferment-info-value">{{ $value }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <div class="col-12 col-lg-8">
        {{-- Últimos lotes --}}
        <div class="fermenty-card mb-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="card-title mb-0">Últimos lotes</div>
                <a href="{{ route('batches.index') }}" class="btn-back">Ver todos →</a>
            </div>

            @forelse($user->batches as $batch)
                <a href="{{ route('batches.show', $batch) }}" class="text-decoration-none">
                    <div class="batch-item">
                        <div class="batch-icon">
                            {{ strtoupper(substr($batch->guide->name, 0, 1)) }}
                        </div>
                        <div class="batch-info">
                            <div class="batch-name">{{ $batch->name }}</div>
                            <div class="batch-day">{{ $batch->guide->name }}</div>
                        </div>
                        <span class="fermenty-badge badge-{{ $batch->status }}">
                            {{ __('batches.status.' . $batch->status) }}
                        </span>
                    </div>
                </a>
            @empty
                <div class="fermenty-empty py-2">
                    <div class="empty-text">Aún no tienes lotes</div>
                </div>
            @endforelse
        </div>

        {{-- Tu suscripción (solo si está suscrito) — punto de entrada a gestionar/actualizar plan --}}
        @php($subTypePerfil = config('billing.subscription_type', 'default'))
        @php($perfilSub = $user->subscribed($subTypePerfil) ? $user->subscription($subTypePerfil) : null)
        @if($perfilSub)
            <div class="fermenty-card mb-4">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <span class="fermenty-badge badge-premium">Fermenty Pro</span>
                        <div class="text-muted mt-1" style="font-size:.85rem;">
                            @if($perfilSub->onGracePeriod())
                                Cancelada — activo hasta el {{ optional($user->premium_until)->translatedFormat('d \d\e F \d\e Y') }}
                            @else
                                Se renueva el {{ optional($user->premium_until)->translatedFormat('d \d\e F \d\e Y') }}
                            @endif
                        </div>
                    </div>
                    <a href="{{ route('suscripcion.show') }}" class="btn btn-fermenty-outline btn-sm">
                        <i class="fa-solid fa-sliders me-1"></i> Gestionar / Actualizar plan
                    </a>
                </div>
            </div>
        @endif

        {{-- Zona peligrosa --}}
        <div class="fermenty-card" style="border-color:#F5B8B8;">
            <div class="card-title" style="color:#7A1A1A;">Zona peligrosa</div>

            @php($subType = config('billing.subscription_type', 'default'))
            @php($sub = $user->subscribed($subType) ? $user->subscription($subType) : null)

            @if($sub && ! $sub->onGracePeriod())
                {{-- Cancelar suscripción Pro: encuesta "por qué" + confirmación por email --}}
                <div id="suscripcion" class="mb-4 pb-4" style="border-bottom:1px solid #F5D1D1;">
                    <div style="font-weight:700;color:#7A1A1A;margin-bottom:6px;">Cancelar suscripción Pro</div>
                    <p class="step-desc mb-2">
                        Lamentamos verte ir. Cuéntanos por qué y te enviaremos un email para confirmar.
                        Conservarás Pro hasta el final del periodo ya pagado.
                    </p>
                    <form method="POST" action="{{ route('suscripcion.cancel.request') }}">
                        @csrf
                        <div class="mb-2">
                            @foreach([
                                'price'            => 'Es demasiado caro',
                                'not_using'        => 'No lo uso lo suficiente',
                                'missing_features' => 'Le faltan funciones que necesito',
                                'temporary'        => 'Es una pausa temporal',
                                'other'            => 'Otro motivo',
                            ] as $val => $label)
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="reason"
                                           id="reason_{{ $val }}" value="{{ $val }}" {{ $loop->first ? 'required' : '' }}>
                                    <label class="form-check-label" for="reason_{{ $val }}" style="font-size:.9rem;">{{ $label }}</label>
                                </div>
                            @endforeach
                        </div>
                        <div class="mb-2">
                            <textarea name="comment" rows="2" maxlength="500" class="form-control"
                                      placeholder="¿Algo que podamos mejorar? (opcional)"></textarea>
                        </div>
                        <button type="submit" class="btn btn-sm"
                                style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:20px;">
                            Solicitar cancelación por email
                        </button>
                    </form>
                </div>
            @elseif($sub && $sub->onGracePeriod())
                <div id="suscripcion" class="mb-4 pb-4" style="border-bottom:1px solid #F5D1D1;">
                    <div style="font-weight:700;color:#7A1A1A;margin-bottom:6px;">Suscripción Pro</div>
                    <p class="step-desc mb-0">
                        Tu suscripción está cancelada. Conservas Pro hasta el
                        <strong>{{ optional($user->premium_until)->translatedFormat('d \d\e F \d\e Y') }}</strong>.
                    </p>
                </div>
            @endif

            <p class="step-desc mb-3">
                Para evitar eliminaciones accidentales, la baja de cuenta solo se puede confirmar por correo.
            </p>
            <form method="POST" action="{{ route('perfil.deletion.request') }}"
                  onsubmit="return confirm('Te enviaremos un email para confirmar la eliminación. ¿Continuar?')">
                @csrf
                <button type="submit" class="btn btn-sm"
                        style="background:#FDECEA;color:#7A1A1A;border:0.5px solid #F5B8B8;border-radius:20px;">
                    Solicitar eliminación por email
                </button>
            </form>
        </div>
    </div>

</div>

{{-- Tour de bienvenida --}}
<div class="fermenty-card mt-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
        <strong>Tour de bienvenida</strong>
        <div class="text-muted" style="font-size:.85rem;">¿Te lo saltaste o quieres repasarlo? Vuelve a verlo cuando quieras.</div>
    </div>
    <a href="{{ route('dashboard') }}?tour=1" class="btn btn-fermenty-outline btn-sm">
        <i class="fa-solid fa-wand-magic-sparkles me-1"></i> Repetir el tour
    </a>
</div>

@endsection