<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Modules"
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin")}
      title="Modules"
      subtitle="Manage modules"
    />

    <%!-- Dependency warnings --%>
    <div :if={@dep_warnings != []} class="mb-4 space-y-2">
      <div
        :for={w <- @dep_warnings}
        class="alert alert-warning flex items-center gap-2 py-2 text-sm"
      >
        <.icon name="hero-exclamation-triangle" class="w-4 h-4 shrink-0" />
        <span>
          <strong>{w.module_name}</strong>
          requires the <strong>{w.requires_key}</strong>
          module to be enabled.
          Some features may not work correctly.
        </span>
      </div>
    </div>

    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <%!-- Storage Module --%>
      <%= if "storage" in @accessible_modules do %>
        <% cfg = @module_configs["storage"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Storage"
          description="Distributed file storage system with multi-location redundancy and automatic failover"
          icon="💾"
          enabled={cfg[:module_enabled]}
          toggle_event="toggle_module"
          toggle_key="storage"
          show_toggle={false}
        >
          <:status_badges>
            <span class="badge badge-success z-0">Always Enabled</span>
            <span class="badge badge-info z-0">Core System</span>
          </:status_badges>

          <:action_buttons>
            <.link
              navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media")}
              class="btn btn-primary btn-sm"
            >
              <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
            </.link>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Total Buckets:</span>
                <span class="font-medium">{cfg[:buckets_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Active:</span>
                <span class="font-medium">{cfg[:active_buckets_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Referral Codes Module --%>
      <%= if "referrals" in @accessible_modules do %>
        <% cfg = @module_configs["referrals"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Referral Codes"
          description="Manage referral codes for user registration and monitoring"
          icon="🎫"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="referrals"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] do %>
              <span class="badge badge-outline ml-2 whitespace-nowrap">
                {if cfg[:required], do: "Required", else: "Optional"}
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:enabled] do %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/referral-codes")}
                class="btn btn-primary btn-sm"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/users/referral-codes")}
                class="btn btn-outline btn-sm"
              >
                <.icon name="hero-users" class="w-4 h-4 mr-1" /> Manage Codes
              </.link>
            <% else %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/referral-codes")}
                class="btn btn-outline btn-sm"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
            <% end %>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Max per user:</span>
                <span class="font-medium">{cfg[:max_codes_per_user]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Max uses:</span>
                <span class="font-medium">{cfg[:max_uses_per_code]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Email Module --%>
      <%= if "emails" in @accessible_modules do %>
        <% cfg = @module_configs["emails"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Emails"
          description="Track and analyze all outgoing emails with delivery events"
          icon="📧"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="emails"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] do %>
              <span class="badge badge-outline ml-2 whitespace-nowrap">
                {if cfg[:save_body], do: "Body Saved", else: "Headers Only"}
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col items-stretch space-y-2">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/emails")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
                <div class="flex gap-2">
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/emails")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-envelope" class="w-4 h-4 mr-1" /> Emails
                  </.link>
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/emails/templates")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-document-text" class="w-4 h-4 mr-1" /> Templates
                  </.link>
                </div>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/emails")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">SES Events:</span>
                <span class="font-medium">
                  {if cfg[:ses_events], do: "On", else: "Off"}
                </span>
              </div>
              <div>
                <span class="text-base-content/70">Retention:</span>
                <span class="font-medium">{cfg[:retention_days]} days</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Newsletters Module --%>
      <%= if "newsletters" in @accessible_modules do %>
        <% cfg = @module_configs["newsletters"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Newsletters"
          description="Email broadcasts and subscription management"
          icon="📨"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="newsletters"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= unless mcfg(@module_configs, "emails", :enabled, false) do %>
              <span class="badge badge-warning">Requires Emails</span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:enabled] do %>
              <div class="flex gap-2">
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/newsletters/broadcasts")}
                  class="btn btn-outline btn-sm flex-1"
                >
                  <.icon name="hero-paper-airplane" class="w-4 h-4 mr-1" /> Broadcasts
                </.link>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/newsletters/lists")}
                  class="btn btn-outline btn-sm flex-1"
                >
                  <.icon name="hero-list-bullet" class="w-4 h-4 mr-1" /> Lists
                </.link>
              </div>
            <% end %>
          </:action_buttons>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Languages Module --%>
      <%= if "languages" in @accessible_modules do %>
        <% cfg = @module_configs["languages"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Languages"
          description="Manage language module and translations"
          icon="🌐"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="languages"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] do %>
              <span class="badge badge-outline ml-2 whitespace-nowrap">
                {if cfg[:default_language],
                  do: cfg[:default_language].name,
                  else: "No Default"}
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:enabled] do %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/languages")}
                class="btn btn-primary btn-sm"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
            <% else %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/languages")}
                class="btn btn-outline btn-sm"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
            <% end %>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Total languages:</span>
                <span class="font-medium">{cfg[:language_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Enabled:</span>
                <span class="font-medium">{cfg[:enabled_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Entities Module --%>
      <%= if "entities" in @accessible_modules do %>
        <% cfg = @module_configs["entities"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title={gettext("Entities")}
          description={
            gettext("Define custom content types with flexible fields — no migrations required")
          }
          icon="📦"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="entities"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: gettext("Enabled"), else: gettext("Disabled")}
            </span>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:enabled] do %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/entities")}
                class="btn btn-sm btn-primary"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" />
                {gettext("Configure")}
              </.link>
            <% else %>
              <span class="text-xs text-base-content/50 text-center">
                Enable module to access settings
              </span>
            <% end %>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">{gettext("Total Entities:")}</span>
                <span class="font-medium">{cfg[:entity_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">{gettext("Data Records:")}</span>
                <span class="font-medium">{cfg[:total_data_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Publishing Module --%>
      <%= if "publishing" in @accessible_modules do %>
        <% cfg = @module_configs["publishing"] || %{} %>
        <% lang = @module_configs["languages"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Publishing"
          description="Publish date-based blog posts and company updates with multi-language support"
          icon="📰"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="publishing"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: gettext("Enabled"), else: gettext("Disabled")}
            </span>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={
                    PhoenixKit.Utils.Routes.path("/admin/publishing",
                      locale: @current_locale || "en"
                    )
                  }
                  class="btn btn-sm btn-primary"
                >
                  <.icon name="hero-document-text" class="w-4 h-4 mr-1" /> {gettext("Open")}
                </.link>
                <.link
                  navigate={
                    PhoenixKit.Utils.Routes.path("/admin/settings/publishing",
                      locale: @current_locale || "en"
                    )
                  }
                  class="btn btn-sm btn-outline"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> {gettext("Configure")}
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to access settings
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <% url_prefix =
              PhoenixKit.Config.get_url_prefix()
              |> case do
                "/" -> ""
                prefix -> prefix
              end

            # Determine default language base code for URL display
            default_lang_code =
              if lang[:enabled] && lang[:default_language] do
                lang[:default_language].code
                |> PhoenixKit.Modules.Languages.DialectMapper.extract_base()
              else
                nil
              end %>

            <div class="space-y-1.5">
              <div>
                <span class="font-medium text-base-content">
                  {gettext("Post files on disk:")}
                </span>
                <code class="font-mono text-xs bg-base-300/60 rounded px-2 py-0.5 break-all">
                  priv/publishing/&lt;group&gt;/&lt;slug&gt;/&lt;locale&gt;.phk
                </code>
              </div>
              <%= if lang[:enabled] && default_lang_code do %>
                <div>
                  <span class="font-medium text-base-content">
                    {gettext("Default language (%{lang}):", lang: default_lang_code)}
                  </span>
                  <code class="font-mono text-xs bg-base-300/60 rounded px-2 py-0.5 break-all">
                    {url_prefix}/:blog_slug/:post_slug
                  </code>
                </div>
                <div>
                  <span class="font-medium text-base-content">
                    {gettext("Other languages:")}
                  </span>
                  <code class="font-mono text-xs bg-base-300/60 rounded px-2 py-0.5 break-all">
                    {url_prefix}/:locale/:blog_slug/:post_slug
                  </code>
                </div>
              <% else %>
                <div>
                  <span class="font-medium text-base-content">
                    {gettext("Public URL pattern:")}
                  </span>
                  <code class="font-mono text-xs bg-base-300/60 rounded px-2 py-0.5 break-all">
                    {url_prefix}/:blog_slug/:post_slug
                  </code>
                </div>
              <% end %>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Posts Module --%>
      <%= if "posts" in @accessible_modules do %>
        <% cfg = @module_configs["posts"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Posts"
          description="User-generated content with comments, likes, tags, and groups"
          icon="📝"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="posts"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/posts")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-document-text" class="w-4 h-4 mr-1" /> Manage Posts
                </.link>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/posts")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Settings
                </.link>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/posts")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-3 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Total:</span>
                <span class="font-medium">{cfg[:total_posts]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Published:</span>
                <span class="font-medium">{cfg[:published_posts]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Drafts:</span>
                <span class="font-medium">{cfg[:draft_posts]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Comments Module --%>
      <%= if "comments" in @accessible_modules do %>
        <% cfg = @module_configs["comments"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Comments"
          description="Threaded comments with likes, moderation, and reactions across all content types"
          icon="💬"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="comments"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:pending_comments] > 0 do %>
              <span class="badge badge-warning ml-2 whitespace-nowrap">
                {cfg[:pending_comments]} pending
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/comments")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-chat-bubble-left-right" class="w-4 h-4 mr-1" />
                  Manage Comments
                </.link>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/comments")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Settings
                </.link>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/comments")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-3 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Total:</span>
                <span class="font-medium">{cfg[:total_comments]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Published:</span>
                <span class="font-medium">{cfg[:published_comments]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Pending:</span>
                <span class="font-medium">{cfg[:pending_comments]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Customer Service Module --%>
      <%= if "customer_service" in @accessible_modules do %>
        <% cfg = @module_configs["customer_service"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Customer Service"
          description="Customer support ticketing system with internal notes and status tracking"
          icon="🎫"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="customer_service"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:open_tickets] > 0 do %>
              <span class="badge badge-warning ml-2 whitespace-nowrap">
                {cfg[:open_tickets]} open
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-ticket" class="w-4 h-4 mr-1" /> Manage Tickets
                </.link>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/customer-service")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Settings
                </.link>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/customer-service")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-3 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Total:</span>
                <span class="font-medium">{cfg[:total_tickets]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Open:</span>
                <span class="font-medium">{cfg[:open_tickets]}</span>
              </div>
              <div>
                <span class="text-base-content/70">In Progress:</span>
                <span class="font-medium">{cfg[:in_progress_tickets]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Connections Module --%>
      <%= if "connections" in @accessible_modules do %>
        <% cfg = @module_configs["connections"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Connections"
          description="Social relationships with one-way follows and mutual connections"
          icon="🤝"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="connections"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/connections")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-users" class="w-4 h-4 mr-1" /> Overview
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to manage connections
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-3 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Follows:</span>
                <span class="font-medium">{cfg[:follows_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Connections:</span>
                <span class="font-medium">{cfg[:connections_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Blocks:</span>
                <span class="font-medium">{cfg[:blocks_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- SEO Module --%>
      <%= if "seo" in @accessible_modules do %>
        <% cfg = @module_configs["seo"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="SEO"
          description="Manage search engine optimization controls for your application"
          icon="🔍"
          enabled={cfg[:module_enabled]}
          toggle_event="toggle_module"
          toggle_key="seo"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:module_enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:module_enabled], do: "Enabled", else: "Disabled"}
            </span>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:module_enabled] do %>
              <.link
                navigate={
                  PhoenixKit.Utils.Routes.path("/admin/settings/seo",
                    locale: @current_locale || "en"
                  )
                }
                class="btn btn-sm w-full btn-primary"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
            <% else %>
              <span class="text-xs text-base-content/50 text-center">
                Enable module to access settings
              </span>
            <% end %>
          </:action_buttons>

          <:stats>
            <div class="text-sm">
              <span class="text-base-content/70">Noindex:</span>
              <span class="ml-2 font-medium">
                {if cfg[:no_index_enabled], do: "On", else: "Off"}
              </span>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Sitemap Module --%>
      <%= if "sitemap" in @accessible_modules do %>
        <% cfg = @module_configs["sitemap"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Sitemap"
          description="Generate XML sitemaps for search engines with styled browser display"
          icon="🗺️"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="sitemap"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:schedule_enabled] do %>
              <span class="badge badge-outline ml-2 whitespace-nowrap">
                Auto-regenerate
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={
                    PhoenixKit.Utils.Routes.path("/admin/settings/sitemap",
                      locale: :none
                    )
                  }
                  class="btn btn-sm btn-primary"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
                <.link
                  href={PhoenixKit.Utils.Routes.path("/sitemap.xml", locale: :none)}
                  target="_blank"
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-arrow-top-right-on-square" class="w-4 h-4 mr-1" /> Sitemap
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to access settings
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">URLs:</span>
                <span class="font-medium">{cfg[:url_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Last gen:</span>
                <span class="font-medium">
                  {format_timestamp(cfg[:last_generated])}
                </span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Billing Module --%>
      <%= if "billing" in @accessible_modules do %>
        <% cfg = @module_configs["billing"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Billing"
          description="Orders, invoices, billing profiles and multi-currency support"
          icon="💰"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="billing"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <div class="flex gap-2">
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/billing")}
                    class="btn btn-primary btn-sm flex-1"
                  >
                    <.icon name="hero-banknotes" class="w-4 h-4 mr-1" /> Dashboard
                  </.link>
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Settings
                  </.link>
                </div>
                <div class="flex gap-2">
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/billing/orders")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-clipboard-document-list" class="w-4 h-4 mr-1" /> Orders
                  </.link>
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/billing/invoices")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-document-text" class="w-4 h-4 mr-1" /> Invoices
                  </.link>
                </div>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/billing")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-3 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Orders:</span>
                <span class="font-medium">{cfg[:orders_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Invoices:</span>
                <span class="font-medium">{cfg[:invoices_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Currencies:</span>
                <span class="font-medium">{cfg[:currencies_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- AI Module --%>
      <%= if "ai" in @accessible_modules do %>
        <% cfg = @module_configs["ai"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="AI"
          description="AI provider accounts and text processing with OpenRouter integration"
          icon="🤖"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="ai"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:endpoints_count] > 0 do %>
              <span class="badge badge-outline ml-2 whitespace-nowrap">
                {cfg[:endpoints_count]} endpoint{if cfg[:endpoints_count] != 1, do: "s"}
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/ai")}
                  class="btn btn-sm btn-primary"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Manage
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to access settings
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Endpoints:</span>
                <span class="font-medium">{cfg[:endpoints_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Requests:</span>
                <span class="font-medium">{cfg[:total_requests]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Pages module remains disabled but code retained for future use --%>

      <%!-- Under Construction (Maintenance Mode) Module --%>
      <%= if "maintenance" in @accessible_modules do %>
        <% cfg = @module_configs["maintenance"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Maintenance Mode"
          description="Show maintenance page to non-admin users while you work on the site"
          icon="🚧"
          enabled={cfg[:module_enabled]}
          toggle_event="toggle_module"
          toggle_key="maintenance"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:module_enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:module_enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:module_enabled] do %>
              <span class={[
                "badge badge-outline ml-2 whitespace-nowrap",
                if(cfg[:enabled], do: "badge-warning", else: "badge-info")
              ]}>
                {if cfg[:enabled], do: "Maintenance Active", else: "Maintenance Off"}
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:module_enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/maintenance")}
                  class="btn btn-sm btn-primary"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
                <div class="text-xs text-base-content/70 mt-2">
                  <strong>Header:</strong>
                  {cfg[:header]}
                </div>
                <div class="text-xs text-base-content/70">
                  <strong>Message:</strong>
                  {cfg[:subtext]}
                </div>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/maintenance")}
                  class="btn btn-sm btn-outline"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="text-xs text-base-content/70">
              {if cfg[:module_enabled],
                do: "Activate maintenance mode in settings to block non-admin users",
                else: "Enable module to access maintenance mode settings"}
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Sync Module --%>
      <%= if "sync" in @accessible_modules do %>
        <% cfg = @module_configs["sync"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Sync"
          description="Sync data between PhoenixKit instances in real-time"
          icon="🔄"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="sync"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:active_sessions] > 0 do %>
              <span class="badge badge-outline badge-warning ml-2 whitespace-nowrap">
                {cfg[:active_sessions]} active
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/sync")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" /> Open Sync
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to start syncing data
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="text-xs text-base-content/70">
              {if cfg[:enabled],
                do: "Sync data between dev, staging, and production environments",
                else: "Enable to sync data between PhoenixKit sites"}
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- DB Module --%>
      <%= if "db" in @accessible_modules do %>
        <% cfg = @module_configs["db"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="DB"
          description="Explore database tables and their contents"
          icon="🗃️"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="db"
          stats_title="Current Stats"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/db")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-table-cells" class="w-4 h-4 mr-1" /> Open DB
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to browse database tables
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Tables</span>
                <div class="font-semibold">
                  <.formatted_number number={cfg[:table_count]} />
                </div>
              </div>
              <div>
                <span class="text-base-content/70">Rows</span>
                <div class="font-semibold">
                  <.formatted_number number={cfg[:approx_rows]} format={:short} />
                </div>
              </div>
              <div>
                <span class="text-base-content/70">Tables size</span>
                <div class="font-semibold">
                  {format_bytes(cfg[:total_size_bytes])}
                </div>
              </div>
              <div>
                <span class="text-base-content/70">Database size</span>
                <div class="font-semibold">
                  {format_bytes(cfg[:database_size_bytes])}
                </div>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Jobs Module --%>
      <%= if "jobs" in @accessible_modules do %>
        <% cfg = @module_configs["jobs"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Jobs"
          description="View-only dashboard for background job status and history"
          icon="⚙️"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="jobs"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:stats].executing > 0 do %>
              <span class="badge badge-outline badge-warning ml-2 whitespace-nowrap">
                {cfg[:stats].executing} running
              </span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/jobs")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-queue-list" class="w-4 h-4 mr-1" /> View Jobs
                </.link>
              <% else %>
                <span class="text-xs text-base-content/50 text-center">
                  Enable module to view background jobs
                </span>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-4 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Available:</span>
                <span class="font-medium">{cfg[:stats].available}</span>
              </div>
              <div>
                <span class="text-base-content/70">Completed:</span>
                <span class="font-medium">{cfg[:stats].completed}</span>
              </div>
              <div>
                <span class="text-base-content/70">Retryable:</span>
                <span class="font-medium">{cfg[:stats].retryable}</span>
              </div>
              <div>
                <span class="text-base-content/70">Discarded:</span>
                <span class="font-medium">{cfg[:stats].discarded}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- Legal Module --%>
      <%= if "legal" in @accessible_modules do %>
        <% cfg = @module_configs["legal"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="Legal"
          description="GDPR/CCPA compliance with consent tracking, cookie banners, and legal page generation"
          icon="⚖️"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="legal"
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if cfg[:enabled] and cfg[:publishing_enabled] do %>
              <span class="badge badge-info ml-2">Publishing Ready</span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <%= if cfg[:enabled] do %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings/legal")}
                class="btn btn-primary btn-sm"
              >
                <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
              </.link>
            <% else %>
              <span class="text-xs text-base-content/50 text-center">
                Enable module to access settings
              </span>
            <% end %>
          </:action_buttons>

          <:stats>
            <div class="text-xs text-base-content/70">
              <p>Privacy Policy • Terms of Service • Cookie Policy</p>
              <p class="mt-1">CCPA Notice • Data Retention • Acceptable Use</p>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>

      <%!-- E-Commerce Module --%>
      <%= if "shop" in @accessible_modules do %>
        <% cfg = @module_configs["shop"] || %{} %>
        <% billing_cfg = @module_configs["billing"] || %{} %>
        <PhoenixKitWeb.Components.Core.ModuleCard.module_card
          title="E-Commerce"
          description="Physical and digital products with cart and checkout"
          icon="🛒"
          enabled={cfg[:enabled]}
          toggle_event="toggle_module"
          toggle_key="shop"
          toggle_disabled={not billing_cfg[:enabled]}
          toggle_hint={if not billing_cfg[:enabled], do: "Billing Required"}
        >
          <:status_badges>
            <span class={[
              "badge",
              if(cfg[:enabled], do: "badge-success", else: "badge-neutral")
            ]}>
              {if cfg[:enabled], do: "Enabled", else: "Disabled"}
            </span>
            <%= if not cfg[:enabled] and billing_cfg[:enabled] do %>
              <span class="badge badge-info ml-2">Billing Ready</span>
            <% end %>
          </:status_badges>

          <:action_buttons>
            <div class="flex flex-col gap-2 w-full">
              <%= if cfg[:enabled] do %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/shop")}
                  class="btn btn-primary btn-sm"
                >
                  <.icon name="hero-shopping-bag" class="w-4 h-4 mr-1" /> Dashboard
                </.link>
                <div class="flex gap-2">
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/shop/products")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-cube" class="w-4 h-4 mr-1" /> Products
                  </.link>
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/shop/settings")}
                    class="btn btn-outline btn-sm flex-1"
                  >
                    <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Settings
                  </.link>
                </div>
              <% else %>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/shop/settings")}
                  class="btn btn-outline btn-sm"
                >
                  <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" /> Configure
                </.link>
              <% end %>
            </div>
          </:action_buttons>

          <:stats>
            <div class="grid grid-cols-2 gap-2 text-xs">
              <div>
                <span class="text-base-content/70">Products:</span>
                <span class="font-medium">{cfg[:products_count]}</span>
              </div>
              <div>
                <span class="text-base-content/70">Categories:</span>
                <span class="font-medium">{cfg[:categories_count]}</span>
              </div>
            </div>
          </:stats>
        </PhoenixKitWeb.Components.Core.ModuleCard.module_card>
      <% end %>
      <%!-- External Modules (auto-discovered) --%>
      <%= for ext <- @external_modules, ext.key in @accessible_modules do %>
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <div class="flex items-center">
              <div class="text-3xl px-3 mr-4">
                <%= if String.starts_with?(ext.icon, "hero-") do %>
                  <.icon name={ext.icon} class="w-8 h-8" />
                <% else %>
                  {ext.icon}
                <% end %>
              </div>
              <div class="flex-1">
                <h3 class="card-title text-xl">{ext.name}</h3>
                <p class="text-base-content/70">{ext.description}</p>
              </div>
              <div class="flex flex-col items-end gap-1">
                <input
                  type="checkbox"
                  class="toggle toggle-primary"
                  checked={ext.enabled}
                  phx-click="toggle_module"
                  phx-value-key={ext.key}
                />
              </div>
            </div>

            <div class="divider my-2"></div>

            <div class="flex items-center justify-between flex-wrap gap-2">
              <div class="flex flex-wrap gap-1">
                <span class={[
                  "badge",
                  if(ext.enabled, do: "badge-success", else: "badge-neutral")
                ]}>
                  {if ext.enabled, do: "Enabled", else: "Disabled"}
                </span>
                <span class="badge badge-outline">v{ext.version}</span>
                <span class="badge badge-info badge-outline">External</span>
              </div>
              <span class="text-xs text-base-content/50">
                {if ext.enabled, do: "Module is active", else: "Enable to activate"}
              </span>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <%!-- Available Packages (known but not installed) --%>
    <%= if @not_installed_packages != [] do %>
      <div class="mt-8">
        <h2 class="text-lg font-semibold mb-3 text-base-content/70">Available Packages</h2>
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <%= for pkg <- @not_installed_packages do %>
            <div class="card bg-base-100 shadow border-2 border-dashed border-base-300">
              <div class="card-body">
                <div class="flex items-center gap-3">
                  <div class="text-3xl opacity-60">{pkg.icon}</div>
                  <div class="flex-1">
                    <h3 class="card-title text-base-content/70">{pkg.name}</h3>
                    <p class="text-sm text-base-content/50">{pkg.description}</p>
                  </div>
                </div>

                <div class="divider my-2"></div>

                <div class="flex items-center justify-between gap-2 flex-wrap">
                  <span class="badge badge-ghost badge-outline">Not installed</span>
                  <a href={pkg.hex_url} target="_blank" class="btn btn-xs btn-outline">
                    <.icon name="hero-arrow-top-right-on-square" class="w-3 h-3" /> Hex.pm
                  </a>
                </div>

                <div class="mt-2">
                  <p class="text-xs text-base-content/40 mb-1">Add to mix.exs:</p>
                  <code class="block text-xs bg-base-200 rounded p-2 font-mono">
                    {~s|{:#{pkg.hex_package}, "~> 0.1"}|}
                  </code>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>

    <%!-- Module Management Help --%>
    <div class="alert alert-info mt-6">
      <.icon name="hero-information-circle" class="w-5 h-5" />
      <div>
        <h3 class="font-bold">Module Management</h3>
        <p class="text-sm">
          Each module can be enabled or disabled using the toggle switches above.
          Click "Configure" to access detailed settings for each module on dedicated pages.
        </p>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
