import { db } from "@/db";
import { blogPosts } from "@/db/schema";
import { desc } from "drizzle-orm";
import Link from "next/link";
import { Plus, Edit3, Eye } from "lucide-react";

export const dynamic = "force-dynamic";
export const metadata = { title: "Blog | MediTransplant Admin" };

async function getPosts() {
  try {
    return await db.select().from(blogPosts).orderBy(desc(blogPosts.publishedAt));
  } catch {
    return [];
  }
}

export default async function BlogAdminPage() {
  const posts = await getPosts();

  return (
    <div className="space-y-4 max-w-4xl">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg font-bold text-slate-900">Blog Posts</h1>
          <p className="text-xs text-slate-500">{posts.length} published articles</p>
        </div>
        <button className="flex items-center gap-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors">
          <Plus className="w-3.5 h-3.5" />
          New Post
        </button>
      </div>

      <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
        <div className="divide-y divide-slate-50">
          {posts.map((post) => (
            <div key={post.id} className="flex items-center gap-4 px-4 py-3 hover:bg-slate-50 transition-colors">
              <div className="flex-1 min-w-0">
                <p className="text-sm font-semibold text-slate-800 truncate">{post.title}</p>
                <div className="flex items-center gap-2 mt-0.5">
                  {post.category && (
                    <span className="text-[10px] text-purple-600 bg-purple-50 px-2 py-0.5 rounded-full font-medium">
                      {post.category}
                    </span>
                  )}
                  <span className={`text-[10px] font-medium ${post.isPublished ? "text-green-600" : "text-slate-400"}`}>
                    {post.isPublished ? "Published" : "Draft"}
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Link
                  href={`/blog/${post.slug}`}
                  target="_blank"
                  className="p-1.5 hover:bg-slate-100 rounded-lg transition-colors"
                >
                  <Eye className="w-3.5 h-3.5 text-slate-500" />
                </Link>
                <button className="p-1.5 hover:bg-slate-100 rounded-lg transition-colors">
                  <Edit3 className="w-3.5 h-3.5 text-slate-500" />
                </button>
              </div>
            </div>
          ))}
          {posts.length === 0 && (
            <div className="text-center py-12 text-sm text-slate-400">No blog posts yet.</div>
          )}
        </div>
      </div>
    </div>
  );
}