<div class="max-w-2xl mx-auto">
  <div class="mb-6">
    <%= link_to '← Back to User', site_admin_user_path(@user), class: 'text-blue-600 hover:text-blue-800' %>
  </div>

  <div class="mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Edit Team Member</h1>
    <p class="mt-2 text-gray-600">Update information for <%= @user.email %></p>
  </div>

  <div class="bg-white rounded-lg shadow p-6">
    <%= form_with model: @user, url: site_admin_user_path(@user), method: :patch, local: true do |f| %>
      <% if @user.errors.any? %>
        <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <h3 class="text-red-800 font-medium">Please fix the following errors:</h3>
          <ul class="mt-2 list-disc list-inside text-red-700 text-sm">
            <% @user.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

      <div class="space-y-6">
        <!-- Email (read-only) -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <div class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg text-gray-600">
            <%= @user.email %>
          </div>
          <p class="mt-1 text-sm text-gray-500">Email cannot be changed.</p>
        </div>

        <!-- Name Fields -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <%= f.label :first_names, "First Name", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.text_field :first_names, 
                class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
          </div>
          <div>
            <%= f.label :last_names, "Last Name", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.text_field :last_names, 
                class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
          </div>
        </div>

        <!-- Phone -->
        <div>
          <%= f.label :phone_number_primary, "Phone Number", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_field :phone_number_primary, 
              class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
              placeholder: "+1 234 567 8900" %>
        </div>

        <!-- Role Selection -->
        <% if @membership %>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
            <%= select_tag :role, 
                options_for_select([
                  ['Viewer', 'viewer'],
                  ['Member', 'member'],
                  ['Admin', 'admin'],
                  ['Owner', 'owner']
                ], @membership.role),
                class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
          </div>
        <% end %>
      </div>

      <!-- Actions -->
      <div class="mt-8 pt-6 border-t flex justify-between items-center">
        <%= link_to "Cancel", site_admin_user_path(@user), class: "text-gray-600 hover:text-gray-800" %>
        <%= f.submit "Save Changes", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
      </div>
    <% end %>
  </div>
</div>
