<div class="max-w-4xl mx-auto">
  <div class="mb-6">
    <%= link_to '← Back to Team', site_admin_users_path, class: 'text-blue-600 hover:text-blue-800' %>
  </div>

  <div class="bg-white rounded-lg shadow overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
      <div class="flex items-center">
        <div class="h-16 w-16 rounded-full bg-gray-300 flex items-center justify-center mr-4">
          <span class="text-gray-600 font-medium text-xl">
            <%= @user.email[0..1].upcase %>
          </span>
        </div>
        <div>
          <h1 class="text-2xl font-bold text-gray-900">
            <%= @user.first_names.present? ? "#{@user.first_names} #{@user.last_names}" : @user.email %>
          </h1>
          <p class="text-gray-500"><%= @user.email %></p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <%= link_to edit_site_admin_user_path(@user), class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" do %>
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
          </svg>
          Edit
        <% end %>
      </div>
    </div>

    <!-- Role & Status -->
    <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <% if @membership %>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
              <%= case @membership.role
                  when 'owner' then 'bg-purple-100 text-purple-800'
                  when 'admin' then 'bg-blue-100 text-blue-800'
                  when 'member' then 'bg-green-100 text-green-800'
                  else 'bg-gray-100 text-gray-800'
                  end %>">
              <%= @membership.role.titleize %>
            </span>
            <% if @membership.active? %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                Active
              </span>
            <% else %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                Inactive
              </span>
            <% end %>
          <% end %>
        </div>

        <!-- Role Quick Actions -->
        <% if @membership && @user != current_user %>
          <div class="flex items-center gap-2">
            <% if @membership.active? %>
              <%= button_to "Deactivate", deactivate_site_admin_user_path(@user), 
                  method: :patch,
                  class: "text-sm text-red-600 hover:text-red-800",
                  data: { confirm: "Are you sure you want to deactivate this user?" } %>
            <% else %>
              <%= button_to "Reactivate", reactivate_site_admin_user_path(@user),
                  method: :patch, 
                  class: "text-sm text-green-600 hover:text-green-800" %>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>

    <!-- User Details -->
    <div class="p-6">
      <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
        <div>
          <dt class="text-sm font-medium text-gray-500">Email</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @user.email %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Phone</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @user.phone_number_primary.presence || '-' %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Member Since</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= format_date(@user.created_at) %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Sign In Count</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @user.sign_in_count %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Last Sign In</dt>
          <dd class="mt-1 text-sm text-gray-900">
            <%= @user.current_sign_in_at.present? ? format_date(@user.current_sign_in_at) : 'Never' %>
          </dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Last Sign In IP</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @user.current_sign_in_ip.presence || '-' %></dd>
        </div>
      </dl>
    </div>

    <!-- Change Role Section -->
    <% if @membership && @user != current_user %>
      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
        <h3 class="text-sm font-medium text-gray-700 mb-3">Change Role</h3>
        <div class="flex items-center gap-2">
          <% Pwb::UserMembership::ROLES.each do |role| %>
            <% if role != @membership.role %>
              <%= button_to role.titleize, 
                  update_role_site_admin_user_path(@user, role: role),
                  method: :patch,
                  class: "px-3 py-1 text-sm rounded-lg border border-gray-300 hover:bg-gray-100",
                  data: { confirm: "Change role to #{role.titleize}?" } %>
            <% end %>
          <% end %>
        </div>
      </div>
    <% end %>

    <!-- Danger Zone -->
    <% if @user != current_user %>
      <div class="px-6 py-4 border-t border-gray-200">
        <h3 class="text-sm font-medium text-red-700 mb-3">Danger Zone</h3>
        <%= button_to "Remove from Team", site_admin_user_path(@user),
            method: :delete,
            class: "px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700",
            data: { confirm: "Are you sure you want to remove #{@user.email} from this website? They will lose access immediately." } %>
      </div>
    <% end %>
  </div>
</div>
