import { UserUploadCategorySection } from "@/admin/components/UserUploadCategorySection";
import type { UserUploadItem } from "@/admin/components/UserUploadCard";
import { AdminAutoLayout } from "@/admin/layout/AdminAutoLayout";
import { requireSuperAdmin } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

function sortUploads<T extends { approvalStatus: string; updatedAt: Date }>(items: T[]) {
  return [...items].sort((a, b) => {
    if (a.approvalStatus === "PENDING" && b.approvalStatus !== "PENDING") return -1;
    if (a.approvalStatus !== "PENDING" && b.approvalStatus === "PENDING") return 1;
    return b.updatedAt.getTime() - a.updatedAt.getTime();
  });
}

export default async function AdminUserUploadsPage() {
  await requireSuperAdmin();
  const [posts, videos, gallery] = await Promise.all([
    prisma.post.findMany({
      include: { author: true },
      orderBy: [{ approvalStatus: "asc" }, { updatedAt: "desc" }],
      where: { author: { role: "USER" } }
    }),
    prisma.video.findMany({
      include: { author: true },
      orderBy: [{ approvalStatus: "asc" }, { updatedAt: "desc" }],
      where: { author: { role: "USER" } }
    }),
    prisma.galleryImage.findMany({
      include: { author: true },
      orderBy: [{ approvalStatus: "asc" }, { updatedAt: "desc" }],
      where: { author: { role: "USER" } }
    })
  ]);

  const blogUploads: UserUploadItem[] = sortUploads(posts).map((item) => ({
    id: item.id,
    modifyHref: `/admin/posts/${item.id}`,
    reason: item.rejectionReason,
    status: item.approvalStatus,
    title: item.title,
    type: "post",
    typeLabel: "Blog article",
    updatedAt: item.updatedAt,
    user: item.author?.name ?? "Unknown",
    viewHref: item.slug ? `/articles/${item.slug}` : undefined
  }));

  const videoUploads: UserUploadItem[] = sortUploads(videos).map((item) => ({
    id: item.id,
    modifyHref: `/admin/videos/${item.id}`,
    reason: item.rejectionReason,
    status: item.approvalStatus,
    title: item.title,
    type: "video",
    typeLabel: "Video",
    updatedAt: item.updatedAt,
    user: item.author?.name ?? "Unknown",
    viewHref: item.slug ? `/videos/${item.slug}` : undefined
  }));

  const galleryUploads: UserUploadItem[] = sortUploads(gallery).map((item) => ({
    id: item.id,
    modifyHref: "/admin/gallery",
    reason: item.rejectionReason,
    status: item.approvalStatus,
    title: item.title,
    type: "gallery",
    typeLabel: "Gallery image",
    updatedAt: item.updatedAt,
    user: item.author?.name ?? "Unknown",
    viewHref: "/gallery"
  }));

  const allUploads = [...blogUploads, ...videoUploads, ...galleryUploads];
  const pendingCount = allUploads.filter((item) => item.status === "PENDING").length;

  return (
    <AdminAutoLayout
      description="Review public user submissions by content type. Approve, reject, modify, or delete any upload."
      eyebrow="User submissions"
      title="Uploaded by users"
      width="full"
    >
      <div className="admin-upload-summary">
        <div className="admin-upload-summary__stat">
          <span className="pill">Blog articles</span>
          <strong>{blogUploads.length}</strong>
          <p className="muted">
            {blogUploads.filter((item) => item.status === "PENDING").length} pending review
          </p>
        </div>
        <div className="admin-upload-summary__stat">
          <span className="pill">Videos</span>
          <strong>{videoUploads.length}</strong>
          <p className="muted">
            {videoUploads.filter((item) => item.status === "PENDING").length} pending review
          </p>
        </div>
        <div className="admin-upload-summary__stat">
          <span className="pill">Gallery</span>
          <strong>{galleryUploads.length}</strong>
          <p className="muted">
            {galleryUploads.filter((item) => item.status === "PENDING").length} pending review
          </p>
        </div>
      </div>

      <div className="admin-upload-sections">
        <UserUploadCategorySection
          description="Blog posts submitted from the public user dashboard."
          emptyMessage="No user blog articles yet."
          items={blogUploads}
          title="Blog articles"
        />
        <UserUploadCategorySection
          description="Videos uploaded by registered users awaiting moderation."
          emptyMessage="No user videos yet."
          items={videoUploads}
          title="Videos"
        />
        <UserUploadCategorySection
          description="Gallery images contributed by users for the public gallery page."
          emptyMessage="No user gallery images yet."
          items={galleryUploads}
          title="Gallery images"
        />
      </div>

      {allUploads.length === 0 ? (
        <p className="admin-empty-state admin-upload-empty">No user uploads yet. Items will appear here by category.</p>
      ) : null}

      {pendingCount > 0 ? (
        <p className="muted admin-upload-footer-note">
          {pendingCount} item{pendingCount === 1 ? "" : "s"} waiting for your review across all categories.
        </p>
      ) : null}
    </AdminAutoLayout>
  );
}