{% extends "base.html" %}
{% block title %}User Management{% endblock %}

{% block content %}
<style>
  :root {
    --primary-color: #667eea;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  }

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
  }

  .page-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .page-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
  }

  .section-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
  }

  .section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .form-label {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
  }

  .form-control, .form-select {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    transition: all 0.3s ease;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
  }

  .btn {
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
  }

  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  .table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .table thead th {
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    border: none;
  }

  .table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
  }

  .table tbody tr:hover {
    background: #f8fafc;
  }

  .table tbody td {
    padding: 1rem;
    vertical-align: middle;
  }

  .badge {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .badge-admin {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
  }

  .badge-viewer {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: white;
  }

  .badge-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  }

  .badge-inactive {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
  }

  .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  .btn-warning {
    background: var(--warning-color);
    border: none;
    color: white;
  }

  .btn-warning:hover {
    background: #d97706;
    color: white;
  }

  .btn-danger {
    background: var(--danger-color);
    border: none;
    color: white;
  }

  .btn-danger:hover {
    background: #dc2626;
    color: white;
  }

  .btn-info {
    background: #3b82f6;
    border: none;
    color: white;
  }

  .btn-info:hover {
    background: #2563eb;
    color: white;
  }

  .action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .form-check-input:checked {
    background-color: var(--success-color);
    border-color: var(--success-color);
  }

  .empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
  }

  .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }

  /* Modal Enhancements */
  .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }

  .modal-footer {
    border-top: 1px solid var(--border-color);
  }

  @media (max-width: 768px) {
    .page-header {
      padding: 1.25rem 1.5rem;
    }

    .page-title {
      font-size: 1.5rem;
    }

    .section-card {
      padding: 1.5rem;
    }

    .table {
      font-size: 0.85rem;
    }

    .action-buttons {
      flex-direction: column;
    }

    .action-buttons .btn {
      width: 100%;
    }
  }
</style>

<div class="page-header">
  <div class="page-title">
    <span>👥</span>
    <span>User Management</span>
  </div>
  <div class="page-subtitle">Manage system users, roles, and permissions</div>
</div>

<!-- Add New User Section -->
<div class="section-card">
  <div class="section-title">
    <span>➕</span>
    <span>Add New User</span>
  </div>
  
  <form method="POST" action="{{ url_for('add_user') }}">
    <div class="row g-3">
      <div class="col-md-3">
        <label class="form-label">Username *</label>
        <input type="text" name="username" class="form-control" placeholder="username" required>
      </div>
      
      <div class="col-md-3">
        <label class="form-label">Password *</label>
        <div class="input-group"><input id="addUserPassword" type="password" name="password" class="form-control" placeholder="Min 8 chars, upper/lower/number/symbol" required minlength="8"><button class="btn btn-outline-secondary" type="button" onclick="togglePassword('addUserPassword', this)">👁️</button></div>
      </div>
      
      <div class="col-md-2">
        <label class="form-label">Role *</label>
        <select name="role" class="form-select" required>
          <option value="viewer">Viewer</option>
          <option value="admin">Admin</option>
        </select>
      </div>
      
      <div class="col-md-2">
        <label class="form-label">Full Name</label>
        <input type="text" name="full_name" class="form-control" placeholder="Optional">
      </div>
      
      <div class="col-md-2">
        <label class="form-label">&nbsp;</label>
        <button type="submit" class="btn btn-primary w-100">
          <span>✨</span> Create User
        </button>
      </div>
    </div>
    
    <div class="row mt-2">
      <div class="col-md-6">
        <label class="form-label">Email (Optional)</label>
        <input type="email" name="email" class="form-control" placeholder="user@example.com">
      </div>
    </div>
  </form>
</div>

<!-- Users List Section -->
<div class="section-card">
  <div class="section-title">
    <span>📋</span>
    <span>Existing Users</span>
  </div>
  
  {% if users %}
  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>Username</th>
          <th>Full Name</th>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          <th>Created</th>
          <th>Last Login</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr>
          <td><strong>#{{ user.id }}</strong></td>
          <td>
            <strong>{{ user.username }}</strong>
            {% if user.id == session.user_id %}
            <span class="badge bg-secondary ms-2">You</span>
            {% endif %}
          </td>
          <td>{{ user.full_name or '-' }}</td>
          <td>{{ user.email or '-' }}</td>
          <td>
            <span class="badge badge-{{ user.role }}">
              {% if user.role == 'admin' %}👑 Admin{% else %}👁️ Viewer{% endif %}
            </span>
          </td>
          <td>
            <span class="badge badge-{{ 'active' if user.is_active else 'inactive' }}">
              {% if user.is_active %}✅ Active{% else %}❌ Inactive{% endif %}
            </span>
          </td>
          <td>{{ user.created_at[:10] if user.created_at else '-' }}</td>
          <td>{{ user.last_login[:16] if user.last_login else 'Never' }}</td>
          <td>
            <div class="action-buttons">
              <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#editModal{{ user.id }}">
                ✏️ Edit
              </button>
              <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#resetModal{{ user.id }}">
                🔑 Reset
              </button>
              {% if user.id != session.user_id %}
              <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ user.id }}">
                🗑️ Delete
              </button>
              {% endif %}
            </div>
          </td>
        </tr>

        <!-- Edit User Modal -->
        <div class="modal fade" id="editModal{{ user.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">✏️ Edit User: {{ user.username }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
              </div>
              <form method="POST" action="{{ url_for('edit_user', user_id=user.id) }}">
                <div class="modal-body">
                  <div class="mb-3">
                    <label class="form-label">Role</label>
                    <select name="role" class="form-select" required>
                      <option value="viewer" {% if user.role == 'viewer' %}selected{% endif %}>Viewer</option>
                      <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>Admin</option>
                    </select>
                  </div>
                  
                  <div class="mb-3">
                    <label class="form-label">Full Name</label>
                    <input type="text" name="full_name" class="form-control" value="{{ user.full_name or '' }}">
                  </div>
                  
                  <div class="mb-3">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ user.email or '' }}">
                  </div>
                  
                  <div class="mb-3">
                    <div class="form-check">
                      <input type="checkbox" name="is_active" class="form-check-input" id="active{{ user.id }}" {% if user.is_active %}checked{% endif %}>
                      <label class="form-check-label" for="active{{ user.id }}">
                        Account Active
                      </label>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-primary">💾 Save Changes</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Reset Password Modal -->
        <div class="modal fade" id="resetModal{{ user.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-warning">
                <h5 class="modal-title">🔑 Reset Password: {{ user.username }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
              </div>
              <form method="POST" action="{{ url_for('reset_user_password', user_id=user.id) }}">
                <div class="modal-body">
                  <div class="alert alert-warning">
                    <strong>⚠️ Warning:</strong> This will change the user's password immediately and clear failed-login lockouts for this user.
                  </div>
                  
                  <div class="mb-3">
                    <label class="form-label">New Password</label>
                    <div class="input-group"><input id="resetPassword{{ user.id }}" type="password" name="new_password" class="form-control" required minlength="8" placeholder="Min 8 chars, upper/lower/number/symbol"><button class="btn btn-outline-secondary" type="button" onclick="togglePassword('resetPassword{{ user.id }}', this)">👁️</button></div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-warning">🔑 Reset Password</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Delete User Modal -->
        {% if user.id != session.user_id %}
        <div class="modal fade" id="deleteModal{{ user.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-danger">
                <h5 class="modal-title">🗑️ Delete User: {{ user.username }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
              </div>
              <form method="POST" action="{{ url_for('delete_user', user_id=user.id) }}">
                <div class="modal-body">
                  <div class="alert alert-danger">
                    <strong>⚠️ Warning:</strong> This action cannot be undone!
                  </div>
                  <p>Are you sure you want to delete the user <strong>{{ user.username }}</strong>?</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="submit" class="btn btn-danger">🗑️ Delete User</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        {% endif %}
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">👥</div>
    <p>No users found in the system.</p>
  </div>
  {% endif %}
</div>

<div class="alert alert-info">
  <strong>ℹ️ Role Permissions:</strong>
  <ul class="mb-0 mt-2">
    <li><strong>Admin:</strong> Full access to all features including user management, database download, and system settings.</li>
    <li><strong>Viewer:</strong> Can view and manage orders, stock, expenses, cash book, and profit reports. Cannot access user management or download database.</li>
  </ul>
</div>

{% endblock %}