@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', $mode === 'create' ? 'Crear Usuario' : 'Editar Usuario')

@section('vendor-style')
@vite(['resources/assets/vendor/libs/tagify/tagify.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/tagify/tagify.js'])
@endsection

@section('page-script')
@vite(['resources/assets/js/admin-user-edit.js'])
@endsection

@section('content')
@php
  $from = request()->query('from');
  $prev = url()->previous();
  $cameFromRiderContext = $from === 'riders' || \Illuminate\Support\Str::contains($prev, '/admin/riders');
  if ($user->exists) {
    $backUrl = $cameFromRiderContext
      ? route('admin.users.show', ['user' => $user, 'from' => 'riders'])
      : ($user->roles->contains('slug', 'rider') ? route('admin.users.show', $user) : route('admin.users.index'));
  } else {
    $backUrl = $cameFromRiderContext ? route('admin.riders') : route('admin.users.index');
  }
  $pageTitle = $mode === 'create' ? 'Crear usuario' : 'Editar usuario';
  $displayName = old('name', $user->name ?: 'Nuevo usuario');
  $displayEmail = old('email', $user->email) ?: 'Sin correo asignado';
  $selectedRoleIds = collect(old('roles', $selected['roles'] ?? []));
  $primaryRole = $user->roles->first()
    ?? ($selectedRoleIds->isNotEmpty() ? $roles->firstWhere('id', (int) $selectedRoleIds->first()) : null);
  $roleName = $primaryRole->name ?? 'Rol sin asignar';
  $roleSlug = strtolower($primaryRole->slug ?? '');
  $isAdminRole = $roleSlug === 'admin' || ($user->exists && method_exists($user, 'isAdmin') && $user->isAdmin());
  $isRiderRole = $roleSlug === 'rider' || str_contains($roleSlug, 'rider');
  $roleIcon = $isAdminRole
    ? 'ti tabler-shield-check'
    : ($isRiderRole ? 'ti tabler-bike' : 'ti tabler-user-circle');
  $roleTone = $isAdminRole ? 'bg-label-danger' : ($isRiderRole ? 'bg-label-success' : 'bg-label-info');
  $activeInput = old('active', $user->active ?? true);
  $isActive = !in_array($activeInput, [null, '', 0, '0', false], true);
  $hasRiderRole = $user->roles->contains(function ($role) {
      return \Illuminate\Support\Str::contains(strtolower($role->slug ?? ''), 'rider');
    }) || $selectedRoleIds->contains(function ($roleId) use ($roles) {
      $role = $roles->firstWhere('id', (int) $roleId);
      return $role && \Illuminate\Support\Str::contains(strtolower($role->slug ?? ''), 'rider');
    });
  $canDeleteUser = $mode === 'edit' && !$hasRiderRole;
@endphp

<style>
  .user-edit-hero {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.95), rgba(var(--bs-info-rgb), 0.88));
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .user-edit-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.22), transparent 58%);
    pointer-events: none;
  }
  .user-edit-hero .card-body { position: relative; z-index: 1; }
  .user-edit-hero .text-muted { color: rgba(255, 255, 255, 0.72) !important; }
  .user-edit-hero .badge { background-color: rgba(255, 255, 255, 0.16); color: #fff; }
  .user-edit-avatar .avatar-initial { box-shadow: 0 16px 38px rgba(15, 23, 42, 0.28); }
  .section-card { border: 0; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); }
  .section-card .card-header { background: transparent; border-bottom: 0; }
  .section-card .card-body { padding-top: 1.5rem; }
  .section-divider { border-top: 1px dashed var(--bs-border-color); margin: 1.5rem 0; }
  .sticky-actions { position: sticky; top: 1rem; }
  @media (max-width: 1199.98px) { .sticky-actions { position: static; } }
</style>

<form method="POST" action="{{ $mode === 'create' ? route('admin.users.store') : route('admin.users.update', $user) }}">
  @csrf
  @if($mode === 'edit')
    @method('PUT')
  @endif

  <div class="d-flex justify-content-between align-items-center mb-4 gap-2 flex-wrap">
    <a href="{{ $backUrl }}" class="btn btn-label-secondary">
      <i class="ti tabler-arrow-left me-2"></i>
      Volver
    </a>
    <div class="d-flex gap-2 ms-auto order-lg-last">
      @if($canDeleteUser)
        <button type="button" id="btn-delete-user" class="btn btn-outline-danger">
          <i class="ti tabler-trash me-1_5"></i>
          Eliminar
        </button>
      @endif
      <a href="{{ $backUrl }}" class="btn btn-outline-light text-primary border-primary">
        Cancelar
      </a>
      <button class="btn btn-primary" type="submit">
        <i class="ti tabler-device-floppy me-1_5"></i>
        Guardar cambios
      </button>
    </div>
  </div>

  <div class="card user-edit-hero border-0 shadow-sm mb-4">
    <div class="card-body py-4 px-4 px-md-5">
      <div class="d-flex flex-wrap align-items-center gap-4">
        <div class="avatar avatar-xxl flex-shrink-0 user-edit-avatar">
          <div class="avatar-initial rounded-circle {{ $roleTone }} border border-white border-3">
            <i class="{{ $roleIcon }} icon-lg"></i>
          </div>
        </div>
        <div class="flex-grow-1 min-w-0">
          <p class="mb-1 text-white-50 text-uppercase small fw-semibold">{{ $pageTitle }}</p>
          <div class="d-flex align-items-center gap-3 flex-wrap">
            <h2 class="mb-0 text-white">{{ $displayName }}</h2>
            <span class="badge {{ $roleTone }}">{{ $roleName }}</span>
            <span class="badge {{ $isActive ? 'bg-label-success' : 'bg-label-secondary' }} text-uppercase">{{ $isActive ? 'Activo' : 'Inactivo' }}</span>
          </div>
          <div class="d-flex flex-wrap gap-3 mt-3 text-white-50 small">
            <span><i class="ti tabler-at me-2"></i>{{ $displayEmail }}</span>
            <span><i class="ti tabler-calendar-stats me-2"></i>{{ optional($user->created_at)->format('d/m/Y H:i') ?? 'Usuario nuevo' }}</span>
          </div>
        </div>
        <div class="ms-auto d-flex flex-column gap-3 align-items-end text-sm-end">
          <div class="form-check form-switch form-switch-lg">
            <input type="checkbox" class="form-check-input" id="u_active" name="active" value="1" {{ $isActive ? 'checked' : '' }}>
            <label class="form-check-label text-white fw-semibold" for="u_active">Usuario activo</label>
          </div>
          <small class="text-white-50">Desactiva para suspender el acceso inmediato.</small>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-xl-8">
      <div class="card section-card mb-4">
        <div class="card-header pb-0">
          <h5 class="card-title mb-1">Identidad y acceso</h5>
          <small class="text-muted">Información esencial para autenticar al usuario.</small>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="user_name">Nombre completo</label>
              <input type="text" id="user_name" name="name" class="form-control" value="{{ old('name', $user->name) }}" required />
              @error('name')
                <small class="visually-hidden text-danger" data-field-error="name">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-6">
              <label class="form-label" for="user_email">Correo electrónico</label>
              <input type="email" id="user_email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required />
              @error('email')
                <small class="visually-hidden text-danger" data-field-error="email">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label" for="user_dni">DNI / NIE</label>
              <input type="text" id="user_dni" name="dni" class="form-control" value="{{ old('dni', $user->dni) }}" placeholder="Ej: 12345678Z o X1234567L" />
              <div class="form-text">Debe ser único. Obligatorio para riders.</div>
              @error('dni')
                <small class="visually-hidden text-danger" data-field-error="dni">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label" for="sesame_employee_id">Sesame Employee ID</label>
              <input type="text" id="sesame_employee_id" name="sesame_employee_id" class="form-control" value="{{ old('sesame_employee_id', $user->sesame_employee_id) }}" placeholder="Ej: EMP123456" />
              <div class="form-text">Debe coincidir con el ID del empleado en Sesame para sincronizar horarios.</div>
              @error('sesame_employee_id')
                <small class="visually-hidden text-danger" data-field-error="sesame_employee_id">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label" for="user_password">Contraseña {{ $mode === 'edit' ? '(dejar en blanco para mantener)' : '' }}</label>
              <input type="password" id="user_password" name="password" class="form-control" {{ $mode === 'create' ? 'required' : '' }} />
              @error('password')
                <small class="visually-hidden text-danger" data-field-error="password">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cost_per_order">Costo por pedido (€)</label>
              <input type="number" step="0.01" min="0" id="cost_per_order" name="cost_per_order" class="form-control" value="{{ old('cost_per_order', $user->cost_per_order) }}" placeholder="Ej. 5.50" />
              <div class="form-text">Se usa en reportes de rentabilidad.</div>
              @error('cost_per_order')
                <small class="visually-hidden text-danger" data-field-error="cost_per_order">{{ $message }}</small>
              @enderror
            </div>
            <div class="col-md-4">
              <label class="form-label" for="cost_per_hour">Costo por hora (€)</label>
              <input type="number" step="0.01" min="0" id="cost_per_hour" name="cost_per_hour" class="form-control" value="{{ old('cost_per_hour', $user->cost_per_hour) }}" placeholder="Ej. 12.00" />
              <div class="form-text">Ideal para métricas de productividad.</div>
              @error('cost_per_hour')
                <small class="visually-hidden text-danger" data-field-error="cost_per_hour">{{ $message }}</small>
              @enderror
            </div>
          </div>
        </div>
      </div>

      <div class="card section-card mb-4">
        <div class="card-header pb-0 d-flex justify-content-between align-items-start flex-wrap gap-2">
          <div>
            <h5 class="card-title mb-1">Roles y permisos</h5>
            <small class="text-muted">Define qué puede hacer este usuario dentro de la plataforma.</small>
          </div>
          <span class="badge bg-label-primary">Tagify</span>
        </div>
        <div class="card-body">
          <label class="form-label" for="tag_roles">Roles asignados</label>
          <input id="tag_roles" class="form-control" placeholder="Selecciona roles" data-selected='@json(old('roles', $selected['roles']))'>
          <div id="holder_roles"></div>
          <div class="form-text">Escribe para buscar un rol y pulsa Enter para añadirlo.</div>
          @error('roles')
            <small class="visually-hidden text-danger" data-field-error="roles">{{ $message }}</small>
          @enderror
        </div>
      </div>

      <div class="card section-card mb-4">
        <div class="card-header pb-0">
          <h5 class="card-title mb-1">Cobertura operativa</h5>
          <small class="text-muted">Empresas, ciudades y zonas donde este usuario trabaja.</small>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label" for="tag_companies">Empresas</label>
              <input id="tag_companies" class="form-control" placeholder="Añadir empresas" data-selected='@json(old('companies', $selected['companies']))'>
              <div id="holder_companies"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="tag_cities">Ciudades</label>
              <input id="tag_cities" class="form-control" placeholder="Añadir ciudades" data-selected='@json(old('cities', $selected['cities']))'>
              <div id="holder_cities"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="tag_zones">Zonas</label>
              <input id="tag_zones" class="form-control" placeholder="Añadir zonas" data-selected='@json(old('zones', $selected['zones']))'>
              <div id="holder_zones"></div>
            </div>
          </div>
          <div class="form-text mt-3">
            Consejo: comienza seleccionando Empresa(s), luego Ciudad(es) y finalmente Zona(s). Las listas se filtran automáticamente.
          </div>
        </div>
      </div>

      @php
        $initialDirectorId = old('zone_director_id', $currentZoneDirectorId);
      @endphp
      <div class="card section-card mb-4" id="zone-director-wrapper" @if(!$isRider) style="display:none" @endif>
        <div class="card-header pb-0">
          <h5 class="card-title mb-1">Director de zona</h5>
          <small class="text-muted">Asigna al responsable directo de este rider.</small>
        </div>
        <div class="card-body">
          <div class="row g-3 align-items-start">
            <div class="col-md-7">
              <label class="form-label" for="zone_director_id">Director asignado</label>
              <select class="form-select" id="zone_director_id" name="zone_director_id" data-current="{{ $initialDirectorId ?? '' }}">
                <option value="">Sin director asignado</option>
                @foreach($zoneManagers as $manager)
                  <option value="{{ $manager->id }}" @selected((string) $initialDirectorId === (string) $manager->id)>
                    {{ $manager->name }}@if($manager->zones->count()) · {{ $manager->zones->pluck('name')->join(', ') }}@endif
                  </option>
                @endforeach
              </select>
              @error('zone_director_id')
                <div class="visually-hidden text-danger" data-field-error="zone_director_id">{{ $message }}</div>
              @enderror
            </div>
            <div class="col-md-5">
              <div class="alert alert-info mb-0">
                <small class="d-block">Se mostrará primero quién gestiona las zonas seleccionadas.</small>
                <small class="d-block">Si aún no existe un director, deja la opción sin asignar.</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4">
      <div class="sticky-actions d-flex flex-column gap-4">
        <div class="card section-card">
          <div class="card-header pb-0">
            <h5 class="card-title mb-1">Resumen rápido</h5>
            <small class="text-muted">Estado actual y datos clave.</small>
          </div>
          <div class="card-body pt-3">
            <ul class="list-unstyled mb-0">
              <li class="mb-3 d-flex justify-content-between align-items-center">
                <span class="text-muted">Estado</span>
                <span class="badge {{ $isActive ? 'bg-label-success' : 'bg-label-secondary' }}">{{ $isActive ? 'Activo' : 'Inactivo' }}</span>
              </li>
              <li class="mb-3 d-flex justify-content-between align-items-center">
                <span class="text-muted">Rol principal</span>
                <span class="badge {{ $roleTone }}">{{ $roleName }}</span>
              </li>
              <li class="mb-3">
                <span class="text-muted d-block">Correo</span>
                <span class="fw-semibold text-body">{{ $displayEmail }}</span>
              </li>
              <li>
                <span class="text-muted d-block">Última actualización</span>
                <span class="fw-semibold text-body">{{ optional($user->updated_at)->diffForHumans() ?? '—' }}</span>
              </li>
            </ul>
          </div>
        </div>

        @if($canEditGlovoPin)
          <div class="card section-card">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
              <div>
                <h5 class="card-title mb-1">PIN seguridad Glovo</h5>
                <small class="text-muted">Gestiona el PIN privado para credenciales.</small>
              </div>
              <span class="badge {{ $hasGlovoPin ? 'bg-label-success' : 'bg-label-warning' }}">{{ $hasGlovoPin ? 'Configurado' : 'Pendiente' }}</span>
            </div>
            <div class="card-body pt-3">
              <p class="text-muted small mb-3">
                Define un PIN de 4 dígitos para desbloquear contraseñas de cuentas Glovo. Si dejas ambos campos vacíos, se mantendrá el PIN actual.
              </p>
              <div class="row g-3">
                <div class="col-12">
                  <label class="form-label" for="glovo_pin">Nuevo PIN</label>
                  <input type="password" name="glovo_pin" id="glovo_pin" class="form-control" inputmode="numeric" pattern="\d{4}" maxlength="4" autocomplete="off" placeholder="••••">
                  <div class="form-text">Debe contener exactamente 4 dígitos.</div>
                </div>
                <div class="col-12">
                  <label class="form-label" for="glovo_pin_confirmation">Confirmar PIN</label>
                  <input type="password" name="glovo_pin_confirmation" id="glovo_pin_confirmation" class="form-control" inputmode="numeric" pattern="\d{4}" maxlength="4" autocomplete="off" placeholder="••••">
                </div>
              </div>
            </div>
          </div>
        @endif
      </div>
    </div>
  </div>
</form>
@endsection

<script>
  window.__zoneManagers = @json($zoneManagersPayload);
  window.__currentZoneDirectorId = @json(old('zone_director_id', $currentZoneDirectorId));
  window.__isRiderUser = @json($isRider);
  window.__riderRoleId = @json($riderRoleId);
  window.__hasGlovoPin = @json($hasGlovoPin);
</script>

@if($mode === 'edit')
  <form id="deleteUserForm" method="POST" action="{{ route('admin.users.destroy', $user) }}" class="d-none">
    @csrf @method('DELETE')
  </form>
  @push('scripts')
  <script>
  document.addEventListener('DOMContentLoaded', function(){
    const delBtn = document.getElementById('btn-delete-user');
    if (delBtn) {
      delBtn.addEventListener('click', function(){
        if (confirm('¿Eliminar usuario?')) {
          document.getElementById('deleteUserForm').submit();
        }
      });
    }
  });
  </script>
  @endpush
@endif