import Link from "next/link";
import { notFound } from "next/navigation";
import { requireSuperAdmin } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

type AdminCategoryViewPageProps = {
  params: Promise<{ id: string }>;
};

export default async function AdminCategoryViewPage({ params }: AdminCategoryViewPageProps) {
  const session = await requireSuperAdmin();
  const { id } = await params;
  const category = await prisma.category.findUnique({
    include: {
      posts: { orderBy: { updatedAt: "desc" }, take: 8 },
      videos: { orderBy: { updatedAt: "desc" }, take: 8 }
    },
    where: { id }
  });

  if (!category) {
    notFound();
  }

  return (
      <>

      <div className="section-head">
        <div>
          <span className="pill">Category Preview</span>
          <h1 className="admin-title">{category.name}</h1>
          <p className="muted">{category.description || "No description"}</p>
        </div>
        <Link className="btn btn-secondary" href="/admin/categories">Back to Categories</Link>
      </div>

      <section className="dashboard-grid">
        <div className="glass-panel span-6">
          <div className="admin-panel-heading">
            <div>
              <span className="pill">{category.posts.length} shown</span>
              <h2>Blog Posts</h2>
            </div>
          </div>
          <div className="admin-list">
            {category.posts.map((post) => (
              <Link className="admin-list-item" href={`/admin/posts/${post.id}/view`} key={post.id}>
                <span>
                  <strong>{post.title}</strong>
                  <span className="muted">{post.approvalStatus}</span>
                </span>
              </Link>
            ))}
            {category.posts.length === 0 ? <p className="admin-empty-state">No posts in this category.</p> : null}
          </div>
        </div>

        <div className="glass-panel span-6">
          <div className="admin-panel-heading">
            <div>
              <span className="pill">{category.videos.length} shown</span>
              <h2>Videos</h2>
            </div>
          </div>
          <div className="admin-list">
            {category.videos.map((video) => (
              <Link className="admin-list-item" href={`/admin/videos/${video.id}`} key={video.id}>
                <span>
                  <strong>{video.title}</strong>
                  <span className="muted">{video.approvalStatus}</span>
                </span>
              </Link>
            ))}
            {category.videos.length === 0 ? <p className="admin-empty-state">No videos in this category.</p> : null}
          </div>
        </div>
      </section>
      </>
    );
}