<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Email Queue"
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container flex-col mx-auto px-4 py-6">
    <.admin_page_header
      back={Routes.path("/admin/emails")}
      title="Email Queue"
      subtitle="Real-time monitoring and queue management"
    />

    <%!-- Action Buttons --%>
    <div class="flex justify-between items-center gap-2 mb-6">
      <div class="text-sm text-base-content/70">
        Last updated: {UtilsDate.format_time_with_user_format(@last_updated)}
      </div>

      <div class="flex gap-2">
        <.button phx-click="refresh" class="btn btn-outline btn-sm">
          <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" /> Refresh
        </.button>
      </div>
    </div>

    <%!-- System Status Cards --%>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={if @system_status[:system_enabled], do: "Online", else: "Offline"}
        title="System Status"
        subtitle={
          if @system_status[:system_enabled],
            do: "Email system is operational",
            else: "Email system is disabled"
        }
      >
        <:icon>
          <.icon name="hero-server" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={UtilsNumber.format(@system_status[:total_sent_today] || 0)}
        title="Sent Today"
        subtitle="Total emails sent since midnight"
      >
        <:icon>
          <.icon name="hero-envelope" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={length(@failed_emails)}
        title="Failed (24h)"
        subtitle="Failed emails in last 24 hours"
      >
        <:icon>
          <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@system_status[:retention_days] || 90}
        title="Retention"
        subtitle="Days of data retention"
      >
        <:icon>
          <.icon name="hero-clock" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>
    </div>

    <%!-- Rate Limit Status --%>
    <div class="card bg-base-100 shadow-sm mb-6">
      <div class="card-body">
        <h2 class="card-title text-lg mb-4">Rate Limit Status</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <%!-- Global Rate Limit --%>
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title">Global Hourly Limit</div>
            <div class="stat-value text-sm">
              {UtilsNumber.format(@rate_limit_status[:global][:count] || 0)} / {UtilsNumber.format(
                @rate_limit_status[:global][:limit] || 0
              )}
            </div>
            <div class="stat-desc">
              <div class="mt-2">
                <progress
                  class={[
                    "progress w-full",
                    ((@rate_limit_status[:global][:percentage] || 0) > 80 && "progress-error") ||
                      ((@rate_limit_status[:global][:percentage] || 0) > 60 && "progress-warning") ||
                      "progress-success"
                  ]}
                  value={@rate_limit_status[:global][:percentage] || 0}
                  max="100"
                >
                </progress>
                <span class="text-xs">{@rate_limit_status[:global][:percentage] || 0}% used</span>
              </div>
            </div>
          </div>

          <%!-- Recipients --%>
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title">Recipient Limits</div>
            <div class="stat-value text-sm">
              {@rate_limit_status[:recipients][:active_limits] || 0}
            </div>
            <div class="stat-desc">
              Active recipient rate limits ({@rate_limit_status[:recipients][:total_emails] || 0} emails)
            </div>
          </div>

          <%!-- Senders --%>
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title">Sender Limits</div>
            <div class="stat-value text-sm">
              {@rate_limit_status[:senders][:active_limits] || 0}
            </div>
            <div class="stat-desc">
              Active sender rate limits ({@rate_limit_status[:senders][:total_emails] || 0} emails)
            </div>
          </div>

          <%!-- Blocklist --%>
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title">Blocklist</div>
            <div class="stat-value text-sm">
              {@rate_limit_status[:blocklist][:active_blocks] || 0}
            </div>
            <div class="stat-desc">
              Active blocks ({@rate_limit_status[:blocklist][:expired_today] || 0} expired today)
            </div>
          </div>
        </div>
      </div>
    </div>

    <%!-- Failed Emails Section --%>
    <%= if length(@failed_emails) > 0 do %>
      <div class="card bg-base-100 shadow-sm mb-6">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <h2 class="card-title text-lg">Failed Emails (Last 24 Hours)</h2>

            <%= if length(@selected_emails) > 0 do %>
              <div class="flex gap-2">
                <span class="badge badge-primary">{length(@selected_emails)} selected</span>
                <button phx-click="clear_selection" class="btn btn-xs btn-ghost">
                  Clear
                </button>
                <button
                  phx-click="set_bulk_action"
                  phx-value-action="retry"
                  class="btn btn-xs btn-success"
                >
                  Retry Selected
                </button>
              </div>
            <% else %>
              <button phx-click="select_all_failed" class="btn btn-xs btn-outline">
                Select All
              </button>
            <% end %>
          </div>

          <%= if @bulk_action do %>
            <div class="alert alert-warning mb-4">
              <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
              <div>
                <p class="font-semibold">
                  Confirm bulk action: {String.upcase(@bulk_action)}
                </p>
                <p class="text-sm">
                  This will {@bulk_action} {length(@selected_emails)} emails
                </p>
              </div>
              <div class="flex gap-2">
                <button phx-click="execute_bulk_action" class="btn btn-sm btn-warning">
                  Confirm
                </button>
                <button phx-click="clear_selection" class="btn btn-sm btn-ghost">
                  Cancel
                </button>
              </div>
            </div>
          <% end %>

          <div class="overflow-x-auto">
            <.table_default size="sm">
              <.table_default_header>
                <.table_default_row>
                  <.table_default_header_cell>
                    <input type="checkbox" class="checkbox checkbox-sm" disabled />
                  </.table_default_header_cell>
                  <.table_default_header_cell>Recipient</.table_default_header_cell>
                  <.table_default_header_cell>Subject</.table_default_header_cell>
                  <.table_default_header_cell>Error</.table_default_header_cell>
                  <.table_default_header_cell>Time</.table_default_header_cell>
                  <.table_default_header_cell>Actions</.table_default_header_cell>
                </.table_default_row>
              </.table_default_header>
              <.table_default_body>
                <%= for email <- @failed_emails do %>
                  <.table_default_row>
                    <.table_default_cell>
                      <input
                        type="checkbox"
                        class="checkbox checkbox-sm"
                        checked={email.uuid in @selected_emails}
                        phx-click="toggle_email_selection"
                        phx-value-email_uuid={email.uuid}
                      />
                    </.table_default_cell>
                    <.table_default_cell class="font-mono text-xs">
                      {email.to}
                    </.table_default_cell>
                    <.table_default_cell class="truncate max-w-xs">
                      {email.subject}
                    </.table_default_cell>
                    <.table_default_cell class="text-error text-xs truncate max-w-xs">
                      {email.error_message || "Unknown error"}
                    </.table_default_cell>
                    <.table_default_cell class="text-xs">
                      {UtilsDate.format_datetime_with_user_format(email.sent_at)}
                    </.table_default_cell>
                    <.table_default_cell>
                      <button
                        phx-click="retry_email"
                        phx-value-email_uuid={email.uuid}
                        class="btn btn-xs btn-outline btn-success tooltip tooltip-bottom"
                        data-tip={gettext("Retry")}
                      >
                        <.icon name="hero-arrow-path" class="w-3 h-3 hidden sm:inline" />
                        <span class="sm:hidden whitespace-nowrap">{gettext("Retry")}</span>
                      </button>
                    </.table_default_cell>
                  </.table_default_row>
                <% end %>
              </.table_default_body>
            </.table_default>
          </div>
        </div>
      </div>
    <% end %>

    <%!-- Recent Activity Section --%>
    <div class="card bg-base-100 shadow-sm">
      <div class="card-body">
        <h2 class="card-title text-lg mb-4">Recent Activity (Last 20 Emails)</h2>

        <%= if @loading do %>
          <div class="flex justify-center items-center h-32">
            <span class="loading loading-spinner loading-md"></span>
            <span class="ml-2">Loading activity...</span>
          </div>
        <% else %>
          <div class="overflow-x-auto">
            <.table_default size="sm">
              <.table_default_header>
                <.table_default_row>
                  <.table_default_header_cell>Status</.table_default_header_cell>
                  <.table_default_header_cell>Recipient</.table_default_header_cell>
                  <.table_default_header_cell>Subject</.table_default_header_cell>
                  <.table_default_header_cell>Sent At</.table_default_header_cell>
                  <.table_default_header_cell>Events</.table_default_header_cell>
                </.table_default_row>
              </.table_default_header>
              <.table_default_body>
                <%= for email <- @recent_activity do %>
                  <.table_default_row>
                    <.table_default_cell>
                      <div class={[
                        "badge badge-sm h-auto",
                        (email.status == "sent" && "badge-success") ||
                          (email.status == "failed" &&
                             "badge-error") || "badge-warning"
                      ]}>
                        {String.capitalize(email.status || "unknown")}
                      </div>
                    </.table_default_cell>
                    <.table_default_cell class="font-mono text-xs">
                      {email.to}
                    </.table_default_cell>
                    <.table_default_cell class="truncate max-w-xs">
                      {email.subject}
                    </.table_default_cell>
                    <.table_default_cell class="text-xs">
                      {UtilsDate.format_datetime_with_user_format(email.sent_at)}
                    </.table_default_cell>
                    <.table_default_cell>
                      <div class="flex gap-1">
                        <%= if email.delivered_at do %>
                          <div class="badge badge-xs badge-success" title="Delivered">
                            <.icon name="hero-check" class="w-3 h-3" />
                          </div>
                        <% end %>
                        <%= if email.opened_at do %>
                          <div class="badge badge-xs badge-info" title="Opened">
                            <.icon name="hero-envelope-open" class="w-3 h-3" />
                          </div>
                        <% end %>
                        <%= if email.clicked_at do %>
                          <div class="badge badge-xs badge-secondary" title="Clicked">
                            <.icon name="hero-cursor-arrow-rays" class="w-3 h-3" />
                          </div>
                        <% end %>
                      </div>
                    </.table_default_cell>
                  </.table_default_row>
                <% end %>

                <%= if length(@recent_activity) == 0 do %>
                  <.table_default_row>
                    <.table_default_cell colspan={5} class="text-center py-8 text-base-content/60">
                      No recent email activity
                    </.table_default_cell>
                  </.table_default_row>
                <% end %>
              </.table_default_body>
            </.table_default>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
