<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Análisis Estratégico - Metodología DIME</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Arial", sans-serif;
      }

      body {
        background-color: #f5f5f5;
        color: #333;
        line-height: 1.6;
      }

      .header {
        background: linear-gradient(135deg, #1a3a6a 0%, #2a5298 100%);
        color: white;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .logo {
        height: 50px;
        margin-right: 20px;
      }

      .header-text {
        flex-grow: 1;
      }

      .header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
      }

      .header p {
        font-size: 1rem;
        opacity: 0.9;
      }
      .user-menu {
        position: relative;
        display: flex;
        align-items: center;
      }

      .user-button {
        background: transparent;
        border: none;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0.5rem 0.8rem;
        border-radius: 8px;
        transition: background 0.2s ease-in-out;
      }

      .user-button:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .user-button .avatar {
        background-color: #93c5fd;
        color: #1e3a8a;
        font-weight: bold;
        font-size: 0.95rem;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
      }

      .arrow {
        margin-left: 0.4rem;
        font-size: 0.75rem;
        transition: transform 0.3s ease;
      }

      .dropdown {
        position: absolute;
        right: 0;
        top: 115%;
        background-color: #ffffff;
        color: #1e3a8a;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        z-index: 20;
        min-width: 160px;
        animation: fadeIn 0.2s ease-out;
      }

      .dropdown a {
        display: block;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: inherit;
        font-weight: 500;
        transition: background-color 0.2s;
      }

      .dropdown a:hover {
        background-color: #f1f5f9;
        color: #1e40af;
      }

      .hidden {
        display: none;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hidden {
        display: none;
      }

      .container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 20px;
        display: flex;
        gap: 30px;
      }

      .column {
        flex: 1;
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
      }

      .column h2 {
        color: #2a5298;
        margin-bottom: 1.2rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #eee;
      }

      .loading {
        text-align: center;
        padding: 20px;
        color: #666;
      }

      /* Estilos para formularios */
      form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
      }

      /* Estilos para inputs */
      input[type="text"],
      input[type="password"],
      input[type="email"],
      input[type="number"],
      textarea {
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        transition: all 0.3s ease;
        width: 100%;
      }

      input[type="text"]:focus,
      input[type="password"]:focus,
      input[type="email"]:focus,
      input[type="number"]:focus,
      textarea:focus,
      select:focus {
        outline: none;
        border-color: #2a5298;
        box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.2);
      }

      /* Estilos para selects */
      select {
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        background-color: white;
        width: 100%;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 1em;
      }

      /* Estilos para botones */
      button,
      input[type="submit"] {
        background-color: #2a5298;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
      }

      button:hover,
      input[type="submit"]:hover {
        background-color: #1a3a6a;
        transform: translateY(-1px);
      }

      button:active,
      input[type="submit"]:active {
        transform: translateY(0);
      }

      /* Estilos para mensajes de error */
      .error {
        color: #d32f2f;
        padding: 12px 15px;
        background-color: #ffebee;
        border-radius: 6px;
        margin: 10px 0;
        border-left: 4px solid #d32f2f;
      }

      /* Estilos para mensajes de éxito */
      .alert.success {
        color: #388e3c;
        padding: 12px 15px;
        background-color: #e8f5e9;
        border-radius: 6px;
        margin: 10px 0;
        border-left: 4px solid #388e3c;
      }

      /* Estilos para la tabla */
      table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 0.9em;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
      }

      table thead tr {
        background-color: #2a5298;
        color: #ffffff;
        text-align: left;
      }

      table th,
      table td {
        padding: 12px 15px;
      }

      table tbody tr {
        border-bottom: 1px solid #dddddd;
      }

      table tbody tr:nth-of-type(even) {
        background-color: #f8f9fa;
      }

      table tbody tr:last-of-type {
        border-bottom: 2px solid #2a5298;
      }

      table tbody tr:hover {
        background-color: #f1f5fd;
      }

      /* Estilos para secciones */
      section {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
      }

      section:last-child {
        border-bottom: none;
      }

      section h2 {
        color: #2a5298;
        margin-bottom: 15px;
        font-size: 1.4rem;
      }

      /* Estilos para formularios en línea */
      form[style*="inline"] {
        display: inline-flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
      }

      form[style*="inline"] input[type="password"] {
        width: auto;
        min-width: 200px;
      }

      form[style*="inline"] button {
        padding: 8px 15px;
      }

      @media (max-width: 768px) {
        .container {
          flex-direction: column;
        }
        
        form[style*="inline"] {
          flex-direction: column;
          align-items: flex-start;
        }
        
        form[style*="inline"] input[type="password"] {
          width: 100%;
        }
      }
    </style>
  </head>

  <body>
    <header class="header">
      <a href="/dashboard">
        <img src="/static/logo.png" alt="Logo" class="logo" />
      </a>

      <div class="header-text">
        <h1>Epicrisis IA</h1>
        <p>
          Modelo de generación de epicrisis basado en inteligencia artificial
        </p>
      </div>

      {% if user %}
      <div class="user-menu">
        <button class="user-button" onclick="toggleMenu()">
          👤 {{ user.username }}
          <span class="arrow">&#9662;</span>
        </button>
        <div id="dropdown" class="dropdown hidden">
          {% if user.role == "admin" %}
          <a href="/panel-admin">Panel admin</a>
          {% endif %}
          <a href="/logout">Cerrar sesión</a>
        </div>
      </div>
      {% endif %}
    </header>

    <div class="container">
      <div class="column">
        <h2>Panel Administrador</h2>

        <section class="crear-usuario">
          <h2>Crear nuevo usuario</h2>
          <form method="post" action="/admin/usuarios/crear">
            <input type="text" name="username" placeholder="Usuario" required />
            <input
              type="password"
              name="password"
              placeholder="Contraseña"
              required
            />
            <select name="role" required>
              <option value="" disabled selected>Seleccione un rol</option>
              <option value="medico">Médico</option>
              <option value="admin">Administrador</option>
            </select>
            <button type="submit">Crear usuario</button>
          </form>
          {% if crear_error %}
          <div class="error">{{ crear_error }}</div>
          {% endif %} {% if crear_exito %}
          <div class="alert success">{{ crear_exito }}</div>
          {% endif %}
        </section>

        <section class="usuarios-lista">
          <h2>Usuarios registrados</h2>
          <table>
            <thead>
              <tr>
                <th>Usuario</th>
                <th>Rol</th>
                <th>Acciones</th>
              </tr>
            </thead>
            <tbody>
              {% for user in usuarios %}
              <tr>
                <td>{{ user.username }}</td>
                <td>{{ user.role }}</td>
                <td>
                  <form
                    method="post"
                    action="/admin/usuarios/cambiar-password"
                    style="display: inline"
                  >
                    <input
                      type="hidden"
                      name="username"
                      value="{{ user.username }}"
                    />
                    <input
                      type="password"
                      name="new_password"
                      placeholder="Nueva contraseña"
                      required
                    />
                    <button type="submit">Cambiar clave</button>
                  </form>
                  <!-- Eliminar si deseas -->

                  <form
                    method="post"
                    action="/admin/usuarios/eliminar"
                    style="display: inline"
                  >
                    <input
                      type="hidden"
                      name="username"
                      value="{{ user.username }}"
                    />
                    <button type="submit" style="background-color: #d32f2f;">Eliminar</button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% if password_exito %}
          <div class="alert success">{{ password_exito }}</div>
          {% endif %} {% if eliminar_exito %}
          <div class="alert success">{{ eliminar_exito }}</div>
          {% endif %}
        </section>
      </div>
    </div>
  </body>
</html>

<script>
  function toggleMenu() {
    const dropdown = document.getElementById("dropdown");
    dropdown.classList.toggle("hidden");
  }

  document.addEventListener("click", function (e) {
    const btn = document.querySelector(".user-button");
    const dropdown = document.getElementById("dropdown");
    if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
      dropdown.classList.add("hidden");
    }
  });
</script>