<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("Role Management")}
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin")}
        class="btn btn-outline btn-primary btn-sm"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> {gettext("Back to Dashboard")}
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-2xl sm:text-4xl font-bold text-base-content mb-3">
          {gettext("Role Management")}
        </h1>
        <p class="text-base sm:text-lg text-base-content">
          {gettext("Create and manage user roles")}
        </p>
      </div>
    </header>

    <%!-- Action Button --%>
    <div class="flex justify-center mb-6">
      <button
        phx-click="show_create_form"
        class="btn btn-primary btn-lg"
      >
        <.icon name="hero-plus" class="w-5 h-5 mr-2" /> {gettext("Create New Role")}
      </button>
    </div>

    <%!-- Create Role Modal --%>
    <.modal show={@show_create_form} on_close="hide_form" max_width="2xl">
      <:title>{gettext("Create New Role")}</:title>
      <form id="create-role-form" phx-submit="create_role" class="space-y-4">
        <div class="form-control">
          <.input
            field={@create_role_form[:name]}
            label={gettext("Role Name *")}
            placeholder={gettext("Enter role name (e.g., Manager, Editor)")}
            maxlength="50"
            required
          />
          <p class="label mt-1">{gettext("Must be unique, 1-50 characters.")}</p>
        </div>
        <div class="form-control">
          <.textarea
            field={@create_role_form[:description]}
            label={gettext("Description")}
            placeholder={gettext("Describe what this role can do (optional)")}
            maxlength="500"
          />
          <p class="label mt-1">{gettext("Optional, up to 500 characters.")}</p>
        </div>
      </form>
      <:actions>
        <button type="button" phx-click="hide_form" class="btn btn-outline">
          {gettext("Cancel")}
        </button>
        <button type="submit" form="create-role-form" class="btn btn-primary">
          {gettext("Create Role")}
        </button>
      </:actions>
    </.modal>

    <%!-- Edit Role Modal --%>
    <.modal show={@show_edit_form} on_close="hide_form" max_width="2xl">
      <:title>{gettext("Edit Role")}</:title>
      <form id="edit-role-form" phx-submit="update_role" class="space-y-4">
        <div class="form-control">
          <.input
            field={@edit_role_form[:name]}
            label={gettext("Role Name *")}
            placeholder={gettext("Enter role name (e.g., Manager, Editor)")}
            maxlength="50"
            required
          />
          <p class="label mt-1">{gettext("Must be unique, 1-50 characters.")}</p>
        </div>
        <div class="form-control">
          <.textarea
            field={@edit_role_form[:description]}
            label={gettext("Description")}
            placeholder={gettext("Describe what this role can do (optional)")}
            maxlength="500"
          />
          <p class="label mt-1">{gettext("Optional, up to 500 characters.")}</p>
        </div>
      </form>
      <:actions>
        <button type="button" phx-click="hide_form" class="btn btn-outline">
          {gettext("Cancel")}
        </button>
        <button type="submit" form="edit-role-form" class="btn btn-primary">
          {gettext("Update Role")}
        </button>
      </:actions>
    </.modal>

    <%!-- Roles List --%>
    <div class="bg-base-100">
      <%= if length(@roles) > 0 do %>
        <.table_default variant="zebra">
          <.table_default_header>
            <.table_default_row>
              <.table_default_header_cell>{gettext("Role")}</.table_default_header_cell>
              <.table_default_header_cell>{gettext("Type")}</.table_default_header_cell>
              <.table_default_header_cell>{gettext("Description")}</.table_default_header_cell>
              <.table_default_header_cell>{gettext("Users")}</.table_default_header_cell>
              <.table_default_header_cell>{gettext("Actions")}</.table_default_header_cell>
            </.table_default_row>
          </.table_default_header>
          <.table_default_body>
            <%= for role <- @roles do %>
              <.table_default_row>
                <.table_default_cell>
                  <div class="flex items-center gap-2">
                    <.role_badge role={role} />
                  </div>
                </.table_default_cell>
                <.table_default_cell>
                  <%= if role.is_system_role do %>
                    <span class="badge badge-outline badge-sm">{gettext("System Role")}</span>
                  <% else %>
                    <span class="badge badge-success badge-sm">{gettext("Custom Role")}</span>
                  <% end %>
                </.table_default_cell>
                <.table_default_cell class="max-w-xs">
                  <div class="text-sm">
                    <%= if role.description do %>
                      {role.description}
                    <% else %>
                      <span class="text-base-content/50 italic">{gettext("No description")}</span>
                    <% end %>
                  </div>
                </.table_default_cell>
                <.table_default_cell>
                  <div class="flex items-center gap-2">
                    <.users_count role={role} stats={@role_stats} />
                    <span class="text-sm text-base-content/70">{gettext("users")}</span>
                  </div>
                </.table_default_cell>
                <.table_default_cell>
                  <div class="flex flex-wrap items-center gap-1">
                    <%= if !role.is_system_role do %>
                      <%!-- Edit Button --%>
                      <button
                        class="btn btn-xs btn-outline btn-primary"
                        phx-click="show_edit_role"
                        phx-value-role_id={role.uuid}
                      >
                        <.icon name="hero-pencil" class="h-3 w-3 mr-1" /> {gettext("Edit")}
                      </button>

                      <%!-- Delete Button --%>
                      <button
                        class="btn btn-xs btn-outline btn-error"
                        phx-click="request_delete_role"
                        phx-value-role_id={role.uuid}
                        phx-value-role_name={role.name}
                      >
                        <.icon name="hero-trash" class="h-3 w-3 mr-1" /> {gettext("Delete")}
                      </button>
                    <% else %>
                      <span class="badge badge-ghost badge-sm">{gettext("Protected")}</span>
                    <% end %>

                    <%!-- Permissions Button (users permission required, editable roles only) --%>
                    <%= if assigns[:phoenix_kit_current_scope] && PhoenixKit.Users.Auth.Scope.has_module_access?(assigns[:phoenix_kit_current_scope], "users") && !MapSet.member?(@uneditable_role_uuids, to_string(role.uuid)) do %>
                      <button
                        class="btn btn-xs btn-outline btn-secondary"
                        phx-click="show_permissions_editor"
                        phx-value-role_id={role.uuid}
                      >
                        <.icon name="hero-key" class="h-3 w-3 mr-1" /> {gettext("Permissions")}
                      </button>
                    <% end %>
                  </div>
                </.table_default_cell>
              </.table_default_row>
            <% end %>
          </.table_default_body>
        </.table_default>
      <% else %>
        <%!-- Empty state --%>
        <div class="text-center py-12">
          <.icon name="hero-shield-check" class="h-16 w-16 mx-auto text-base-content/40 mb-4" />
          <h3 class="text-lg font-medium text-base-content mb-2">
            {gettext("No roles found")}
          </h3>
          <p class="text-base-content/70 mb-4">
            {gettext("Start by creating your first custom role.")}
          </p>
          <button
            phx-click="show_create_form"
            class="btn btn-primary"
          >
            {gettext("Create First Role")}
          </button>
        </div>
      <% end %>
    </div>

    <%!-- Role Statistics --%>
    <div class="mt-8">
      <h3 class="text-lg font-semibold text-base-content mb-6">{gettext("Role Statistics")}</h3>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <%!-- System Roles Count --%>
        <PhoenixKitWeb.Components.Core.StatCard.stat_card
          compact={true}
          rounded="xl"
          value={Enum.count(@roles, & &1.is_system_role)}
          title={gettext("System Roles")}
          subtitle={gettext("Protected core roles")}
        >
          <:icon>
            <.icon name="hero-lock-closed" class="w-5 h-5" />
          </:icon>
        </PhoenixKitWeb.Components.Core.StatCard.stat_card>

        <%!-- Custom Roles Count --%>
        <PhoenixKitWeb.Components.Core.StatCard.stat_card
          compact={true}
          rounded="xl"
          value={Enum.count(@roles, &(!&1.is_system_role))}
          title={gettext("Custom Roles")}
          subtitle={gettext("User-defined roles")}
        >
          <:icon>
            <.icon name="hero-cog-6-tooth" class="w-5 h-5" />
          </:icon>
        </PhoenixKitWeb.Components.Core.StatCard.stat_card>

        <%!-- Total Roles Count --%>
        <PhoenixKitWeb.Components.Core.StatCard.stat_card
          compact={true}
          rounded="xl"
          value={length(@roles)}
          title={gettext("Total Roles")}
          subtitle={gettext("All available roles")}
        >
          <:icon>
            <.icon name="hero-chart-bar" class="w-5 h-5" />
          </:icon>
        </PhoenixKitWeb.Components.Core.StatCard.stat_card>
      </div>
    </div>

    <%!-- Delete Confirmation Modal --%>
    <.confirm_modal
      show={assigns[:delete_confirmation] && @delete_confirmation.show}
      on_confirm="confirm_delete_role"
      on_cancel="cancel_delete"
      title={gettext("Delete Role")}
      title_icon="hero-trash"
      danger={true}
      messages={[
        {:warning,
         gettext(
           "Are you sure you want to delete the role \"%{role_name}\"? This action cannot be undone.",
           role_name: Map.get(@delete_confirmation, :role_name, "")
         )}
      ]}
      confirm_text={gettext("Delete Role")}
    />

    <%!-- Permissions Editor Modal --%>
    <.modal
      show={@show_permissions_editor && @permissions_role != nil}
      on_close="hide_permissions_editor"
      max_width="3xl"
    >
      <:title>
        {gettext("Permissions for")}
        <.role_badge role={@permissions_role || %{name: "", is_system_role: false}} />
      </:title>

      <p class="text-sm text-base-content/70 mb-4">
        {gettext(
          "Select which sections and modules this role can access. You can only grant permissions that your own role has."
        )}
      </p>

      <%!-- Quick Actions --%>
      <div class="flex gap-2 mb-4">
        <button phx-click="grant_all_permissions" class="btn btn-xs btn-outline btn-success">
          {gettext("Grant All")}
        </button>
        <button phx-click="revoke_all_permissions" class="btn btn-xs btn-outline btn-error">
          {gettext("Revoke All")}
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <%!-- Core Sections --%>
        <div>
          <h4 class="font-semibold text-sm text-base-content/80 mb-3 uppercase tracking-wide">
            {gettext("Core Sections")}
          </h4>
          <div class="space-y-2">
            <%= for key <- PhoenixKit.Users.Permissions.core_section_keys(), MapSet.member?(@permissions_grantable_keys, key) do %>
              <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-base-200 transition-colors">
                <input
                  type="checkbox"
                  class="checkbox checkbox-sm checkbox-primary"
                  checked={MapSet.member?(@permissions_role_keys, key)}
                  phx-click="toggle_permission"
                  phx-value-key={key}
                />
                <span class="text-sm">{PhoenixKit.Users.Permissions.module_label(key)}</span>
              </label>
            <% end %>
          </div>
        </div>

        <%!-- Feature Modules --%>
        <div>
          <h4 class="font-semibold text-sm text-base-content/80 mb-3 uppercase tracking-wide">
            {gettext("Feature Modules")}
          </h4>
          <div class="space-y-2 max-h-80 overflow-y-auto">
            <%= for key <- PhoenixKit.Users.Permissions.feature_module_keys(), MapSet.member?(@permissions_grantable_keys, key) do %>
              <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-base-200 transition-colors">
                <input
                  type="checkbox"
                  class="checkbox checkbox-sm checkbox-primary"
                  checked={MapSet.member?(@permissions_role_keys, key)}
                  phx-click="toggle_permission"
                  phx-value-key={key}
                />
                <span class="text-sm">{PhoenixKit.Users.Permissions.module_label(key)}</span>
              </label>
            <% end %>
          </div>
        </div>
      </div>

      <%!-- Custom (permission keys registered by parent app) --%>
      <%= if length(PhoenixKit.Users.Permissions.custom_keys()) > 0 do %>
        <div class="md:col-span-2 mt-4">
          <h4 class="font-semibold text-sm text-accent mb-3 uppercase tracking-wide">
            {gettext("Custom")}
          </h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
            <div class="space-y-2">
              <%= for key <- PhoenixKit.Users.Permissions.custom_keys(), MapSet.member?(@permissions_grantable_keys, key) do %>
                <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-base-200 transition-colors">
                  <input
                    type="checkbox"
                    class="checkbox checkbox-sm checkbox-primary"
                    checked={MapSet.member?(@permissions_role_keys, key)}
                    phx-click="toggle_permission"
                    phx-value-key={key}
                  />
                  <span class="text-sm">{PhoenixKit.Users.Permissions.module_label(key)}</span>
                </label>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>

      <%!-- Summary --%>
      <div class="mt-4 p-3 bg-base-200 rounded-lg">
        <span class="text-sm text-base-content/70">
          {gettext("%{granted} of %{total} manageable permissions granted",
            granted: MapSet.size(@permissions_role_keys),
            total: MapSet.size(@permissions_grantable_keys)
          )}
        </span>
        <%= if MapSet.size(@permissions_preserved_keys) > 0 do %>
          <span class="text-sm text-base-content/50 ml-2">
            {gettext("(%{count} for disabled modules, preserved on save)",
              count: MapSet.size(@permissions_preserved_keys)
            )}
          </span>
        <% end %>
      </div>

      <:actions>
        <button type="button" phx-click="hide_permissions_editor" class="btn btn-outline">
          {gettext("Cancel")}
        </button>
        <button phx-click="save_permissions" class="btn btn-primary">
          {gettext("Save Permissions")}
        </button>
      </:actions>
    </.modal>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
