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

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">Modules Management</h1>
        <p class="text-lg text-base-content">Manage system modules and extensions</p>
      </div>
    </header>

    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title text-xl mb-6">Available Modules</h2>

        <%!-- Referral Codes Module --%>
        <div class="border border-base-300 rounded-lg p-6 mb-4">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <div class="text-2xl mr-3">🎫</div>
              <div>
                <h3 class="text-lg font-semibold text-base-content">Referral Codes System</h3>
                <p class="text-sm text-base-content/70">
                  Manage referral codes for user registration and tracking
                </p>
              </div>
            </div>

            <div class="form-control">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  class="toggle toggle-primary"
                  checked={@referral_codes_enabled}
                  phx-click="toggle_referral_codes"
                  phx-value-enabled="toggle"
                />
              </label>
            </div>
          </div>

          <%!-- Module Settings (shown when enabled) --%>
          <%= if @referral_codes_enabled do %>
            <div class="bg-base-200 rounded-lg p-4 mt-4">
              <h4 class="font-medium text-base-content mb-3">Module Settings</h4>

              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Required for Registration
                  </span>
                  <p class="text-xs text-base-content/70">
                    When enabled, users must provide a valid referral code to register
                  </p>
                </div>

                <div class="form-control">
                  <label class="label cursor-pointer">
                    <input
                      type="checkbox"
                      class="toggle toggle-secondary toggle-sm"
                      checked={@referral_codes_required}
                      phx-click="toggle_referral_codes_required"
                      phx-value-required="toggle"
                    />
                  </label>
                </div>
              </div>

              <%!-- Max Codes Per User Setting --%>
              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Max Codes Per User
                  </span>
                  <p class="text-xs text-base-content/70">
                    Maximum number of referral codes each user can create
                  </p>
                </div>

                <div class="form-control">
                  <form phx-change="update_max_codes_per_user">
                    <input
                      type="number"
                      name="max_codes_per_user"
                      class="input input-bordered input-sm w-20 text-center"
                      value={@max_codes_per_user}
                      min="1"
                      max="1000"
                      phx-debounce="1000"
                    />
                  </form>
                </div>
              </div>

              <%!-- Max Uses Per Code Setting --%>
              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Max Uses Per Code
                  </span>
                  <p class="text-xs text-base-content/70">
                    Maximum number of times any single referral code can be used
                  </p>
                </div>

                <div class="form-control">
                  <form phx-change="update_max_uses_per_code">
                    <input
                      type="number"
                      name="max_uses_per_code"
                      class="input input-bordered input-sm w-20 text-center"
                      value={@max_uses_per_code}
                      min="1"
                      max="10000"
                      phx-debounce="1000"
                    />
                  </form>
                </div>
              </div>

              <div class="flex justify-between items-center mt-4">
                <div class="text-xs text-base-content/60">
                  Status:
                  <span class="font-medium">
                    {if @referral_codes_required, do: "Required", else: "Optional"}
                  </span>
                </div>

                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/users/referral-codes")}
                  class="btn btn-outline btn-primary btn-sm"
                >
                  <PhoenixKitWeb.Components.Core.Icons.icon_settings class="w-4 h-4 mr-1" />
                  Manage Codes
                </.link>
              </div>
            </div>
          <% end %>
        </div>

        <%!-- Email Module --%>
        <div class="border border-base-300 rounded-lg p-6 mb-4">
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <div class="text-2xl mr-3">📧</div>
              <div>
                <h3 class="text-lg font-semibold text-base-content">Email System</h3>
                <p class="text-sm text-base-content/70">
                  Track and analyze all outgoing emails with delivery events
                </p>
              </div>
            </div>

            <div class="form-control">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  class="toggle toggle-primary"
                  checked={@email_tracking_enabled}
                  phx-click="toggle_email_tracking"
                />
              </label>
            </div>
          </div>

          <%!-- Module Settings (shown when enabled) --%>
          <%= if @email_tracking_enabled do %>
            <div class="bg-base-200 rounded-lg p-4 mt-4">
              <h4 class="font-medium text-base-content mb-3">Module Settings</h4>

              <%!-- Save Email Body Setting --%>
              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Save Full Email Body
                  </span>
                  <p class="text-xs text-base-content/70">
                    Store complete email content for debugging (uses more storage)
                  </p>
                </div>
                <div class="form-control">
                  <label class="label cursor-pointer">
                    <input
                      type="checkbox"
                      class="toggle toggle-secondary toggle-sm"
                      checked={@email_tracking_save_body}
                      phx-click="toggle_email_tracking_save_body"
                    />
                  </label>
                </div>
              </div>

              <%!-- SES Events Setting --%>
              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Track AWS SES Events
                  </span>
                  <p class="text-xs text-base-content/70">
                    Receive delivery, bounce, and complaint events from AWS SES
                  </p>
                </div>
                <div class="form-control">
                  <label class="label cursor-pointer">
                    <input
                      type="checkbox"
                      class="toggle toggle-secondary toggle-sm"
                      checked={@email_tracking_ses_events}
                      phx-click="toggle_email_tracking_ses_events"
                    />
                  </label>
                </div>
              </div>

              <%!-- Retention Days Setting --%>
              <div class="flex items-center justify-between mb-4">
                <div>
                  <span class="text-sm font-medium text-base-content">
                    Retention Days
                  </span>
                  <p class="text-xs text-base-content/70">
                    How long to keep email logs before automatic cleanup
                  </p>
                </div>
                <div class="form-control">
                  <form phx-change="update_email_tracking_retention">
                    <input
                      type="number"
                      name="retention_days"
                      class="input input-bordered input-sm w-20 text-center"
                      value={@email_tracking_retention_days}
                      min="7"
                      max="365"
                      phx-debounce="1000"
                    />
                  </form>
                </div>
              </div>

              <div class="flex justify-between items-center mt-4">
                <div class="text-xs text-base-content/60">
                  Status: <span class="font-medium text-success">Active</span>
                </div>
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/emails")}
                  class="btn btn-outline btn-primary btn-sm"
                >
                  <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-1" />
                  View Email Logs
                </.link>
              </div>
            </div>
          <% end %>
        </div>

        <%!-- Future Modules Placeholder --%>
        <div class="border border-base-300 rounded-lg p-6 border-dashed">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="text-2xl mr-3 opacity-50">📦</div>
              <div>
                <h3 class="text-lg font-semibold text-base-content/50">
                  More Modules Coming Soon
                </h3>
                <p class="text-sm text-base-content/40">
                  Additional system modules and extensions will be available here
                </p>
              </div>
            </div>

            <div class="form-control">
              <label class="label cursor-pointer">
                <input
                  type="checkbox"
                  class="toggle toggle-primary opacity-50"
                  disabled
                />
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
