<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="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 relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={PhoenixKit.Utils.Routes.path("/admin")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> Back to Dashboard
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">Role Management</h1>
        <p class="text-lg text-base-content">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" /> Create New Role
      </button>
    </div>

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

    <%!-- Edit Role Modal --%>
    <.modal show={@show_edit_form} on_close="hide_form" max_width="2xl">
      <:title>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="Role Name *"
            placeholder="Enter role name (e.g., Manager, Editor)"
            maxlength="50"
            required
          />
          <p class="label mt-1">Must be unique, 1-50 characters.</p>
        </div>
        <div class="form-control">
          <.textarea
            field={@edit_role_form[:description]}
            label="Description"
            placeholder="Describe what this role can do (optional)"
            maxlength="500"
          />
          <p class="label mt-1">Optional, up to 500 characters.</p>
        </div>
      </form>
      <:actions>
        <button type="button" phx-click="hide_form" class="btn btn-outline">Cancel</button>
        <button type="submit" form="edit-role-form" class="btn btn-primary">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>Role</.table_default_header_cell>
              <.table_default_header_cell>Type</.table_default_header_cell>
              <.table_default_header_cell>Description</.table_default_header_cell>
              <.table_default_header_cell>Users</.table_default_header_cell>
              <.table_default_header_cell>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">System Role</span>
                  <% else %>
                    <span class="badge badge-success badge-sm">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">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">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" /> 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" /> Delete
                      </button>
                    <% else %>
                      <span class="badge badge-ghost badge-sm">Protected</span>
                    <% end %>

                    <%!-- Permissions Button (users permission required, not for Owner role) --%>
                    <%= if assigns[:phoenix_kit_current_scope] && PhoenixKit.Users.Auth.Scope.has_module_access?(assigns[:phoenix_kit_current_scope], "users") && role.name != "Owner" 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" /> 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">
            No roles found
          </h3>
          <p class="text-base-content/70 mb-4">
            Start by creating your first custom role.
          </p>
          <button
            phx-click="show_create_form"
            class="btn btn-primary"
          >
            Create First Role
          </button>
        </div>
      <% end %>
    </div>

    <%!-- Role Statistics --%>
    <div class="mt-8">
      <h3 class="text-lg font-semibold text-base-content mb-6">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="System Roles"
          subtitle="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="Custom Roles"
          subtitle="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="Total Roles"
          subtitle="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="Delete Role"
      title_icon="hero-trash"
      danger={true}
      messages={[
        {:warning,
         "Are you sure you want to delete the role \"#{Map.get(@delete_confirmation, :role_name, "")}\"? This action cannot be undone."}
      ]}
      confirm_text="Delete Role"
    />

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

      <p class="text-sm text-base-content/70 mb-4">
        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">
          Grant All
        </button>
        <button phx-click="revoke_all_permissions" class="btn btn-xs btn-outline btn-error">
          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">
            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">
            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>

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

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