<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  socket={@socket}
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("Notifications")}
  page_subtitle={gettext("Per-user in-app notifications driven by the activity log")}
  current_path={@url_path}
  project_title={@project_title}
  current_locale={assigns[:current_locale]}
>
  <div class="p-6">
    <div class="flex justify-end mb-4">
      <button type="button" phx-click="refresh" class="btn btn-sm btn-ghost gap-2">
        <.icon name="hero-arrow-path" class="w-4 h-4" /> {gettext("Refresh")}
      </button>
    </div>

    <%!-- Aggregate counts --%>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
      <div class="card bg-base-100 shadow">
        <div class="card-body p-4">
          <div class="flex items-center gap-2 text-base-content/60 text-sm">
            <.icon name="hero-bell" class="w-4 h-4" /> {gettext("Total")}
          </div>
          <div class="text-3xl font-bold">{@stats.total}</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow">
        <div class="card-body p-4">
          <div class="flex items-center gap-2 text-base-content/60 text-sm">
            <.icon name="hero-envelope" class="w-4 h-4" /> {gettext("Unread")}
          </div>
          <div class="text-3xl font-bold text-primary">{@stats.unread}</div>
        </div>
      </div>
      <div class="card bg-base-100 shadow">
        <div class="card-body p-4">
          <div class="flex items-center gap-2 text-base-content/60 text-sm">
            <.icon name="hero-x-circle" class="w-4 h-4" /> {gettext("Dismissed")}
          </div>
          <div class="text-3xl font-bold">{@stats.dismissed}</div>
        </div>
      </div>
    </div>

    <%!-- All notifications (who each is for + what it's about) --%>
    <div class="card bg-base-100 shadow mb-6">
      <div class="card-body p-0">
        <div class="px-4 py-3 border-b border-base-200 flex items-center justify-between">
          <h3 class="font-semibold text-sm">{gettext("All notifications")}</h3>
          <span class="text-xs text-base-content/50">
            {gettext("%{count} total", count: @total)}
          </span>
        </div>

        <%= if @notifications == [] do %>
          <div class="px-4 py-10 text-center text-base-content/50">
            {gettext("No notifications yet.")}
          </div>
        <% else %>
          <div class="overflow-x-auto">
            <table class="table table-sm">
              <thead>
                <tr>
                  <th>{gettext("Recipient")}</th>
                  <th>{gettext("Notification")}</th>
                  <th>{gettext("Status")}</th>
                  <th>{gettext("Date")}</th>
                </tr>
              </thead>
              <tbody>
                <%= for n <- @notifications do %>
                  <% view = render_notification(n, assigns[:current_locale]) %>
                  <% {status_label, status_class} = status_meta(n) %>
                  <tr>
                    <td>
                      <%= if n.recipient do %>
                        <.resource_email_link
                          info={Map.get(@recipient_links, {"user", n.recipient_uuid})}
                          label={n.recipient.email}
                        />
                      <% else %>
                        <span class="text-base-content/40">—</span>
                      <% end %>
                    </td>
                    <td>
                      <div class="flex items-center gap-2">
                        <.icon name={view.icon} class="w-4 h-4 text-base-content/50 shrink-0" />
                        <span>{view.text}</span>
                      </div>
                    </td>
                    <td>
                      <span class={"badge badge-sm #{status_class}"}>{status_label}</span>
                    </td>
                    <td class="text-xs text-base-content/60 whitespace-nowrap">
                      {format_datetime(n.inserted_at)}
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>

          <%= if @total_pages > 1 do %>
            <div class="flex justify-center py-4">
              <div class="join">
                <%= for page <- max(1, @page - 2)..min(@total_pages, @page + 2)//1 do %>
                  <.link
                    patch={Routes.path("/admin/notifications?page=#{page}")}
                    class={["join-item btn btn-sm", if(page == @page, do: "btn-active", else: "")]}
                  >
                    {page}
                  </.link>
                <% end %>
              </div>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>

    <%!-- Module info --%>
    <div class="card bg-base-100 shadow">
      <div class="card-body p-4">
        <h3 class="font-semibold text-sm mb-3">{gettext("About")}</h3>
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-base-content/60">{gettext("Status")}</span>
            <span class="badge badge-success">{gettext("Enabled")}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-base-content/60">{gettext("Retention")}</span>
            <span>{gettext("%{days} days", days: @retention_days)}</span>
          </div>
        </div>
        <p class="text-xs text-base-content/60 mt-4">
          {gettext(
            "Notifications are generated from the activity log (one per target user) and via standalone sends. Each user manages which types they receive in their settings; this page is a read-only overview. Disable the module from the Modules page."
          )}
        </p>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
