<div class="container flex flex-col mx-auto px-4 py-6">
  <.admin_page_header
    back={PhoenixKit.Utils.Routes.path("/admin/modules")}
    title="Referrals"
    subtitle="Manage referrals for user registration"
  />

  <%!-- Stats Cards --%>
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <PhoenixKitWeb.Components.Core.StatCard.stat_card
      compact={true}
      rounded="xl"
      value={@system_stats.total_codes}
      title="Total Codes"
      subtitle="All referrals"
    >
      <:icon>
        <.icon name="hero-ticket" class="w-5 h-5" />
      </:icon>
    </PhoenixKitWeb.Components.Core.StatCard.stat_card>

    <PhoenixKitWeb.Components.Core.StatCard.stat_card
      compact={true}
      rounded="xl"
      value={@system_stats.active_codes}
      title="Active Codes"
      subtitle="Currently available"
    >
      <:icon>
        <.icon name="hero-check-circle" class="w-5 h-5" />
      </:icon>
    </PhoenixKitWeb.Components.Core.StatCard.stat_card>

    <PhoenixKitWeb.Components.Core.StatCard.stat_card
      compact={true}
      rounded="xl"
      value={@system_stats.total_usage}
      title="Total Uses"
      subtitle="Registration count"
    >
      <:icon>
        <.icon name="hero-chart-bar" class="w-5 h-5" />
      </:icon>
    </PhoenixKitWeb.Components.Core.StatCard.stat_card>

    <PhoenixKitWeb.Components.Core.StatCard.stat_card
      compact={true}
      rounded="xl"
      value={@system_stats.codes_with_usage}
      title="Used Codes"
      subtitle="Codes with activity"
    >
      <:icon>
        <.icon name="hero-arrow-trending-up" class="w-5 h-5" />
      </:icon>
    </PhoenixKitWeb.Components.Core.StatCard.stat_card>
  </div>

  <%!-- Status and Actions --%>
  <div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
      <div class="flex justify-between items-center">
        <div>
          <h2 class="card-title text-xl">Status</h2>
          <p class="text-base-content/70">
            Status:
            <span class={"badge #{if @config.enabled, do: "badge-success", else: "badge-error"}"}>
              {if @config.enabled, do: "Enabled", else: "Disabled"}
            </span>
            <%= if @config.enabled do %>
              | Registration:
              <span class={"badge #{if @config.required, do: "badge-warning", else: "badge-info"}"}>
                {if @config.required, do: "Required", else: "Optional"}
              </span>
            <% end %>
          </p>
        </div>

        <%= if @config.enabled do %>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/users/referral-codes/new")}
            class="btn btn-primary"
          >
            <.icon name="hero-plus" class="w-5 h-5 mr-2" /> New Code
          </.link>
        <% else %>
          <div class="text-sm text-base-content/50">
            Enable referrals in Modules to create codes
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <%= if @config.enabled do %>
    <%!-- Referrals Table --%>
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title text-xl mb-4">Referrals</h2>

        <%= if @codes == [] do %>
          <div class="text-center py-12">
            <.icon name="hero-ticket" class="h-16 w-16 mx-auto text-base-content/40 mb-4" />

            <h3 class="text-xl font-semibold text-base-content mb-2">No Referrals</h3>
            <p class="text-base-content/70 max-w-md mx-auto mb-4">
              Create your first referral code to start tracking user registrations.
            </p>

            <.link
              navigate={PhoenixKit.Utils.Routes.path("/admin/users/referral-codes/new")}
              class="btn btn-primary"
            >
              Create First Code
            </.link>
          </div>
        <% else %>
          <.table_default variant="zebra">
            <.table_default_header>
              <.table_default_row>
                <.table_default_header_cell>Code</.table_default_header_cell>
                <.table_default_header_cell>Description</.table_default_header_cell>
                <.table_default_header_cell>Usage</.table_default_header_cell>
                <.table_default_header_cell>Expiration</.table_default_header_cell>
                <.table_default_header_cell>Status</.table_default_header_cell>
                <.table_default_header_cell>Created By</.table_default_header_cell>
                <.table_default_header_cell>Beneficiary</.table_default_header_cell>
                <.table_default_header_cell>Actions</.table_default_header_cell>
              </.table_default_row>
            </.table_default_header>
            <.table_default_body>
              <%= for code <- @codes do %>
                <.table_default_row>
                  <.table_default_cell>
                    <div class="font-mono text-lg font-bold">{code.code}</div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="max-w-xs truncate">{code.description}</div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="flex items-center">
                      <div class="text-sm">
                        {code.number_of_uses} / {code.max_uses}
                      </div>
                      <div class="ml-2 w-20 bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-blue-600 h-2 rounded-full"
                          style={"width: #{min(100, (code.number_of_uses / code.max_uses) * 100)}%"}
                        >
                        </div>
                      </div>
                    </div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <.expiration_date date={code.expiration_date} />
                  </.table_default_cell>
                  <.table_default_cell>
                    <.code_status_badge code={code} />
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="text-sm">
                      <%= if code.creator do %>
                        {code.creator.email}
                      <% else %>
                        <span class="text-gray-500">Unknown</span>
                      <% end %>
                    </div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="text-sm">
                      <%= if code.beneficiary_user do %>
                        {code.beneficiary_user.email}
                      <% else %>
                        <span class="text-gray-500">None</span>
                      <% end %>
                    </div>
                  </.table_default_cell>
                  <.table_default_cell>
                    <div class="flex gap-2">
                      <.link
                        navigate={
                          PhoenixKit.Utils.Routes.path(
                            "/admin/users/referral-codes/edit/#{code.uuid}"
                          )
                        }
                        class="btn btn-sm btn-outline"
                      >
                        <.icon name="hero-pencil" class="w-4 h-4" />
                      </.link>

                      <button
                        class={"btn btn-sm #{if code.status, do: "btn-warning", else: "btn-success"}"}
                        phx-click="toggle_code_status"
                        phx-value-uuid={code.uuid}
                      >
                        {if code.status, do: "Deactivate", else: "Activate"}
                      </button>

                      <button
                        class="btn btn-sm btn-error"
                        phx-click="delete_code"
                        phx-value-uuid={code.uuid}
                        onclick="return confirm('Are you sure you want to delete this referral code?')"
                      >
                        <.icon name="hero-trash" class="w-4 h-4" />
                      </button>
                    </div>
                  </.table_default_cell>
                </.table_default_row>
              <% end %>
            </.table_default_body>
          </.table_default>
        <% end %>
      </div>
    </div>
  <% else %>
    <%!-- System Disabled Message --%>
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body text-center py-12">
        <.icon name="hero-lock-closed" class="h-16 w-16 mx-auto text-base-content/40 mb-4" />
        <h3 class="text-xl font-semibold text-base-content mb-2">
          Referrals Disabled
        </h3>
        <p class="text-base-content/70 max-w-md mx-auto mb-4">
          Referrals are currently disabled. Enable them in the Modules page to start creating and managing referrals.
        </p>
        <.link
          navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}
          class="btn btn-primary"
        >
          Go to Modules
        </.link>
      </div>
    </div>
  <% end %>
</div>
