<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">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/users")}
      title={gettext("Role Management")}
      subtitle={gettext("Create and manage user roles")}
    />

    <%!-- 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
          id="roles-table"
          variant="zebra"
          toggleable={true}
          items={@roles}
          card_fields={
            fn role ->
              [
                %{
                  label: gettext("Type"),
                  value: if(role.is_system_role, do: gettext("System"), else: gettext("Custom"))
                },
                %{label: gettext("Users"), value: Map.get(@role_stats, role.name, 0)},
                %{label: gettext("Description"), value: role.description || gettext("—")}
              ]
            end
          }
        >
          <:card_header :let={role}>
            <div class="flex items-center gap-2">
              <.role_badge role={role} />
              <%= if role.is_system_role do %>
                <span class="badge badge-outline badge-sm h-auto">{gettext("System")}</span>
              <% else %>
                <span class="badge badge-success badge-sm h-auto">{gettext("Custom")}</span>
              <% end %>
            </div>
          </:card_header>
          <:card_actions :let={role}>
            <.table_row_menu id={"role-card-menu-#{role.uuid}"} label={gettext("Role actions")}>
              <%= if !role.is_system_role do %>
                <.table_row_menu_button
                  phx-click="show_edit_role"
                  phx-value-role_uuid={role.uuid}
                  icon="hero-pencil"
                  label={gettext("Edit")}
                  variant="primary"
                />
                <.table_row_menu_divider />
                <.table_row_menu_button
                  phx-click="request_delete_role"
                  phx-value-role_uuid={role.uuid}
                  phx-value-role_name={role.name}
                  icon="hero-trash"
                  label={gettext("Delete")}
                  variant="error"
                />
              <% else %>
                <li class="px-3 py-2 text-xs text-base-content/50 italic select-none">
                  {gettext("Protected")}
                </li>
              <% end %>
              <%= if @can_manage_permissions && !MapSet.member?(@uneditable_role_uuids, to_string(role.uuid)) do %>
                <.table_row_menu_divider />
                <.table_row_menu_button
                  phx-click="show_permissions_editor"
                  phx-value-role_uuid={role.uuid}
                  icon="hero-key"
                  label={gettext("Permissions")}
                  variant="secondary"
                />
              <% end %>
            </.table_row_menu>
          </:card_actions>
          <.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 h-auto">
                      {gettext("System Role")}
                    </span>
                  <% else %>
                    <span class="badge badge-success badge-sm h-auto">
                      {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>
                  <.table_row_menu id={"role-menu-#{role.uuid}"} label={gettext("Role actions")}>
                    <%= if !role.is_system_role do %>
                      <.table_row_menu_button
                        phx-click="show_edit_role"
                        phx-value-role_uuid={role.uuid}
                        icon="hero-pencil"
                        label={gettext("Edit")}
                        variant="primary"
                      />
                      <.table_row_menu_divider />
                      <.table_row_menu_button
                        phx-click="request_delete_role"
                        phx-value-role_uuid={role.uuid}
                        phx-value-role_name={role.name}
                        icon="hero-trash"
                        label={gettext("Delete")}
                        variant="error"
                      />
                    <% else %>
                      <li class="px-3 py-2 text-xs text-base-content/50 italic select-none">
                        {gettext("Protected")}
                      </li>
                    <% end %>
                    <%= if @can_manage_permissions && !MapSet.member?(@uneditable_role_uuids, to_string(role.uuid)) do %>
                      <.table_row_menu_divider />
                      <.table_row_menu_button
                        phx-click="show_permissions_editor"
                        phx-value-role_uuid={role.uuid}
                        icon="hero-key"
                        label={gettext("Permissions")}
                        variant="secondary"
                      />
                    <% end %>
                  </.table_row_menu>
                </.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="columns-1 md:columns-2 gap-x-6">
            <%= 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 break-inside-avoid">
                <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>
      <% 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>
