import prisma from "@/lib/prisma";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import Link from "next/link";
import { BlogPostDeleteButton } from "./BlogPostDeleteButton";

export default async function AdminBlogPostsPage() {
  const session = await auth();
  if (!session?.user || session.user.userType !== "admin") {
    redirect("/login");
  }

  const posts = await prisma.blogPost.findMany({
    orderBy: { created_at: "desc" },
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Blog Posts</h1>
        <Link
          href="/admin/blog-posts/create"
          className="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors text-sm"
        >
          New Post
        </Link>
      </div>

      <p className="text-text-muted text-sm">
        {posts.length} blog posts
      </p>

      <div className="bg-surface rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-surface-light text-text-muted text-sm">
                <th className="p-4 font-medium">ID</th>
                <th className="p-4 font-medium">Title</th>
                <th className="p-4 font-medium">Category</th>
                <th className="p-4 font-medium">Status</th>
                <th className="p-4 font-medium">Views</th>
                <th className="p-4 font-medium">Date</th>
                <th className="p-4 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {posts.map((post) => (
                <tr
                  key={post.id}
                  className="border-b border-surface-light last:border-0 hover:bg-surface-light/50"
                >
                  <td className="p-4 text-text-muted font-mono text-sm">
                    {post.id}
                  </td>
                  <td className="p-4 font-medium max-w-[300px] truncate">
                    {post.title}
                  </td>
                  <td className="p-4">
                    {post.category ? (
                      <span className="inline-block px-2 py-0.5 rounded text-xs font-medium bg-surface-light text-text-muted">
                        {post.category}
                      </span>
                    ) : (
                      <span className="text-text-muted">-</span>
                    )}
                  </td>
                  <td className="p-4">
                    <span
                      className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
                        post.published
                          ? "bg-green-500/20 text-green-400"
                          : "bg-yellow-500/20 text-yellow-400"
                      }`}
                    >
                      {post.published ? "Published" : "Draft"}
                    </span>
                  </td>
                  <td className="p-4 text-text-muted">
                    {post.views.toLocaleString()}
                  </td>
                  <td className="p-4 text-text-muted text-sm">
                    {post.published_at
                      ? new Date(post.published_at).toLocaleDateString()
                      : new Date(post.created_at).toLocaleDateString()}
                  </td>
                  <td className="p-4">
                    <div className="flex gap-3">
                      <Link
                        href={`/blog-posts/${post.slug}`}
                        className="text-text-muted hover:text-white text-sm transition-colors"
                        target="_blank"
                      >
                        View
                      </Link>
                      <Link
                        href={`/admin/blog-posts/edit/${post.id}`}
                        className="text-primary hover:text-primary-dark text-sm transition-colors"
                      >
                        Edit
                      </Link>
                      <BlogPostDeleteButton postId={post.id} />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}