<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5">
  <div class="w-full mb-1">
    <div class="mb-4">
      <nav class="flex mb-5" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
          <li class="inline-flex items-center">
            <%= link_to tenant_admin_root_path, class: "inline-flex items-center text-gray-700 hover:text-blue-600" do %>
              <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              Dashboard
            <% end %>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <%= link_to "All Users", tenant_admin_users_path, class: "ml-1 text-gray-700 hover:text-blue-600 md:ml-2" %>
            </div>
          </li>
          <li>
            <div class="flex items-center">
              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              <span class="ml-1 text-gray-400 md:ml-2" aria-current="page"><%= @user.email %></span>
            </div>
          </li>
        </ol>
      </nav>
      <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl"><%= @user.email %></h1>
    </div>
    <div class="flex items-center space-x-2 sm:space-x-3">
      <%= link_to "← Back to Users", tenant_admin_users_path, class: "inline-flex items-center px-3 py-2 text-sm font-medium text-center text-gray-500 hover:text-gray-900" %>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 gap-4 my-4 xl:grid-cols-2">
  <!-- User Information Card -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-900">User Information</h3>
    </div>
    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
      <div class="sm:col-span-2">
        <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">Admin Status</dt>
        <dd class="mt-1 text-sm text-gray-900">
          <% if @user.respond_to?(:admin) && @user.admin %>
            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Admin</span>
          <% else %>
            <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">User</span>
          <% end %>
        </dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Confirmation Status</dt>
        <dd class="mt-1 text-sm text-gray-900">
          <% if @user.confirmed_at %>
            <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Confirmed</span>
            <span class="text-xs text-gray-500 ml-1"><%= @user.confirmed_at.strftime("%Y-%m-%d") %></span>
          <% else %>
            <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Unconfirmed</span>
          <% end %>
        </dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-500">Created</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">Last Updated</dt>
        <dd class="mt-1 text-sm text-gray-900"><%= format_date(@user.updated_at) %></dd>
      </div>
    </dl>
  </div>

  <!-- Activity Information -->
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Activity</h3>
    <dl class="space-y-4">
      <% if @user.respond_to?(:sign_in_count) %>
        <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 || 0 %></dd>
        </div>
      <% end %>
      <% if @user.respond_to?(:current_sign_in_at) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Current Sign-in At</dt>
          <dd class="mt-1 text-sm text-gray-900">
            <%= @user.current_sign_in_at ? format_date(@user.current_sign_in_at) : "Never" %>
          </dd>
        </div>
      <% end %>
      <% if @user.respond_to?(:last_sign_in_at) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Last Sign-in At</dt>
          <dd class="mt-1 text-sm text-gray-900">
            <%= @user.last_sign_in_at ? format_date(@user.last_sign_in_at) : "Never" %>
          </dd>
        </div>
      <% end %>
      <% if @user.respond_to?(:current_sign_in_ip) %>
        <div>
          <dt class="text-sm font-medium text-gray-500">Current Sign-in IP</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @user.current_sign_in_ip || "N/A" %></dd>
        </div>
      <% end %>
    </dl>
  </div>
</div>

<!-- Websites & Subdomains Section -->
<div class="my-4">
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Websites & Subdomains</h3>

    <% # Get user's website memberships %>
    <% memberships = @user.user_memberships.includes(:website).order(created_at: :desc) %>

    <% # Get any subdomains reserved by this user's email (incomplete signups) %>
    <% reserved_subdomains = Pwb::Subdomain.where(reserved_by_email: @user.email).where.not(aasm_state: 'allocated') %>

    <% if memberships.any? || reserved_subdomains.any? %>
      <% if memberships.any? %>
        <div class="mb-6">
          <h4 class="text-sm font-medium text-gray-700 mb-3">Website Memberships (<%= memberships.count %>)</h4>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Website</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subdomain</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Custom Domain</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <% memberships.each do |membership| %>
                  <% website = membership.website %>
                  <% next unless website %>
                  <% subdomain_record = Pwb::Subdomain.find_by(website_id: website.id) %>
                  <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 whitespace-nowrap">
                      <%= link_to tenant_admin_website_path(website), class: "text-blue-600 hover:text-blue-800 font-medium" do %>
                        Website #<%= website.id %>
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <% if subdomain_record %>
                        <%= link_to tenant_admin_subdomain_path(subdomain_record), class: "text-blue-600 hover:text-blue-800 font-mono text-sm" do %>
                          <%= subdomain_record.name %>.propertywebbuilder.com
                        <% end %>
                      <% elsif website.subdomain.present? %>
                        <span class="font-mono text-sm text-gray-900"><%= website.subdomain %>.propertywebbuilder.com</span>
                      <% else %>
                        <span class="text-gray-400">None</span>
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <% if website.custom_domain.present? %>
                        <%= link_to tenant_admin_domain_path(website), class: "text-blue-600 hover:text-blue-800 text-sm" do %>
                          <%= website.custom_domain %>
                        <% end %>
                      <% else %>
                        <span class="text-gray-400">None</span>
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium rounded <%=
                        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>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <% if membership.active? %>
                        <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Active</span>
                      <% else %>
                        <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">Inactive</span>
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                      <%= membership.created_at.strftime("%Y-%m-%d") %>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      <% end %>

      <% if reserved_subdomains.any? %>
        <div class="<%= memberships.any? ? 'mt-6 pt-6 border-t border-gray-200' : '' %>">
          <h4 class="text-sm font-medium text-gray-700 mb-3">
            <span class="text-yellow-600">Pending Subdomain Reservations</span>
            <span class="ml-2 px-2 py-0.5 text-xs bg-yellow-100 text-yellow-800 rounded-full"><%= reserved_subdomains.count %></span>
          </h4>
          <p class="text-sm text-gray-500 mb-3">
            These subdomains are reserved but the signup process may be incomplete.
          </p>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-yellow-50">
                <tr>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subdomain</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">State</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reserved At</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expires</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <% reserved_subdomains.each do |subdomain| %>
                  <% expired = subdomain.reserved_until.present? && subdomain.reserved_until < Time.current %>
                  <tr class="hover:bg-gray-50 <%= expired ? 'bg-red-50' : '' %>">
                    <td class="px-4 py-3 whitespace-nowrap">
                      <%= link_to tenant_admin_subdomain_path(subdomain), class: "text-blue-600 hover:text-blue-800 font-mono text-sm" do %>
                        <%= subdomain.name %>.propertywebbuilder.com
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <span class="px-2 py-1 text-xs font-medium rounded <%=
                        case subdomain.aasm_state
                        when 'reserved' then 'bg-yellow-100 text-yellow-800'
                        when 'released' then 'bg-gray-100 text-gray-800'
                        else 'bg-gray-100 text-gray-800'
                        end %>">
                        <%= subdomain.aasm_state.titleize %>
                      </span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                      <%= subdomain.reserved_at&.strftime("%Y-%m-%d %H:%M") || "N/A" %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-sm">
                      <% if subdomain.reserved_until.present? %>
                        <% if expired %>
                          <span class="text-red-600 font-medium">Expired</span>
                          <span class="text-gray-400 text-xs ml-1">(<%= time_ago_in_words(subdomain.reserved_until) %> ago)</span>
                        <% else %>
                          <span class="text-gray-900"><%= subdomain.reserved_until.strftime("%Y-%m-%d %H:%M") %></span>
                          <span class="text-gray-400 text-xs ml-1">(in <%= time_ago_in_words(subdomain.reserved_until) %>)</span>
                        <% end %>
                      <% else %>
                        <span class="text-gray-400">No expiry</span>
                      <% end %>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <%= link_to "View", tenant_admin_subdomain_path(subdomain), class: "text-blue-600 hover:text-blue-800 text-sm" %>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      <% end %>
    <% else %>
      <div class="text-center py-8">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
        </svg>
        <h3 class="mt-2 text-sm font-medium text-gray-900">No websites or subdomains</h3>
        <p class="mt-1 text-sm text-gray-500">This user is not associated with any websites or subdomains.</p>
      </div>
    <% end %>
  </div>
</div>

<!-- Actions Section -->
<div class="my-4">
  <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
    <h3 class="mb-4 text-lg font-semibold text-gray-900">Actions</h3>

    <div class="flex flex-wrap gap-3">
      <%= link_to edit_tenant_admin_user_path(@user), class: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm" do %>
        Edit User
      <% end %>

      <% # Check if user can be safely deleted %>
      <% owner_websites = @user.user_memberships.where(role: 'owner').includes(:website).map(&:website).compact %>
      <% sole_owner_websites = owner_websites.select { |w| w.user_memberships.where(role: 'owner').count == 1 } %>

      <% if sole_owner_websites.any? %>
        <!-- Cannot delete - sole owner warning -->
        <div class="flex-1 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <div class="flex items-start">
            <svg class="h-5 w-5 text-yellow-400 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
            <div>
              <p class="text-sm font-medium text-yellow-800">Cannot delete this user</p>
              <p class="text-sm text-yellow-700 mt-1">
                This user is the sole owner of: <%= sole_owner_websites.map(&:subdomain).join(', ') %>
              </p>
              <p class="text-sm text-yellow-700 mt-1">Transfer ownership before deleting.</p>

              <!-- Transfer Ownership Form -->
              <div class="mt-3">
                <%= form_with url: transfer_ownership_tenant_admin_user_path(@user), method: :post, local: true, class: "flex gap-2 items-end" do |f| %>
                  <div>
                    <label class="block text-xs font-medium text-yellow-800">Transfer to:</label>
                    <%= f.select :new_owner_id,
                        Pwb::User.unscoped.where.not(id: @user.id).order(:email).limit(100).map { |u| [u.email, u.id] },
                        { include_blank: "Select user..." },
                        class: "mt-1 block w-64 text-sm rounded-md border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500" %>
                  </div>
                  <%= f.submit "Transfer Ownership", class: "px-3 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 text-sm cursor-pointer" %>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      <% else %>
        <!-- Can delete -->
        <%= button_to tenant_admin_user_path(@user),
            method: :delete,
            data: { turbo_confirm: "Are you sure you want to delete #{@user.email}? This action cannot be undone." },
            class: "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm" do %>
          Delete User
        <% end %>
      <% end %>
    </div>
  </div>
</div>
