[Astro's Comment] Phần 3 - Xây dựng Admin Dashboard để quản lý comment

<script lang="ts">
  import { onMount, untrack } from "svelte";
  import Pagination from "@/components/admin/Pagination.svelte";
  import AdminSidebar from "./AdminSidebar.svelte";

  // ── Types ──────────────────────────────────────────────────────────────
  interface Comment {
    id: number;
    postSlug: string;
    authorName: string;
    authorEmail: string;
    authorUrl: string | null;
    content: string;
    createdAt: string;
    status: number;
    parentId: number | null;
  }

  interface TrustedEmail {
    id: number;
    email: string;
    addedAt: string;
  }

  type StatusFilter = "all" | "pending" | "approved" | "trash";
  type View = "comments" | "trusted-emails";

  interface Props {
    view: View;
  }

  let { view }: Props = $props();

  // Current view — mutable so Svelte can switch tabs without full page reload
  let currentView = $state<View>(untrack(() => view));

  // Track which views have been loaded at least once
  const loadedViews = new Set<View>();

  function navigate(newView: View) {
    currentView = newView;
    const path =
      newView === "trusted-emails"
        ? "/admin/trusted-emails"
        : "/admin/comments";
    history.pushState({ view: newView }, "", path);
    // Lazy-load on first visit to this view
    if (!loadedViews.has(newView)) {
      if (newView === "comments") loadComments();
      else loadEmails();
    }
  }

  // Mobile sidebar open state
  let sidebarOpen = $state(false);

  // Comments state
  let commentsList = $state<Comment[]>([]);
  let commentsLimit = $state(10);
  let commentsCursors = $state<Array<number | null>>([null]);
  let commentsHasMore = $state(false);
  let commentsNextCursor = $state<number | null>(null);
  let statusFilter = $state<StatusFilter>("pending");
  let slugSearch = $state("");
  let commentsLoading = $state(false);

  // Edit state
  let editingComment = $state<Comment | null>(null);
  let editContent = $state("");
  let editAuthorName = $state("");
  let editAuthorEmail = $state("");
  let editAuthorUrl = $state("");

  // Reply state
  let replyingTo = $state<Comment | null>(null);
  let replyContent = $state("");

  // Trusted emails state
  let emailsList = $state<TrustedEmail[]>([]);
  let emailsCursors = $state<Array<number | null>>([null]);
  let emailsHasMore = $state(false);
  let emailsNextCursor = $state<number | null>(null);
  let emailsLoading = $state(false);
  let newEmail = $state("");
  let editingEmail = $state<TrustedEmail | null>(null);
  let editEmailValue = $state("");

  // Feedback
  let message = $state("");
  let messageType = $state<"success" | "error">("success");

  // ── Helpers ────────────────────────────────────────────────────────────
  function showMessage(msg: string, type: "success" | "error" = "success") {
    message = msg;
    messageType = type;
    setTimeout(() => (message = ""), 3500);
  }

  function formatDate(iso: string) {
    return new Date(iso).toLocaleString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  let commentsHasPrev = $derived(commentsCursors.length > 1);
  let emailsHasPrev = $derived(emailsCursors.length > 1);

  // ── API: Comments ──────────────────────────────────────────────────────
  async function loadComments() {
    commentsLoading = true;
    loadedViews.add("comments");
    const cursor = commentsCursors[commentsCursors.length - 1];
    try {
      const params = new URLSearchParams({ limit: String(commentsLimit) });
      if (statusFilter !== "all") params.set("status", statusFilter);
      if (slugSearch.trim()) params.set("slug", slugSearch.trim());
      if (cursor !== null) params.set("cursor", String(cursor));

      const res = await fetch(`/api/admin/comments?${params}`);
      if (!res.ok) throw new Error("Failed to load comments");
      const data = (await res.json()) as any;
      commentsList = data.comments ?? [];
      commentsHasMore = data.hasMore ?? false;
      commentsNextCursor = data.nextCursor ?? null;
    } catch {
      showMessage("Failed to load comments", "error");
    } finally {
      commentsLoading = false;
    }
  }

  function commentsGoNext() {
    if (!commentsNextCursor) return;
    commentsCursors = [...commentsCursors, commentsNextCursor];
    loadComments();
  }

  function commentsGoPrev() {
    if (commentsCursors.length <= 1) return;
    commentsCursors = commentsCursors.slice(0, -1);
    loadComments();
  }

  async function updateComment(
    id: number,
    updates: {
      status?: number;
      content?: string;
      authorName?: string;
      authorEmail?: string;
      authorUrl?: string | null;
    }
  ) {
    try {
      const res = await fetch(`/api/admin/comments/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(updates),
      });
      if (!res.ok) {
        const data = (await res.json()) as any;
        throw new Error(data.error || "Failed to update");
      }
      showMessage("Comment updated successfully");
      await loadComments();
    } catch (err: any) {
      showMessage(err.message || "Failed to update", "error");
    }
  }

  async function deleteComment(id: number) {
    if (!confirm("Permanently delete this comment? This cannot be undone."))
      return;
    try {
      const res = await fetch(`/api/admin/comments/${id}`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Failed to delete");
      showMessage("Comment permanently deleted");
      await loadComments();
    } catch {
      showMessage("Failed to delete comment", "error");
    }
  }

  async function submitReply() {
    if (!replyingTo || !replyContent.trim()) return;
    try {
      const res = await fetch("/api/admin/comments/reply", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          postSlug: replyingTo.postSlug,
          parentId: replyingTo.id,
          content: replyContent.trim(),
        }),
      });
      if (!res.ok) {
        const data = (await res.json()) as any;
        throw new Error(data.error || "Failed to post reply");
      }
      showMessage("Reply posted successfully");
      replyingTo = null;
      replyContent = "";
      await loadComments();
    } catch (err: any) {
      showMessage(err.message || "Failed to post reply", "error");
    }
  }

  function saveEdit() {
    if (!editingComment) return;
    updateComment(editingComment.id, {
      content: editContent,
      authorName: editAuthorName.trim() || undefined,
      authorEmail: editAuthorEmail.trim() || undefined,
      authorUrl: editAuthorUrl.trim() || null,
    });
    editingComment = null;
    editContent = "";
    editAuthorName = "";
    editAuthorEmail = "";
    editAuthorUrl = "";
  }

  // ── API: Trusted Emails ────────────────────────────────────────────────
  async function loadEmails() {
    emailsLoading = true;
    loadedViews.add("trusted-emails");
    const cursor = emailsCursors[emailsCursors.length - 1];
    try {
      const params = new URLSearchParams({ limit: String(commentsLimit) });
      if (cursor !== null) params.set("cursor", String(cursor));
      const res = await fetch(`/api/admin/trusted-emails?${params}`);
      if (!res.ok) throw new Error("Failed to load emails");
      const data = (await res.json()) as any;
      emailsList = data.emails ?? [];
      emailsHasMore = data.hasMore ?? false;
      emailsNextCursor = data.nextCursor ?? null;
    } catch {
      showMessage("Failed to load trusted emails", "error");
    } finally {
      emailsLoading = false;
    }
  }

  function emailsGoNext() {
    if (!emailsNextCursor) return;
    emailsCursors = [...emailsCursors, emailsNextCursor];
    loadEmails();
  }

  function emailsGoPrev() {
    if (emailsCursors.length <= 1) return;
    emailsCursors = emailsCursors.slice(0, -1);
    loadEmails();
  }

  async function addEmail() {
    if (!newEmail.trim()) return;
    try {
      const res = await fetch("/api/admin/trusted-emails", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: newEmail.trim() }),
      });
      if (!res.ok) {
        const data = (await res.json()) as any;
        throw new Error(data.error || "Failed to add email");
      }
      showMessage("Email added to trusted list");
      newEmail = "";
      await loadEmails();
    } catch (err: any) {
      showMessage(err.message || "Failed to add email", "error");
    }
  }

  async function updateEmail(id: number) {
    if (!editEmailValue.trim()) return;
    try {
      const res = await fetch(`/api/admin/trusted-emails/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: editEmailValue.trim() }),
      });
      if (!res.ok) {
        const data = (await res.json()) as any;
        throw new Error(data.error || "Failed to update email");
      }
      showMessage("Email updated");
      editingEmail = null;
      editEmailValue = "";
      await loadEmails();
    } catch (err: any) {
      showMessage(err.message || "Failed to update email", "error");
    }
  }

  async function deleteEmail(id: number) {
    if (!confirm("Remove this email from trusted list?")) return;
    try {
      const res = await fetch(`/api/admin/trusted-emails/${id}`, {
        method: "DELETE",
      });
      if (!res.ok) throw new Error("Failed to remove email");
      showMessage("Email removed from trusted list");
      await loadEmails();
    } catch {
      showMessage("Failed to remove email", "error");
    }
  }

  // Load on mount
  onMount(() => {
    // Only load the initially active view
    if (currentView === "comments") loadComments();
    else loadEmails();

    const handlePopState = (e: PopStateEvent) => {
      const next = (e.state?.view as View) ?? "comments";
      currentView = next;
      if (!loadedViews.has(next)) {
        if (next === "comments") loadComments();
        else loadEmails();
      }
    };
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);
  });

  // Debounced slug search
  let slugTimeout: ReturnType<typeof setTimeout>;
  function handleSlugSearch(e: Event) {
    slugSearch = (e.target as HTMLInputElement).value;
    clearTimeout(slugTimeout);
    slugTimeout = setTimeout(() => {
      commentsCursors = [null];
      loadComments();
    }, 400);
  }
</script>

<!-- ── Toast notification ─────────────────────────────────────────────── -->
{#if message}
  <div
    class="alert {messageType === 'success'
      ? 'alert-success'
      : 'alert-error'} fixed top-4 right-4 z-50 shadow"
  >
    <span class="text-base">{messageType === "success" ? "✓" : "✕"}</span>
    {message}
  </div>
{/if}

<!-- ── Sidebar layout ────────────────────────────────────────────────── -->
<div class="drawer lg:drawer-open">
  <input
    id="admin-drawer"
    type="checkbox"
    class="drawer-toggle"
    bind:checked={sidebarOpen}
  />
  <div class="drawer-content min-h-screen">
    <!-- Mobile top bar -->
    <div
      class="lg:hidden flex items-center gap-3 p-4 border-b border-base-300 bg-base-100"
    >
      <label for="admin-drawer" class="btn btn-ghost btn-sm drawer-button">
        <svg
          class="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
        </svg>
      </label>
      <span class="font-semibold">Admin Dashboard</span>
    </div>

    <!-- Main content -->
    <div class="p-6">
      <!-- Comments View -->
      {#if currentView === "comments"}
        <!-- Filter bar -->
        <div class="mb-5 flex flex-wrap items-center gap-3">
          <!-- Status pills -->
          <div class="join">
            {#each [["all", "All"], ["pending", "Pending"], ["approved", "Approved"], ["trash", "Trash"]] as [value, label]}
              <button
                onclick={() => {
                  statusFilter = value as StatusFilter;
                  commentsCursors = [null];
                  loadComments();
                }}
                class="join-item btn {statusFilter === value
                  ? 'btn-active'
                  : ''}"
              >
                {label}
              </button>
            {/each}
          </div>

          <!-- Slug search -->
          <div class="join">
            <input
              type="text"
              placeholder="Filter by slug..."
              value={slugSearch}
              oninput={handleSlugSearch}
              class="join-item input input-bordered w-48"
            />
          </div>

          <span class="ml-auto text-xs text-base-content/60">
            {#if commentsList.length === 0}
              0 results
            {:else}
              {commentsList.length} comments
              {#if commentsHasPrev || commentsHasMore}
                &middot; page {commentsCursors.length}
              {/if}
            {/if}
          </span>
        </div>

        <div class="card bg-base-100">
          {#if commentsLoading}
            <div
              class="flex items-center justify-center py-16 text-base-content/60"
            >
              <span class="loading loading-spinner loading-sm mr-2"></span>
              Loading comments...
            </div>
          {:else if commentsList.length === 0}
            <div
              class="flex flex-col items-center justify-center gap-2 py-16 text-base-content/60"
            >
              <span class="text-3xl">💬</span>
              <p class="text-sm">No comments found</p>
            </div>
          {:else}
            <div class="space-y-4">
              {#each commentsList as comment (comment.id)}
                <div
                  class="card bg-base-100 border border-base-300 shadow-sm group {comment.status !==
                  1
                    ? 'bg-warning/10 border-warning/90'
                    : ''}"
                >
                  <div class="card-body p-4">
                    <!-- Header: name, email/website, date, post slug -->
                    <div
                      class="flex flex-wrap items-start justify-between gap-2 mb-2"
                    >
                      <div>
                        <div class="flex items-center gap-2">
                          <span class="font-semibold text-base-content"
                            >{comment.authorName}</span
                          >
                        </div>
                        <div class="text-xs text-base-content/60 mt-0.5">
                          {comment.authorEmail}{#if comment.authorUrl}
                            · <a
                              href={comment.authorUrl}
                              target="_blank"
                              class="hover:underline">{comment.authorUrl}</a
                            >{/if}
                        </div>
                      </div>
                      <div class="text-xs text-base-content/60 text-right">
                        <div>
                          #{comment.id} · {formatDate(comment.createdAt)} on
                          <a
                            href="/{comment.postSlug}"
                            target="_blank"
                            class="text-primary hover:underline"
                            title={comment.postSlug}
                          >
                            {comment.postSlug.length > 32
                              ? comment.postSlug.slice(0, 32) + "…"
                              : comment.postSlug}
                          </a>
                        </div>
                        {#if comment.parentId}
                          <div class="text-base-content/50">
                            ↩ reply to #{comment.parentId}
                          </div>
                        {/if}
                      </div>
                    </div>

                    <!-- Content -->
                    <p
                      class="text-sm leading-relaxed text-base-content/80 mb-3"
                    >
                      {comment.content}
                    </p>

                    <!-- Action buttons -->
                    <div
                      class="flex flex-wrap gap-2 pt-2 border-t border-base-200 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      {#if statusFilter === "trash"}
                        <!-- Trash tab: restore or permanently delete -->
                        <button
                          onclick={() =>
                            updateComment(comment.id, { status: 1 })}
                          class="btn btn-sm btn-outline btn-success"
                          >Restore</button
                        >
                        <button
                          onclick={() => deleteComment(comment.id)}
                          class="btn btn-sm btn-outline btn-error"
                          >Delete</button
                        >
                      {:else}
                        <!-- All other tabs: approve, edit, reply, trash -->
                        {#if comment.status !== 1}
                          <button
                            onclick={() =>
                              updateComment(comment.id, { status: 1 })}
                            class="btn btn-sm btn-outline btn-success"
                            >Approve</button
                          >
                        {/if}
                        <button
                          onclick={() => {
                            editingComment = comment;
                            editContent = comment.content;
                            editAuthorName = comment.authorName;
                            editAuthorEmail = comment.authorEmail;
                            editAuthorUrl = comment.authorUrl ?? "";
                          }}
                          class="btn btn-sm btn-outline">Edit</button
                        >
                        <button
                          onclick={() => {
                            replyingTo = comment;
                            replyContent = "";
                          }}
                          class="btn btn-sm btn-outline">Reply</button
                        >
                        {#if comment.status !== 2}
                          <button
                            onclick={() =>
                              updateComment(comment.id, { status: 2 })}
                            class="btn btn-sm btn-outline btn-error"
                            >Trash</button
                          >
                        {/if}
                      {/if}
                    </div>
                  </div>
                </div>
              {/each}
            </div>

            <!-- Pagination -->
            <Pagination
              hasPrev={commentsHasPrev}
              hasNext={commentsHasMore}
              onPrev={commentsGoPrev}
              onNext={commentsGoNext}
            />
          {/if}
        </div>

        <!-- ── Edit Modal ──────────────────────────────────────────────── -->
        {#if editingComment}
          <div
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
            onclick={e => {
              if (e.target === e.currentTarget) editingComment = null;
            }}
            onkeydown={e => {
              if (e.key === "Escape") editingComment = null;
            }}
            role="dialog"
            aria-modal="true"
            aria-labelledby="edit-modal-title"
            tabindex="-1"
          >
            <div
              class="w-full max-w-lg rounded-2xl border border-base-300 bg-base-100 p-6 shadow-2xl"
            >
              <div class="mb-5 flex items-start justify-between gap-4">
                <div>
                  <h3 id="edit-modal-title" class="text-base font-semibold">
                    Edit Comment #{editingComment.id}
                  </h3>
                  <p class="mt-0.5 text-xs text-base-content/60">
                    By <strong>{editingComment.authorName}</strong> on
                    <code class="rounded bg-base-200 px-1 py-0.5 text-xs"
                      >{editingComment.postSlug}</code
                    >
                  </p>
                </div>
                <button
                  onclick={() => {
                    editingComment = null;
                  }}
                  class="btn btn-ghost btn-sm">✕</button
                >
              </div>
              <div class="space-y-3 mb-4">
                <div>
                  <label for="edit-author-name" class="label py-0.5"
                    ><span class="label-text text-xs font-medium">Name</span
                    ></label
                  >
                  <input
                    id="edit-author-name"
                    type="text"
                    bind:value={editAuthorName}
                    class="input input-bordered w-full px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label for="edit-author-email" class="label py-0.5"
                    ><span class="label-text text-xs font-medium">Email</span
                    ></label
                  >
                  <input
                    id="edit-author-email"
                    type="email"
                    bind:value={editAuthorEmail}
                    class="input input-bordered w-full px-3 py-2 text-sm"
                  />
                </div>
                <div>
                  <label for="edit-author-url" class="label py-0.5"
                    ><span class="label-text text-xs font-medium">Website</span
                    ></label
                  >
                  <input
                    id="edit-author-url"
                    type="url"
                    bind:value={editAuthorUrl}
                    placeholder="https://example.com"
                    class="input input-bordered w-full px-3 py-2 text-sm"
                  />
                </div>
              </div>
              <textarea
                bind:value={editContent}
                rows="6"
                class="textarea textarea-bordered w-full resize-y px-3 py-2.5 text-sm leading-relaxed"
              ></textarea>
              <div class="mt-4 flex justify-end gap-2">
                <button
                  onclick={() => {
                    editingComment = null;
                  }}
                  class="btn btn-ghost">Cancel</button
                >
                <button onclick={saveEdit} class="btn btn-primary"
                  >Save Changes</button
                >
              </div>
            </div>
          </div>
        {/if}

        <!-- ── Reply Modal ──────────────────────────────────────────────── -->
        {#if replyingTo}
          <div
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
            onclick={e => {
              if (e.target === e.currentTarget) replyingTo = null;
            }}
            onkeydown={e => {
              if (e.key === "Escape") replyingTo = null;
            }}
            role="dialog"
            aria-modal="true"
            aria-labelledby="reply-modal-title"
            tabindex="-1"
          >
            <div
              class="w-full max-w-lg rounded-2xl border border-base-300 bg-base-100 p-6 shadow-2xl"
            >
              <div class="mb-5 flex items-start justify-between gap-4">
                <div>
                  <h3 id="reply-modal-title" class="text-base font-semibold">
                    Reply as Admin
                  </h3>
                  <p class="mt-0.5 text-xs text-base-content/60">
                    Replying to <strong>{replyingTo.authorName}</strong> on
                    <code class="rounded bg-base-200 px-1 py-0.5 text-xs"
                      >{replyingTo.postSlug}</code
                    >
                  </p>
                </div>
                <button
                  onclick={() => {
                    replyingTo = null;
                  }}
                  class="btn btn-ghost btn-sm">✕</button
                >
              </div>
              <div
                class="mb-4 rounded-lg border border-base-300 bg-base-200 px-4 py-3"
              >
                <div class="mb-1 text-xs font-medium text-base-content/60">
                  {replyingTo.authorName} wrote:
                </div>
                <p
                  class="text-xs leading-relaxed text-base-content/60 line-clamp-4"
                >
                  {replyingTo.content}
                </p>
              </div>
              <textarea
                bind:value={replyContent}
                rows="4"
                placeholder="Write your reply..."
                class="textarea textarea-bordered w-full resize-y px-3 py-2.5 text-sm leading-relaxed"
              ></textarea>
              <div class="mt-4 flex justify-end gap-2">
                <button
                  onclick={() => {
                    replyingTo = null;
                  }}
                  class="btn btn-ghost">Cancel</button
                >
                <button
                  onclick={submitReply}
                  disabled={!replyContent.trim()}
                  class="btn btn-primary">Post Reply</button
                >
              </div>
            </div>
          </div>
        {/if}
      {/if}

      <!-- Trusted Emails View -->
      {#if currentView === "trusted-emails"}
        <!-- Add email card -->
        <div class="card bg-base-100 shadow mb-6">
          <div class="card-body">
            <h3 class="card-title text-sm">Add Trusted Email</h3>
            <div class="flex gap-2">
              <input
                type="email"
                placeholder="email@example.com"
                bind:value={newEmail}
                onkeydown={e => e.key === "Enter" && addEmail()}
                class="input input-bordered flex-1 px-3 py-2 text-sm"
              />
              <button
                onclick={addEmail}
                disabled={!newEmail.trim()}
                class="btn btn-primary">Add Email</button
              >
            </div>
            <p class="text-xs text-base-content/60">
              Comments from trusted emails are automatically approved.
            </p>
          </div>
        </div>

        <!-- Emails list -->
        <div class="card bg-base-100">
          {#if emailsLoading}
            <div
              class="flex items-center justify-center py-16 text-sm text-base-content/60"
            >
              <span class="loading loading-spinner loading-sm mr-2"></span>
              Loading...
            </div>
          {:else if emailsList.length === 0}
            <div
              class="flex flex-col items-center justify-center gap-2 py-16 text-base-content/60"
            >
              <span class="text-3xl">✉️</span>
              <p class="text-sm">No trusted emails yet</p>
            </div>
          {:else}
            <div class="space-y-2">
              {#each emailsList as email (email.id)}
                <div
                  class="flex flex-wrap items-center justify-between gap-3 px-4 py-3 bg-base-100 border border-base-300 rounded-lg hover:border-base-400 transition-colors group"
                >
                  <div class="flex flex-wrap items-center gap-3 min-w-0">
                    <span class="font-medium text-base-content truncate"
                      >{email.email}</span
                    >
                    <span class="text-xs text-base-content/60 shrink-0"
                      >Added {formatDate(email.addedAt)}</span
                    >
                  </div>
                  {#if editingEmail?.id === email.id}
                    <div class="flex items-center gap-2 shrink-0">
                      <input
                        type="email"
                        bind:value={editEmailValue}
                        onkeydown={e =>
                          e.key === "Enter" && updateEmail(email.id)}
                        class="input input-bordered input-sm px-3 py-1.5 text-sm w-48"
                      />
                      <button
                        onclick={() => updateEmail(email.id)}
                        class="btn btn-sm btn-outline btn-success">Save</button
                      >
                      <button
                        onclick={() => {
                          editingEmail = null;
                        }}
                        class="btn btn-sm btn-outline">Cancel</button
                      >
                    </div>
                  {:else}
                    <div
                      class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <button
                        onclick={() => {
                          editingEmail = email;
                          editEmailValue = email.email;
                        }}
                        class="btn btn-sm btn-outline">Edit</button
                      >
                      <button
                        onclick={() => deleteEmail(email.id)}
                        class="btn btn-sm btn-outline btn-error">Remove</button
                      >
                    </div>
                  {/if}
                </div>
              {/each}

              <Pagination
                hasPrev={emailsHasPrev}
                hasNext={emailsHasMore}
                onPrev={emailsGoPrev}
                onNext={emailsGoNext}
              />
            </div>
          {/if}
        </div>
      {/if}
    </div>
  </div>

  <!-- Sidebar -->
  <div class="drawer-side z-50">
    <label for="admin-drawer" class="drawer-overlay"></label>
    <AdminSidebar activeView={currentView} onNavigate={navigate} />
  </div>
</div>