<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  socket={@socket}
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("Activity Detail")}
  page_subtitle={@entry.action}
  current_path={@url_path}
  project_title={@project_title}
  current_locale={assigns[:current_locale]}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto w-full space-y-6">
      <%!-- Action & Status --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <div class="flex flex-wrap items-center gap-3 mb-4">
            <span class={"badge badge-lg #{action_badge_color(@entry.action)}"}>
              {@entry.action}
            </span>
            <%= if @entry.module do %>
              <span class="badge badge-outline">{@entry.module}</span>
            <% end %>
            <%= if @entry.mode do %>
              <span class={"badge #{mode_badge_color(@entry.mode)}"}>{@entry.mode}</span>
            <% end %>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <%!-- Activity UUID --%>
            <div>
              <div class="text-xs text-base-content/50 mb-1">{gettext("Activity ID")}</div>
              <code class="text-sm break-all">{@entry.uuid}</code>
            </div>

            <%!-- Timestamp --%>
            <div>
              <div class="text-xs text-base-content/50 mb-1">{gettext("Date & Time")}</div>
              <div class="text-sm">
                {Calendar.strftime(@entry.inserted_at, "%B %d, %Y at %H:%M:%S UTC")}
              </div>
            </div>
          </div>
        </div>
      </div>

      <%!-- People --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <h3 class="font-semibold text-lg mb-4">{gettext("People")}</h3>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <%!-- Actor --%>
            <div>
              <div class="text-xs text-base-content/50 mb-1">
                {gettext("Actor (who did it)")}
              </div>
              <%= if @entry.actor do %>
                <div class="flex items-center gap-2">
                  <.resource_email_link
                    info={@actor_link}
                    label={@entry.actor.email}
                    class="font-semibold"
                  />
                  <%= if @entry.metadata["actor_role"] do %>
                    <span class={[
                      "badge badge-xs",
                      if(@entry.metadata["actor_role"] == "admin",
                        do: "badge-warning",
                        else: "badge-ghost"
                      )
                    ]}>
                      {@entry.metadata["actor_role"]}
                    </span>
                  <% end %>
                </div>
                <div class="text-xs text-base-content/40 mt-0.5">
                  {to_string(@entry.actor_uuid)}
                </div>
              <% else %>
                <span class="text-base-content/50">{gettext("System")}</span>
              <% end %>
            </div>

            <%!-- Target --%>
            <div>
              <div class="text-xs text-base-content/50 mb-1">
                {gettext("Target (who was affected)")}
              </div>
              <%= if @entry.target do %>
                <.resource_email_link
                  info={@target_link}
                  label={@entry.target.email}
                  class="font-semibold"
                />
                <div class="text-xs text-base-content/40 mt-0.5">
                  {to_string(@entry.target_uuid)}
                </div>
              <% else %>
                <span class="text-base-content/30">—</span>
              <% end %>
            </div>
          </div>
        </div>
      </div>

      <%!-- Subject --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <h3 class="font-semibold text-lg mb-4">{gettext("Subject")}</h3>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div class="text-xs text-base-content/50 mb-1">{gettext("Type")}</div>
              <%= if @entry.resource_type do %>
                <span class="badge badge-ghost">{@entry.resource_type}</span>
              <% else %>
                <span class="text-base-content/30">—</span>
              <% end %>
            </div>

            <div>
              <div class="text-xs text-base-content/50 mb-1">{gettext("ID")}</div>
              <%= if @entry.resource_uuid do %>
                <div>
                  <%!-- Deep-link to the underlying resource when it resolves
                       (same mechanism as the comments moderation admin). --%>
                  <div :if={@resource_link} class="mb-1">
                    <.resource_link info={@resource_link} />
                  </div>
                  <%= if @resource_user && is_nil(@resource_link) do %>
                    <span class="font-semibold">{@resource_user.email}</span>
                  <% end %>
                  <div class="text-xs text-base-content/40 mt-0.5">
                    {to_string(@entry.resource_uuid)}
                  </div>
                </div>
              <% else %>
                <span class="text-base-content/30">—</span>
              <% end %>
            </div>
          </div>
        </div>
      </div>

      <%!-- Metadata --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <h3 class="font-semibold text-lg mb-4">{gettext("Metadata")}</h3>

          <%= if @entry.metadata && map_size(@entry.metadata) > 0 do %>
            <div class="overflow-x-auto">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th class="w-1/3">{gettext("Key")}</th>
                    <th>{gettext("Value")}</th>
                  </tr>
                </thead>
                <tbody>
                  <%= for {key, value} <- Enum.sort(@entry.metadata) do %>
                    <tr>
                      <td class="font-mono text-sm text-base-content/70">{key}</td>
                      <td class="text-sm break-all">{to_string(value)}</td>
                    </tr>
                  <% end %>
                </tbody>
              </table>
            </div>
          <% else %>
            <div class="text-center py-4 text-base-content/50">
              {gettext("No metadata")}
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
