<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="{@project_title} Referrals"
  current_path={@url_path}
  project_title={@project_title}
>
  <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>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
