<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="User Management"
  current_path={@current_path}
  project_title={@project_title}
>
  <div class="container flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin/dashboard")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left /> Back to Dashboard
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">User Management</h1>
        <p class="text-lg text-base-content">Manage user accounts and roles</p>
      </div>
    </header>

    <%!-- Role Management Modal --%>
    <%= if @show_role_modal && @managing_user do %>
      <div class="modal modal-open">
        <div class="modal-box max-w-2xl">
          <h3 class="font-bold text-xl mb-4">
            Manage Roles for {@managing_user.email}
          </h3>

          <form phx-submit="sync_user_roles" class="space-y-4">
            <div class="space-y-2">
              <%= for role <- @all_roles do %>
                <div class="form-control">
                  <label class="label cursor-pointer justify-start gap-3">
                    <input
                      type="checkbox"
                      name={"roles[#{role.name}]"}
                      value={role.name}
                      class="checkbox"
                      checked={role.name in @user_roles}
                      disabled={
                        role.is_system_role && role.name == "Owner" &&
                          user_has_role?(@managing_user, "Owner") &&
                          Enum.count(@user_roles, &(&1 == "Owner")) == 1
                      }
                    />
                    <div class="flex items-center gap-2">
                      <span class={"badge #{role_badge_class_for_custom(role.name)} badge-sm"}>
                        {role.name}
                      </span>
                      <%= if role.is_system_role do %>
                        <span class="badge badge-outline badge-xs">System</span>
                      <% end %>
                      <%= if role.description do %>
                        <span class="text-sm text-base-content/70">- {role.description}</span>
                      <% end %>
                    </div>
                  </label>
                </div>
              <% end %>
            </div>

            <%= if Enum.empty?(@all_roles) do %>
              <div class="text-center py-8 text-base-content/70">
                <p>No roles available. Create roles first in Role Management.</p>
              </div>
            <% end %>

            <div class="modal-action">
              <button type="button" phx-click="hide_role_management" class="btn btn-outline">
                Cancel
              </button>
              <button type="submit" class="btn btn-primary">
                Update Roles
              </button>
            </div>
          </form>
        </div>
      </div>
    <% end %>

    <%!-- Controls --%>
    <div class="bg-base-200 rounded-lg p-6 mb-6">
      <div class="flex flex-col lg:flex-row gap-4">
        <%!-- Search --%>
        <div class="flex-1">
          <label class="label">
            <span class="label-text">Search by email, username, or name</span>
          </label>
          <form phx-submit="search" phx-change="search">
            <input
              type="text"
              name="search"
              value={@search_query}
              placeholder="Enter email, username, or name to search..."
              class="input input-bordered w-full"
            />
          </form>
        </div>

        <%!-- Role Filter --%>
        <div class="w-full lg:w-48">
          <label class="label">
            <span class="label-text">Filter by role</span>
          </label>
          <form phx-change="filter_by_role">
            <select class="select select-bordered w-full" name="role" value={@filter_role}>
              <option value="all">All Users</option>
              <option value="Owner">Owners Only</option>
              <option value="Admin">Admins Only</option>
              <option value="User">Regular Users</option>
            </select>
          </form>
        </div>

        <%!-- Add User Button --%>
        <div class="w-full lg:w-48">
          <label class="label">
            <span class="label-text">Quick Actions</span>
          </label>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/users/new")}
            class="btn btn-primary w-full"
          >
            <PhoenixKitWeb.Components.Core.Icons.icon_user_add /> Add New User
          </.link>
        </div>
      </div>
    </div>

    <%!-- Users Table --%>
    <div class="bg-base-100 rounded-lg shadow-md overflow-hidden">
      <%= if length(@users) > 0 do %>
        <div class="overflow-x-auto">
          <table class="table table-zebra w-full">
            <thead>
              <tr>
                <th>User</th>
                <th>Role</th>
                <th>Status</th>
                <th>Registered</th>
                <th>Last Confirmed</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <%= for user <- @users do %>
                <tr>
                  <td>
                    <div class="flex flex-col gap-1">
                      <div class="flex items-center gap-2">
                        <span class="font-medium">{user.email}</span>
                        <%= if user.id == @phoenix_kit_current_user.id do %>
                          <span class="badge badge-info badge-xs">you</span>
                        <% end %>
                      </div>
                      <%= if user.username do %>
                        <div class="text-sm text-base-content/60">
                          @{user.username}
                        </div>
                      <% end %>
                      <%= if user.first_name || user.last_name do %>
                        <div class="text-sm text-base-content/70">
                          {PhoenixKit.Users.Auth.User.full_name(user)}
                        </div>
                      <% end %>
                    </div>
                  </td>
                  <td>
                    <% user_roles = get_user_roles(user) %>
                    <div class="flex flex-wrap gap-1">
                      <%= for role_name <- user_roles do %>
                        <span class={"badge #{role_badge_class_for_custom(role_name)} badge-sm"}>
                          {role_name}
                        </span>
                      <% end %>
                      <%= if Enum.empty?(user_roles) do %>
                        <span class="badge badge-ghost badge-sm">No roles</span>
                      <% end %>
                    </div>
                  </td>
                  <td>
                    <div class="flex flex-col gap-1">
                      <%= if user.confirmed_at do %>
                        <span class="badge badge-success badge-sm">Confirmed</span>
                      <% else %>
                        <span class="badge badge-warning badge-sm">Pending</span>
                      <% end %>
                      <%= if user.is_active do %>
                        <span class="badge badge-outline badge-xs">Active</span>
                      <% else %>
                        <span class="badge badge-error badge-xs">Inactive</span>
                      <% end %>
                    </div>
                  </td>
                  <td class="text-sm">
                    <div class="flex flex-col gap-1">
                      <div>{UtilsDate.format_date_with_user_format(user.inserted_at)}</div>
                      <div class="text-xs text-base-content/70">
                        {UtilsDate.format_time_with_user_format(user.inserted_at)}
                      </div>
                    </div>
                  </td>
                  <td class="text-sm">
                    <div class="flex flex-col gap-1">
                      <%= if user.confirmed_at do %>
                        <div>{UtilsDate.format_date_with_user_format(user.confirmed_at)}</div>
                        <div class="text-xs text-base-content/70">
                          {UtilsDate.format_time_with_user_format(user.confirmed_at)}
                        </div>
                      <% else %>
                        <div>Never</div>
                      <% end %>
                    </div>
                  </td>
                  <td>
                    <div class="flex flex-wrap gap-1">
                      <%!-- Edit User --%>
                      <.link
                        navigate={PhoenixKit.Utils.Routes.path("/admin/users/edit/#{user.id}")}
                        class="btn btn-xs btn-outline btn-secondary"
                      >
                        <PhoenixKitWeb.Components.Core.Icons.icon_edit class="h-3 w-3 mr-1" />
                        Edit
                      </.link>

                      <%!-- Role Management --%>
                      <%= if user.id != @phoenix_kit_current_user.id do %>
                        <button
                          class="btn btn-xs btn-outline btn-primary"
                          phx-click="show_role_management"
                          phx-value-user_id={user.id}
                        >
                          <PhoenixKitWeb.Components.Core.Icons.icon_settings class="h-3 w-3 mr-1" />
                          Manage Roles
                        </button>
                      <% end %>

                      <%!-- Status Toggle --%>
                      <%= if user.id != @phoenix_kit_current_user.id && user_primary_role(user) != "Owner" do %>
                        <button
                          class={"btn btn-xs btn-outline #{if user.is_active, do: "btn-warning", else: "btn-success"}"}
                          phx-click="toggle_user_status"
                          phx-value-user_id={user.id}
                          data-confirm={"Are you sure you want to #{if user.is_active, do: "deactivate", else: "activate"} this user?"}
                        >
                          <%= if user.is_active do %>
                            <PhoenixKitWeb.Components.Core.Icons.icon_ban class="h-3 w-3 mr-1" />
                            Deactivate
                          <% else %>
                            <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_outline class="h-3 w-3 mr-1" />
                            Activate
                          <% end %>
                        </button>

                        <%!-- Email Confirmation Toggle --%>
                        <button
                          class={"btn btn-xs btn-outline #{if user.confirmed_at, do: "btn-warning", else: "btn-info"}"}
                          phx-click="toggle_user_confirmation"
                          phx-value-user_id={user.id}
                          data-confirm={"Are you sure you want to #{if user.confirmed_at, do: "unconfirm", else: "confirm"} this user's email?"}
                        >
                          <%= if user.confirmed_at do %>
                            <PhoenixKitWeb.Components.Core.Icons.icon_warning class="h-3 w-3 mr-1" />
                            Unconfirm
                          <% else %>
                            <PhoenixKitWeb.Components.Core.Icons.icon_shield class="h-3 w-3 mr-1" />
                            Confirm
                          <% end %>
                        </button>
                      <% else %>
                        <span class="text-xs text-base-content/50">
                          {if user.id == @phoenix_kit_current_user.id,
                            do: "Self",
                            else: "Protected"}
                        </span>
                      <% end %>
                    </div>
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>

        <%!-- Pagination --%>
        <%= if @total_pages > 1 do %>
          <div class="flex justify-center p-4 border-t border-base-300">
            <div class="join">
              <%= for page <- 1..@total_pages do %>
                <button
                  class={"join-item btn btn-sm #{if page == @page, do: "btn-active", else: ""}"}
                  phx-click="change_page"
                  phx-value-page={page}
                >
                  {page}
                </button>
              <% end %>
            </div>
          </div>
        <% end %>
      <% else %>
        <%!-- Empty state --%>
        <div class="text-center py-12">
          <PhoenixKitWeb.Components.Core.Icons.icon_users_multiple class="h-16 w-16 mx-auto text-base-content/40 mb-4" />
          <h3 class="text-lg font-medium text-base-content mb-2">
            No users found
          </h3>
          <p class="text-base-content/70 mb-4">
            <%= if @search_query != "" or @filter_role != "all" do %>
              Try adjusting your search or filter criteria.
            <% else %>
              No users are registered yet.
            <% end %>
          </p>
          <%= if @search_query != "" or @filter_role != "all" do %>
            <button
              class="btn btn-outline btn-sm"
              phx-click="search"
              phx-value-search=""
              onclick="document.querySelector('input[name=&quot;search&quot;]').value = ''"
            >
              Clear Filters
            </button>
          <% end %>
        </div>
      <% end %>
    </div>

    <%!-- Enhanced Stats --%>
    <div class="mt-8">
      <h3 class="text-lg font-semibold text-base-content mb-6">User Statistics</h3>

      <%!-- Main Role Stats --%>
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-4 shadow-lg">
          <div class="flex items-center gap-3">
            <div class="p-2 bg-white/20 rounded-lg">
              👥
            </div>
            <div>
              <div class="text-2xl font-bold">{@total_users}</div>
              <div class="text-sm opacity-90">Total Users</div>
            </div>
          </div>
        </div>

        <div class="bg-gradient-to-br from-red-500 to-red-600 text-white rounded-xl p-4 shadow-lg">
          <div class="flex items-center gap-3">
            <div class="p-2 bg-white/20 rounded-lg">
              👑
            </div>
            <div>
              <div class="text-2xl font-bold">{@total_owners}</div>
              <div class="text-sm opacity-90">System Owners</div>
            </div>
          </div>
        </div>

        <div class="bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-xl p-4 shadow-lg">
          <div class="flex items-center gap-3">
            <div class="p-2 bg-white/20 rounded-lg">
              ⭐
            </div>
            <div>
              <div class="text-2xl font-bold">{@total_admins}</div>
              <div class="text-sm opacity-90">Administrators</div>
            </div>
          </div>
        </div>

        <div class="bg-gradient-to-br from-gray-500 to-gray-600 text-white rounded-xl p-4 shadow-lg">
          <div class="flex items-center gap-3">
            <div class="p-2 bg-white/20 rounded-lg">
              👤
            </div>
            <div>
              <div class="text-2xl font-bold">{@total_regular_users}</div>
              <div class="text-sm opacity-90">Regular Users</div>
            </div>
          </div>
        </div>
      </div>

      <%!-- Secondary Stats - Gradient Cards --%>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <%!-- Active Users --%>
        <div class="bg-gradient-to-br from-green-500 via-green-600 to-emerald-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-between mb-4">
            <div class="p-2 bg-white/20 rounded-lg">
              <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled class="w-6 h-6" />
            </div>
          </div>
          <div class="text-3xl font-bold mb-2">{@active_users}</div>
          <div class="text-green-100 font-medium">Active Users</div>
          <div class="text-green-200 text-xs mt-1">Online users</div>
        </div>

        <%!-- Inactive Users --%>
        <div class="bg-gradient-to-br from-red-500 via-red-600 to-rose-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-between mb-4">
            <div class="p-2 bg-white/20 rounded-lg">
              <PhoenixKitWeb.Components.Core.Icons.icon_x_circle_filled class="w-6 h-6" />
            </div>
          </div>
          <div class="text-3xl font-bold mb-2">{@inactive_users}</div>
          <div class="text-red-100 font-medium">Inactive Users</div>
          <div class="text-red-200 text-xs mt-1">Disabled</div>
        </div>

        <%!-- Confirmed Users --%>
        <div class="bg-gradient-to-br from-blue-500 via-blue-600 to-cyan-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-between mb-4">
            <div class="p-2 bg-white/20 rounded-lg">
              <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-6 h-6" />
            </div>
          </div>
          <div class="text-3xl font-bold mb-2">{@confirmed_users}</div>
          <div class="text-blue-100 font-medium">Confirmed</div>
          <div class="text-blue-200 text-xs mt-1">Verified emails</div>
        </div>

        <%!-- Pending Users --%>
        <div class="bg-gradient-to-br from-yellow-500 via-orange-500 to-amber-600 text-white rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-between mb-4">
            <div class="p-2 bg-white/20 rounded-lg">
              <PhoenixKitWeb.Components.Core.Icons.icon_info_circle_filled class="w-6 h-6" />
            </div>
          </div>
          <div class="text-3xl font-bold mb-2">{@pending_users}</div>
          <div class="text-yellow-100 font-medium">Pending</div>
          <div class="text-yellow-200 text-xs mt-1">Awaiting email</div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
