@extends('layouts.panel-escort')
@section('title', 'Mi Panel')
@section('content')

{{-- ================================================
     Estado del perfil
     ================================================ --}}
<div class="card mb-3">
    <h2>Estado de tu perfil</h2>

    @if($status->isPublished)
        <p class="status-ok">&#10003; Tu perfil está publicado y visible.</p>
    @else
        <p class="status-warning">Tu perfil no está publicado. Para publicarlo necesitas:</p>
        <ul>
            @if(!$status->profileExists)
                <li>Rellenar el perfil</li>
            @endif
            @if(!$status->hasAtLeastOnePhoto)
                <li>Al menos una foto</li>
            @endif
            @if($status->profileExists && !$status->isVisible)
                <li>Mostrar el perfil (actualmente está oculto)</li>
            @endif
        </ul>
    @endif

    @if($profile)
        <div class="action-row">
            @if($profile->visible)
                <form method="POST" action="{{ route('escort.visibility.hide') }}">
                    @csrf
                    <button type="submit" class="btn btn-secondary">Ocultar perfil</button>
                </form>
            @else
                <form method="POST" action="{{ route('escort.visibility.show') }}">
                    @csrf
                    <button type="submit" class="btn btn-primary">Mostrar perfil</button>
                </form>
            @endif
            <form method="POST" action="{{ route('escort.boost') }}">
                @csrf
                <button type="submit" class="btn btn-secondary">&#11014; Destacar perfil</button>
            </form>
            @if($profile->published)
                <a href="{{ route('profile.show', ['municipio' => $profile->municipalitySlug, 'slug' => $profile->slug]) }}" class="btn btn-secondary" target="_blank">Ver perfil</a>
            @endif
        </div>
    @endif
</div>

{{-- ================================================
     Mi perfil — formulario
     ================================================ --}}
<div class="card mb-3">
    <h2>Mi perfil</h2>
    <form id="profile-form" method="POST" action="{{ route('escort.profile.save') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" id="request_phone_verification" name="request_phone_verification" value="">

        @if(!$profile)
        <div class="form-group" style="background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px dashed #ccc; margin-bottom: 20px;">
            <label for="photo" style="font-weight: bold; font-size: 1.1em;">Foto de perfil * (Obligatoria para empezar)</label>
            <input type="file" id="photo" name="photo" accept="image/*" required>
            <small class="text-muted" style="display:block; margin-top:5px;">Formatos: JPG, PNG. Tamaño máximo: 5 MB. Más adelante podrás subir más fotos o reordenarlas.</small>
            @error('photo')<span class="form-error">{{ $message }}</span>@enderror
        </div>
        @endif

        <div class="form-grid">
            <div class="form-group">
                <label for="name">Nombre artístico *</label>
                <input type="text"
                       id="name"
                       name="name"
                       value="{{ old('name', $profile->name ?? '') }}"
                       required
                       maxlength="100"
                       pattern="[A-Za-záéíóúÁÉÍÓÚñÑüÜàèìòùÀÈÌÒÙâêîôûÂÊÎÔÛ\s]+"
                       title="Solo letras y espacios">
                @error('name')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="age">Edad (opcional)</label>
                <input type="number"
                       id="age"
                       name="age"
                       value="{{ old('age', $profile->age ?? '') }}"
                       min="18"
                       max="99">
                @error('age')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="country">País de origen (opcional)</label>
                <select id="country" name="country">
                    <option value="">— Seleccionar —</option>
                    @foreach($countries as $c)
                        <option value="{{ $c }}"
                            {{ old('country', $profile->country ?? '') === $c ? 'selected' : '' }}>
                            {{ $c }}
                        </option>
                    @endforeach
                </select>
                @error('country')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="municipality_id">Municipio *</label>
                <select id="municipality_id" name="municipality_id" required>
                    <option value="">— Seleccionar —</option>
                    @foreach($municipalities as $mun)
                        <option value="{{ $mun->id }}"
                            {{ old('municipality_id', $profile->municipalityId ?? '') == $mun->id ? 'selected' : '' }}>
                            {{ $mun->name }}
                        </option>
                    @endforeach
                </select>
                @error('municipality_id')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label>Género *</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="gender" value="girl" required
                            {{ old('gender', $profile->gender ?? '') === 'girl' ? 'checked' : '' }}>
                        Chica
                    </label>
                    <label>
                        <input type="radio" name="gender" value="trans" required
                            {{ old('gender', $profile->gender ?? '') === 'trans' ? 'checked' : '' }}>
                        Trans
                    </label>
                    <label>
                        <input type="radio" name="gender" value="boy" required
                            {{ old('gender', $profile->gender ?? '') === 'boy' ? 'checked' : '' }}>
                        Chico
                    </label>
                </div>
                @error('gender')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="phone">Teléfono <span class="label-optional">(opcional)</span></label>
                <input type="tel"
                       id="phone"
                       name="phone"
                       value="{{ old('phone', $profile->phone ?? '') }}"
                       maxlength="20">
                @if($profile && $profile->phoneVerified)
                    <small class="verified">&#10003; Verificado</small>
                @elseif($profile && $profile->phone)
                    <small>
                        No verificado —
                        <a href="#"
                           onclick="document.getElementById('request_phone_verification').value='1'; document.getElementById('profile-form').submit(); return false;">
                            Solicitar verificación
                        </a>
                    </small>
                @endif
                @error('phone')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="telegram">Telegram <span class="label-optional">(opcional)</span></label>
                <input type="text"
                       id="telegram"
                       name="telegram"
                       value="{{ old('telegram', $profile->telegram ?? '') }}"
                       maxlength="32"
                       placeholder="@usuario">
                @error('telegram')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="form-group">
                <label for="onlyfans">OnlyFans <span class="label-optional">(opcional)</span></label>
                <input type="text"
                       id="onlyfans"
                       name="onlyfans"
                       value="{{ old('onlyfans', $profile->onlyfans ?? '') }}"
                       maxlength="50"
                       placeholder="nombre_de_usuario">
                @error('onlyfans')<span class="form-error">{{ $message }}</span>@enderror
                @if($profile && $profile->showContentCreatorLink())
                    <a href="{{ route('creadores-contenido') }}" class="form-hint-link">¿Necesitas ayuda con OnlyFans?</a>
                @endif
            </div>
            <div class="form-group">
                <label class="checkbox-label {{ ($profile && $profile->phoneVerified) ? '' : 'checkbox-disabled' }}">
                    <input type="checkbox" name="whatsapp" value="1"
                           {{ old('whatsapp', $profile->whatsapp ?? false) ? 'checked' : '' }}
                           {{ ($profile && $profile->phoneVerified) ? '' : 'disabled' }}>
                    Disponible por WhatsApp (usando el mismo número de teléfono)
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="description">Descripción (opcional)</label>
            <textarea id="description"
                      name="description"
                      rows="5"
                      maxlength="2000">{{ old('description', $profile->description ?? '') }}</textarea>
            @error('description')<span class="form-error">{{ $message }}</span>@enderror
            <small class="text-muted">Evita hacer referencia explícita a condiciones económicas y servicios de prostitución.</small>
        </div>
        <button type="submit" class="btn btn-primary">Guardar perfil</button>
    </form>
</div>

{{-- ================================================
     Fotos (solo si ya existe perfil)
     ================================================ --}}
@if($profile)
<div class="card mb-3" id="fotos">
    <h2>Fotos ({{ count($photos) }}/{{ config('app.max_photos') }})</h2>

    @if(count($photos) > 0)
        <div class="photo-grid">
            @foreach($photos as $i => $photo)
                <div class="photo-item">
                    <img src="/storage/photos/{{ $photo->filename }}" alt="Foto">
                    <div class="photo-actions">
                        <div class="reorder-group">
                            @if($i > 0)
                                <form method="POST" action="{{ route('escort.photos.reorder', $photo->id) }}">
                                    @csrf
                                    <input type="hidden" name="direction" value="up">
                                    <button type="submit" class="btn btn-secondary btn-sm">&#8593;</button>
                                </form>
                            @else
                                <span></span>
                            @endif
                            @if($i < count($photos) - 1)
                                <form method="POST" action="{{ route('escort.photos.reorder', $photo->id) }}">
                                    @csrf
                                    <input type="hidden" name="direction" value="down">
                                    <button type="submit" class="btn btn-secondary btn-sm">&#8595;</button>
                                </form>
                            @else
                                <span></span>
                            @endif
                        </div>
                        <form method="POST" action="{{ route('escort.photos.destroy', $photo->id) }}">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="btn btn-danger btn-sm"
                                    onclick="return confirm('¿Eliminar esta foto?')">
                                Eliminar
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p class="text-muted mb-2">Aún no has subido ninguna foto.</p>
    @endif

    @if(count($photos) < config('app.max_photos'))
        <form method="POST"
              action="{{ route('escort.photos.store') }}"
              enctype="multipart/form-data"
              class="mt-2">
            @csrf
            <div class="form-group">
                <label>Subir foto (JPG, PNG — máx. 5 MB)</label>
                <input type="file" name="photo" accept="image/*" required>
                @error('photo')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <button type="submit" class="btn btn-secondary">Subir foto</button>
        </form>
    @else
        <p class="text-muted mt-2">Has alcanzado el límite de {{ config('app.max_photos') }} fotos. Elimina alguna para subir otra.</p>
    @endif
    @if($profile && $profile->showContentCreatorLink())
        <a href="{{ route('creadores-contenido') }}" class="form-hint-link mt-2" style="display:inline-block">Quiero aumentar mis ingresos</a>
    @endif
</div>
@endif

{{-- ================================================
     Vídeos (solo si ya existe perfil)
     ================================================ --}}
@if($profile)
<div class="card mb-3" id="videos">
    <h2>Vídeos ({{ count($videos) }}/{{ config('app.max_videos') }})</h2>

    @if(count($videos) > 0)
        <div class="video-list">
            @foreach($videos as $i => $video)
                <div class="video-item">
                    <video src="/videos/{{ $video->filename }}"
                           controls
                           preload="metadata"
                           class="panel-video">
                    </video>
                    <div class="video-meta">
                        <span class="photo-status {{ $video->status }}">
                            {{ $video->isApproved() ? 'Aprobado' : 'Pendiente de aprobación' }}
                        </span>
                        <div class="video-actions-row">
                            <div class="reorder-group">
                                @if($i > 0)
                                    <form method="POST" action="{{ route('escort.videos.reorder', $video->id) }}">
                                        @csrf
                                        <input type="hidden" name="direction" value="up">
                                        <button type="submit" class="btn btn-secondary btn-sm">&#8593;</button>
                                    </form>
                                @else
                                    <span></span>
                                @endif
                                @if($i < count($videos) - 1)
                                    <form method="POST" action="{{ route('escort.videos.reorder', $video->id) }}">
                                        @csrf
                                        <input type="hidden" name="direction" value="down">
                                        <button type="submit" class="btn btn-secondary btn-sm">&#8595;</button>
                                    </form>
                                @else
                                    <span></span>
                                @endif
                            </div>
                            <form method="POST" action="{{ route('escort.videos.destroy', $video->id) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="btn btn-danger btn-sm"
                                        onclick="return confirm('¿Eliminar este vídeo?')">
                                    Eliminar
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p class="text-muted mb-2">Aún no has subido ningún vídeo.</p>
    @endif

    @if(count($videos) < config('app.max_videos'))
        <form method="POST"
              action="{{ route('escort.videos.store') }}"
              enctype="multipart/form-data"
              class="mt-2">
            @csrf
            <div class="form-group">
                <label>Subir vídeo (MP4, MOV, AVI, WEBM — máx. {{ config('app.video_max_mb') }} MB)</label>
                <input type="file"
                       name="video"
                       id="video-upload-input"
                       accept="video/mp4,video/quicktime,video/x-msvideo,video/webm,video/mpeg"
                       data-max-mb="{{ config('app.video_max_mb') }}"
                       required>
                <span class="form-error" id="video-size-error" style="display:none"></span>
                @error('video')<span class="form-error">{{ $message }}</span>@enderror
            </div>
            <div class="video-progress-wrap" id="video-progress-wrap" style="display:none">
                <div class="video-progress-bar" id="video-progress-bar"></div>
                <span class="video-progress-label" id="video-progress-label">0%</span>
            </div>
            <div class="form-actions-row">
                <button type="submit" class="btn btn-secondary" id="video-submit-btn">Subir vídeo</button>
            </div>
        </form>
    @else
        <p class="text-muted mt-2">Has alcanzado el límite de {{ config('app.max_videos') }} vídeos. Elimina alguno para subir otro.</p>
    @endif
    @if($profile && $profile->showContentCreatorLink())
        <a href="{{ route('creadores-contenido') }}" class="form-hint-link mt-2" style="display:inline-block">Quiero ganar más con mis vídeos</a>
    @endif
</div>
@endif

{{-- ================================================
     Mi cuenta
     ================================================ --}}
<div class="card mb-3" id="cuenta">
    <h2>Mi cuenta</h2>

    @if($user && !$user->emailVerified)
        <div class="alert alert-warning mb-2">
            Tu email no está verificado. Revisa tu bandeja de entrada.
            <form method="POST"
                  action="{{ route('escort.account.verify-email') }}"
                  style="display:inline">
                @csrf
                <button type="submit" class="btn btn-secondary btn-sm">Reenviar verificación</button>
            </form>
        </div>
    @endif

    {{-- Cambiar email --}}
    <h3>Cambiar email</h3>
    @if($user)
        <p class="text-muted mb-2" style="font-size:0.9rem">Email actual: <strong>{{ $user->email }}</strong></p>
    @endif
    <form method="POST" action="{{ route('escort.account.email') }}" class="mb-3">
        @csrf
        <div class="form-group">
            <label>Nuevo email</label>
            <input type="email"
                   name="new_email"
                   placeholder="Nuevo email"
                   required
                   value="{{ old('new_email') }}">
        </div>
        <div class="form-group">
            <label>Contraseña actual</label>
            <input type="password"
                   name="current_password"
                   required
                   autocomplete="current-password">
        </div>
        @error('email_error')<span class="form-error mb-2" style="display:block">{{ $message }}</span>@enderror
        <button type="submit" class="btn btn-secondary">Cambiar email</button>
    </form>

    {{-- Cambiar contraseña --}}
    <h3 id="contrasena">Cambiar contraseña</h3>
    <form method="POST" action="{{ route('escort.account.password') }}" class="mb-3">
        @csrf
        <div class="form-group">
            <label>Contraseña actual</label>
            <input type="password" name="current_password" required autocomplete="current-password">
            @error('password_error')<span class="form-error">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label>Nueva contraseña</label>
            <input type="password"
                   name="new_password"
                   required
                   minlength="6"
                   autocomplete="new-password">
            <small>Mínimo 6 caracteres.</small>
        </div>
        <div class="form-group">
            <label>Confirmar nueva contraseña</label>
            <input type="password"
                   name="new_password_confirmation"
                   required
                   minlength="6"
                   autocomplete="new-password">
        </div>
        <button type="submit" class="btn btn-secondary">Cambiar contraseña</button>
    </form>

    {{-- Eliminar cuenta --}}
    <h3 class="text-danger">Eliminar cuenta</h3>
    <p>Esta acción es <strong>irreversible</strong>. Tu perfil, fotos y todos tus datos serán
       eliminados permanentemente.</p>
    <form method="POST"
          action="{{ route('escort.account.destroy') }}"
          onsubmit="return confirm('¿Seguro que quieres eliminar tu cuenta? Esta acción no se puede deshacer.')">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger">Eliminar mi cuenta</button>
    </form>
</div>

@push('scripts')
<script>
(function () {
    const input       = document.getElementById('video-upload-input');
    if (!input) return;

    const form        = input.closest('form');
    const errorEl     = document.getElementById('video-size-error');
    const submitBtn   = document.getElementById('video-submit-btn');
    const progressWrap = document.getElementById('video-progress-wrap');
    const progressBar  = document.getElementById('video-progress-bar');
    const progressLabel = document.getElementById('video-progress-label');

    function setProgress(pct) {
        progressBar.style.width = pct + '%';
        progressLabel.textContent = pct + '%';
    }

    function showError(msg) {
        errorEl.textContent = msg;
        errorEl.style.display = 'block';
        progressWrap.style.display = 'none';
        submitBtn.disabled = false;
        submitBtn.textContent = 'Subir vídeo';
    }

    input.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        const maxMb    = parseInt(this.dataset.maxMb, 10);
        const maxBytes = maxMb * 1024 * 1024;

        if (file.size > maxBytes) {
            const fileMb = (file.size / 1024 / 1024).toFixed(1);
            showError(`El archivo pesa ${fileMb} MB. El máximo permitido es ${maxMb} MB.`);
            this.value = '';
        } else {
            errorEl.style.display = 'none';
            submitBtn.disabled = false;
        }
    });

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        if (!input.files[0]) return;

        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', function (e) {
            if (!e.lengthComputable) return;
            const pct = Math.round((e.loaded / e.total) * 100);
            if (pct >= 100) {
                progressBar.style.width = '99%';
                progressLabel.textContent = 'Procesando. Espere unos segundos…';
            } else {
                setProgress(pct);
            }
        });

        xhr.addEventListener('load', function () {
            try {
                if (xhr.status >= 200 && xhr.status < 300) {
                    setProgress(100);
                    sessionStorage.setItem('panel_scroll', 'videos');
                    window.location.href = window.location.pathname;
                } else if (xhr.status === 422) {
                    const data = JSON.parse(xhr.responseText);
                    const messages = Object.values(data.errors).flat();
                    showError(messages.join(' '));
                } else {
                    showError('Error inesperado al subir el vídeo. Inténtalo de nuevo.');
                }
            } catch (e) {
                sessionStorage.setItem('panel_scroll', 'videos');
                window.location.href = window.location.pathname;
            }
        });

        xhr.addEventListener('error', function () {
            showError('Error de red. Comprueba tu conexión e inténtalo de nuevo.');
        });

        xhr.open('POST', form.action);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Accept', 'application/json');

        progressWrap.style.display = 'flex';
        setProgress(0);
        submitBtn.disabled = true;
        submitBtn.textContent = 'Subiendo…';
        errorEl.style.display = 'none';

        xhr.send(new FormData(form));
    });
})();

(function () {
    const target = sessionStorage.getItem('panel_scroll');
    if (target) {
        sessionStorage.removeItem('panel_scroll');
        const el = document.getElementById(target);
        if (el) el.scrollIntoView({ behavior: 'smooth' });
    }
})();
</script>
@endpush

@endsection