<div class="container flex flex-col mx-auto px-4 py-6">
  <.admin_page_header
    back={PhoenixKit.Utils.Routes.path("/admin/settings")}
    title={gettext("Referrals Settings")}
    subtitle={gettext("Configure referrals behavior and limits")}
  />

  <%!-- Main Content --%>
  <div class="space-y-8">
    <%!-- Status Card --%>
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title text-2xl mb-4">
          <.icon name="hero-cog-6-tooth" class="w-6 h-6" /> {gettext("Status")}
        </h2>

        <%= if @referral_codes_enabled do %>
          <div class="divider"></div>

          <div class="form-control">
            <label class="label cursor-pointer">
              <span class="label-text text-lg">
                <span class="font-semibold">{gettext("Require Referrals")}</span>
                <div class="text-sm text-base-content/70 mt-1">
                  {gettext("Make referrals mandatory for user registration")}
                </div>
              </span>
              <input
                type="checkbox"
                class="toggle toggle-secondary"
                checked={@referral_codes_required}
                phx-click="toggle_referral_codes_required"
              />
            </label>
          </div>
        <% end %>
      </div>
    </div>

    <%= if @referral_codes_enabled do %>
      <%!-- Usage Limits Card --%>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title text-2xl mb-4">
            <.icon name="hero-scale" class="w-6 h-6" /> {gettext("Usage Limits")}
          </h2>

          <%!-- Max Uses Per Referral --%>
          <div class="form-control mb-4">
            <label class="label">
              <span class="label-text text-lg font-semibold">{gettext("Maximum Uses Per Referral")}</span>
            </label>
            <div class="input-group">
              <input
                type="number"
                placeholder={gettext("Enter max uses")}
                class="input input-bordered w-full max-w-xs"
                value={@max_uses_per_code}
                min="1"
                max="10000"
                phx-blur="update_max_uses_per_code"
                phx-value-max_uses_per_code={assigns[:max_uses_per_code]}
              />
              <span class="bg-base-200 px-4 py-3 text-sm">{gettext("uses")}</span>
            </div>
            <label class="label">
              <span class="label-text-alt text-base-content/70">
                {gettext("How many times each referral can be used (1-10,000)")}
              </span>
            </label>
          </div>

          <%!-- Max Referrals Per User --%>
          <div class="form-control">
            <label class="label">
              <span class="label-text text-lg font-semibold">{gettext("Maximum Referrals Per User")}</span>
            </label>
            <div class="input-group">
              <input
                type="number"
                placeholder={gettext("Enter max referrals")}
                class="input input-bordered w-full max-w-xs"
                value={@max_codes_per_user}
                min="1"
                max="1000"
                phx-blur="update_max_codes_per_user"
                phx-value-max_codes_per_user={assigns[:max_codes_per_user]}
              />
              <span class="bg-base-200 px-4 py-3 text-sm">{gettext("referrals")}</span>
            </div>
            <label class="label">
              <span class="label-text-alt text-base-content/70">
                {gettext("How many referrals each user can create (1-1,000)")}
              </span>
            </label>
          </div>
        </div>
      </div>

      <%!-- Current Configuration Summary --%>
      <div class="alert alert-info">
        <.icon name="hero-information-circle" class="w-5 h-5" />
        <div>
          <h3 class="font-bold">{gettext("Current Configuration")}</h3>
          <div class="text-sm mt-1">
            <p>
              {gettext("Status:")}
              <span class="font-semibold">
                {if @referral_codes_enabled, do: gettext("Enabled"), else: gettext("Disabled")}
              </span>
            </p>
            <%= if @referral_codes_enabled do %>
              <p>
                {gettext("Required:")}
                <span class="font-semibold">
                  {if @referral_codes_required, do: gettext("Yes"), else: gettext("No")}
                </span>
              </p>
              <p>
                {gettext("Max uses per referral:")}
                <span class="font-semibold">{@max_uses_per_code}</span>
              </p>
              <p>
                {gettext("Max referrals per user:")}
                <span class="font-semibold">{@max_codes_per_user}</span>
              </p>
            <% end %>
          </div>
        </div>
      </div>
    <% else %>
      <%!-- Disabled State Information --%>
      <div class="alert alert-warning">
        <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
        <div>
          <h3 class="font-bold">{gettext("Referrals Disabled")}</h3>
          <p class="text-sm mt-1">
            {gettext(
              "Enable referrals above to access configuration options and allow users to create referrals."
            )}
          </p>
        </div>
      </div>
    <% end %>
  </div>
</div>