import { getBlogs, deleteBlog } from "@/lib/actions/blog";
import { DeleteButton } from "@/components/dashboard/DeleteButton";
import {
  Plus,
  Search,
  MoreVertical,
  Edit2,
  Trash2,
  FileText,
  Eye,
  Calendar,
  AlertCircle,
} from "lucide-react";
import Link from "next/link";
import { format } from "date-fns";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

export default async function DashboardBlogPage() {
  const blogs = await getBlogs();

  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <h1 className="text-3xl font-display font-bold text-foreground">
            Blog Posts
          </h1>
          <p className="text-foreground-muted">
            Manage your articles, thoughts, and announcements.
          </p>
        </div>
        <Link
          href="/dashboard/blog/new"
          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-all shadow-sm shadow-primary/20"
        >
          <Plus size={18} />
          Create Post
        </Link>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Search & Filter */}
        <div className="md:col-span-2 relative group mt-2">
          <Search
            className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
            size={18}
          />
          <input
            type="text"
            placeholder="Search posts by title..."
            className="w-full pl-10 pr-4 py-2.5 bg-surface border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
          />
        </div>
        <div className="flex items-center gap-2 justify-end">
          <div className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">
            Total: {blogs.length} Posts
          </div>
        </div>
      </div>

      <div className="bg-surface border border-border/50 rounded-2xl overflow-hidden shadow-sm shadow-black/5">
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-border/50 bg-surface-elevated/50">
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Post
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
                  Date
                </th>
                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider text-right">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border/50">
              {blogs.map((blog) => (
                <tr
                  key={blog.id}
                  className="hover:bg-surface-elevated/30 transition-colors group"
                >
                  <td className="px-6 py-5">
                    <div className="flex items-center gap-4">
                      <div className="hidden sm:flex w-12 h-12 rounded-xl bg-primary/5 border border-primary/10 items-center justify-center shrink-0">
                        <FileText size={20} className="text-primary" />
                      </div>
                      <div className="min-w-0">
                        <Link
                          href={`/blog/${blog.slug}`}
                          className="text-sm font-semibold text-foreground hover:text-primary transition-colors line-clamp-1 flex items-center gap-1.5"
                        >
                          {blog.title}
                          <Eye size={12} className="opacity-0 group-hover:opacity-100 transition-opacity" />
                        </Link>
                        <div className="text-xs text-foreground-muted flex flex-wrap gap-2 mt-1">
                          {blog.tags.map((tag) => (
                            <span key={tag.id}>#{tag.name}</span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-5">
                    <span
                      className={cn(
                        "inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider",
                        blog.status === "PUBLISHED"
                          ? "bg-green-500/10 text-green-500 border border-green-500/20"
                          : blog.status === "DRAFT"
                          ? "bg-yellow-500/10 text-yellow-500 border border-yellow-500/20"
                          : "bg-blue-500/10 text-blue-500 border border-blue-500/20",
                      )}
                    >
                      {blog.status}
                    </span>
                  </td>
                  <td className="px-6 py-5">
                    <div className="flex flex-col">
                      <div className="text-sm text-foreground flex items-center gap-1.5">
                        <Calendar size={13} className="text-foreground-muted" />
                        {format(new Date(blog.createdAt), "MMM dd, yyyy")}
                      </div>
                      <span className="text-[10px] text-foreground-muted mt-0.5">
                        Added {blog.createdAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                      </span>
                    </div>
                  </td>
                  <td className="px-6 py-5 text-right whitespace-nowrap">
                    <div className="flex items-center justify-end gap-2">
                      <Link
                        href={`/dashboard/blog/edit/${blog.id}`}
                        className="p-2 text-foreground-muted hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
                        title="Edit"
                      >
                        <Edit2 size={16} />
                      </Link>
                      <DeleteButton id={blog.id} onDelete={deleteBlog} />
                    </div>
                  </td>
                </tr>
              ))}

              {blogs.length === 0 && (
                <tr>
                  <td colSpan={4} className="px-6 py-20 text-center">
                    <div className="flex flex-col items-center gap-3">
                      <AlertCircle size={40} className="text-foreground-muted opacity-20" />
                      <div>
                        <p className="text-foreground font-medium">No blog posts found</p>
                        <p className="text-sm text-foreground-muted">Get started by creating your first article.</p>
                      </div>
                      <Link
                        href="/dashboard/blog/new"
                        className="mt-2 text-sm text-primary font-medium hover:underline"
                      >
                        Create your first post
                      </Link>
                    </div>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
