<?php
$page = 'users';
$pageTitle = 'Antara — Gestión de usuarios';
require __DIR__ . '/../_layout.php';
?>
      <div class="admin-header">
        <h1>Usuarios</h1>
        <button type="button" class="btn btn-primary" id="btn-new-user"<?php echo $user ? '' : ' disabled title="Inicia sesión como administrador"'; ?>>+ Nuevo usuario</button>
      </div>

      <?php if (!$user && !empty($adminNeedsFirstWizard)): ?>
      <div class="card first-admin-wizard" id="first-admin-wizard">
        <h2 class="first-admin-wizard__title">Asistente: primer administrador</h2>
        <p class="first-admin-wizard__lead">Aún no existe ninguna cuenta. Crea la primera (será <strong>super_admin</strong>). Al finalizar, el escritorio dejará de ser público y el sistema pedirá iniciar sesión.</p>
        <ol class="first-admin-wizard__steps">
          <li>Define correo o usuario y una contraseña segura.</li>
          <li>Confirma con el botón inferior.</li>
          <li>Se activará el acceso con sesión para todo el escritorio.</li>
        </ol>
        <form id="first-admin-wizard-form" class="first-admin-wizard__form" autocomplete="off">
          <div class="first-admin-wizard__grid">
            <div>
              <label for="bf-email">Correo</label>
              <input type="email" id="bf-email" name="email" placeholder="correo@dominio.com" />
            </div>
            <div>
              <label for="bf-username">Nombre de usuario</label>
              <input type="text" id="bf-username" name="username" placeholder="Visible en el panel" />
            </div>
            <div>
              <label for="bf-phone">Teléfono</label>
              <input type="tel" id="bf-phone" name="phone" placeholder="Opcional" />
            </div>
            <div class="first-admin-wizard__pass-block">
              <label for="bf-password">Contraseña (mín. 8)</label>
              <input type="password" id="bf-password" name="password" autocomplete="new-password" aria-describedby="bf-strength-label bf-match-label" />
              <div class="pw-meter" role="presentation">
                <div class="pw-meter__track"><span class="pw-meter__fill" id="bf-meter-fill"></span></div>
              </div>
              <p class="pw-live pw-live--strength" id="bf-strength-label" role="status" aria-live="polite">Sin indicar</p>
            </div>
            <div class="first-admin-wizard__pass-block">
              <label for="bf-password2">Repetir contraseña</label>
              <input type="password" id="bf-password2" name="password2" autocomplete="new-password" aria-describedby="bf-match-label" />
              <p class="pw-live pw-live--match" id="bf-match-label" role="status" aria-live="polite">Escribe la confirmación para comprobar coincidencia.</p>
            </div>
          </div>
          <div class="first-admin-wizard__actions">
            <button type="submit" class="btn btn-primary" id="bf-submit">Crear administrador y activar login</button>
          </div>
          <p class="feedback" id="bf-feedback" role="status"></p>
        </form>
      </div>
      <?php endif; ?>

      <div class="toolbar<?php echo (!$user && !empty($adminNeedsFirstWizard)) ? ' is-disabled' : ''; ?>">
        <input type="search" id="filter-search" placeholder="Buscar por correo, usuario, teléfono, departamento o puesto…" class="grow" />
        <select id="filter-role">
          <option value="">Todos los roles</option>
          <option value="super_admin">super_admin</option>
          <option value="admin">admin</option>
          <option value="usuario">usuario</option>
        </select>
        <select id="filter-state">
          <option value="">Cualquier estado</option>
          <option value="active">Activos</option>
          <option value="inactive">Inactivos</option>
          <option value="blocked">Bloqueados</option>
          <option value="passkey">Con passkey</option>
        </select>
      </div>

      <div class="card" id="users-page">
        <table class="users-table">
          <thead>
            <tr>
              <th>Usuario</th>
              <th>Teléfono</th>
              <th>Rol</th>
              <th class="col-hide-sm">Estado</th>
              <th class="col-hide-sm">Creado</th>
              <th class="col-hide-sm">Último login</th>
              <th class="col-actions">Acciones</th>
            </tr>
          </thead>
          <tbody id="users-tbody"></tbody>
        </table>
      </div>

      <div class="modal-back" id="user-modal" role="dialog" aria-modal="true">
        <div class="modal">
          <header>
            <div class="modal-title-row">
              <div class="admin-avatar-wrap admin-avatar-wrap--lg" id="um-avatar-wrap" data-antara-profile-wrap="" aria-hidden="true">
                <img id="um-avatar-img" class="admin-avatar" data-antara-profile-img alt="" width="44" height="44" hidden decoding="async" />
                <span id="um-avatar-ph" class="admin-avatar admin-avatar--placeholder" data-antara-profile-ph></span>
              </div>
              <h2>Usuario</h2>
            </div>
            <button class="close" aria-label="Cerrar">×</button>
          </header>
          <div class="body">
            <input type="hidden" id="um-id" />
            <div class="modal-photo-block">
              <label class="modal-photo-block__label">Foto de perfil</label>
              <div class="um-photo-preview-wrap">
                <div class="um-photo-preview" id="um-photo-preview" data-antara-profile-wrap="" aria-hidden="true">
                  <img id="um-photo-preview-img" class="um-photo-preview__img" data-antara-profile-img alt="" width="120" height="120" hidden decoding="async" />
                  <span id="um-photo-preview-ph" class="um-photo-preview__ph" data-antara-profile-ph></span>
                </div>
              </div>
              <div id="um-photo-step-pick" class="um-photo-step">
                <p class="um-photo-lead">Elige imagen, GIF o vídeo. Las fotos abren el recorte; GIF y vídeo permiten fijar el encuadre circular.</p>
                <input type="file" id="um-photo-file" accept="image/png,image/jpeg,image/webp,image/gif,video/mp4,video/webm,video/ogg" hidden aria-hidden="true" />
                <input type="hidden" id="um-photo-source" value="original" />
                <div class="um-photo-actions-row">
                  <button type="button" class="btn btn-secondary-wizardish" id="um-pick-gallery">Galería</button>
                  <button type="button" class="btn btn-secondary-wizardish" id="um-pick-camera">Cámara</button>
                </div>
                <div class="um-photo-actions-row um-photo-actions-row--foot">
                  <button type="button" class="btn btn-text-wizardish" id="um-photo-clear">Quitar imagen</button>
                </div>
                <p class="um-photo-save-hint">Tras <strong>Aceptar</strong> en el editor, pulsa <strong>Guardar</strong> para aplicar la foto.</p>
              </div>
            </div>
            <div>
              <label for="um-email">Correo</label>
              <input type="email" id="um-email" placeholder="correo@dominio.com" />
            </div>
            <div>
              <label for="um-username">Nombre de usuario</label>
              <input type="text" id="um-username" placeholder="Nombre completo" />
            </div>
            <div>
              <label for="um-phone">Teléfono</label>
              <input type="tel" id="um-phone" placeholder="Opcional" />
            </div>
            <div>
              <label for="um-role">Rol</label>
              <select id="um-role">
                <option value="usuario">usuario</option>
                <option value="admin">admin</option>
                <?php if ($user && ($user['role'] ?? '') === AntaraStore::ROLE_SUPER): ?>
                  <option value="super_admin">super_admin</option>
                <?php endif; ?>
              </select>
            </div>
            <?php if (!empty($adminWorkspaceBranches)): ?>
            <div>
              <label for="um-branch">Sucursal (directorio de usuarios)</label>
              <select id="um-branch">
                <option value="">Predeterminada del sistema</option>
                <?php foreach ($adminWorkspaceBranches as $br) {
                    if (!is_array($br) || ($br['id'] ?? '') === '') {
                        continue;
                    }
                    $bid = htmlspecialchars((string)$br['id'], ENT_QUOTES, 'UTF-8');
                    $bnm = htmlspecialchars((string)($br['name'] ?? $br['id']), ENT_QUOTES, 'UTF-8');
                    echo '<option value="' . $bid . '">' . $bnm . '</option>';
                } ?>
              </select>
              <p class="muted" style="font-size:.72rem;margin:.25rem 0 0">En modo empresa cada sucursal tiene su propio espacio de cuentas; el acceso a datos de otras sucursales puede requerir permisos explícitos según la política configurada en la instalación.</p>
            </div>
            <?php if ($adminDeploymentKind === 'company'): ?>
            <div>
              <label for="um-department">Departamento</label>
              <select id="um-department">
                <option value="">— Sin departamento —</option>
              </select>
            </div>
            <div>
              <label for="um-position">Puesto</label>
              <select id="um-position">
                <option value="">— Sin puesto —</option>
              </select>
              <p class="muted" style="font-size:.72rem;margin:.25rem 0 0">Los departamentos y puestos dependen de la sucursal seleccionada. Configúralos en <a href="<?php echo htmlspecialchars(($adminBase ?? '') . '/users/org.php', ENT_QUOTES); ?>">Organización</a>.</p>
            </div>
            <?php endif; ?>
            <?php endif; ?>
            <div>
              <label for="um-password">Contraseña (mín 8, vacío = no cambiar)</label>
              <input type="password" id="um-password" autocomplete="new-password" />
            </div>
          </div>
          <div class="feedback" id="um-feedback"></div>
          <div class="actions">
            <button class="btn btn-ghost" type="button" id="um-cancel">Cancelar</button>
            <button class="btn btn-primary" id="um-save">Guardar</button>
          </div>
        </div>
      </div>

<?php require __DIR__ . '/../_image_editor_dialog.php'; ?>
<?php require __DIR__ . '/../_layout_footer.php'; ?>
