"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";
import { Pencil, Trash2, ExternalLink } from "lucide-react";

type Blog = {
  id: string;
  title: string;
  slug: string;
  author: string;
  image: string;
  createdAt: Date;
  updatedAt: Date;
};

export function BlogsTable({ initialBlogs }: { initialBlogs: Blog[] }) {
  const [blogs, setBlogs] = useState(initialBlogs);

  async function deleteBlog(id: string) {
    if (!confirm("Delete this blog post permanently?")) return;
    const res = await fetch(`/api/admin/blogs/${id}`, { method: "DELETE" });
    if (res.ok) setBlogs((prev) => prev.filter((b) => b.id !== id));
  }

  if (blogs.length === 0) {
    return (
      <div className="glass rounded-2xl p-10 text-center">
        <p className="text-gray-500 mb-4">No blog posts yet.</p>
        <Link href="/admin/blogs/new" className="inline-flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl text-sm neon-border-blue">
          Write your first post
        </Link>
      </div>
    );
  }

  return (
    <div className="glass rounded-2xl overflow-hidden">
      <AnimatePresence>
        {blogs.map((blog) => (
          <motion.div
            key={blog.id}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="flex items-center justify-between px-6 py-5 border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors group"
          >
            <div className="flex items-center gap-4 min-w-0">
              {blog.image ? (
                <div className="w-12 h-12 rounded-xl bg-cover bg-center shrink-0 border border-white/10" style={{ backgroundImage: `url(${blog.image})` }} />
              ) : (
                <div className="w-12 h-12 rounded-xl bg-primary/10 border border-white/10 shrink-0 flex items-center justify-center">
                  <span className="text-primary text-xl font-bold">{blog.title.charAt(0)}</span>
                </div>
              )}
              <div className="min-w-0">
                <p className="font-semibold text-white truncate">{blog.title}</p>
                <p className="text-sm text-gray-500">
                  by {blog.author} · <span className="font-mono text-xs">/blog/{blog.slug}</span>
                </p>
              </div>
            </div>

            <div className="flex items-center gap-2 shrink-0 ml-4">
              <time className="text-xs text-gray-500 hidden lg:block">{new Date(blog.updatedAt).toLocaleDateString()}</time>
              <Link href={`/admin/blogs/${blog.id}`} className="p-2 rounded-lg text-gray-400 hover:text-primary hover:bg-primary/10 transition-all" title="Edit">
                <Pencil className="w-4 h-4" />
              </Link>
              <a href={`/blog/${blog.slug}`} target="_blank" rel="noreferrer" className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-all" title="Preview">
                <ExternalLink className="w-4 h-4" />
              </a>
              <button onClick={() => deleteBlog(blog.id)} className="p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-all" title="Delete">
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}