import { prisma } from "@/lib/prisma";
import { format } from "date-fns";
import Link from "next/link";
import {
  Calendar,
  Clock,
  ArrowRight,
  Tag as TagIcon,
  Search,
} from "lucide-react";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

async function getPublishedBlogs() {
  return await prisma.blog.findMany({
    where: { status: "PUBLISHED" },
    orderBy: { publishedAt: "desc" },
    include: { tags: true },
  });
}

export default async function BlogPage() {
  const blogs = await getPublishedBlogs();

  return (
    <div className="min-h-screen pt-32 pb-20 bg-background overflow-hidden relative">
      {/* Decorative Background Elements */}
      <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -z-10" />
      <div className="absolute bottom-40 right-1/4 w-[400px] h-[400px] bg-blue-500/5 rounded-full blur-[100px] -z-10" />

      <div className="max-w-6xl mx-auto px-6">
        {/* Header Section */}
        <div className="flex flex-col gap-6 mb-16 relative">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider w-fit">
            <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
            Writing & Thoughts
          </div>
          <h1 className="text-5xl md:text-7xl font-display font-bold tracking-tight text-foreground">
            Blog<span className="text-primary">.</span>
          </h1>
          <p className="max-w-xl text-lg text-foreground-muted leading-relaxed">
            Exploring the world of fullstack development, architecture, and
            developer productivity. Sharing what I learn along the way.
          </p>

          <div className="mt-4 flex flex-col md:flex-row gap-4 items-center">
            <div className="relative w-full max-w-md group">
              <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 articles..."
                className="w-full pl-10 pr-4 py-3 bg-surface/50 backdrop-blur-sm border border-border/50 rounded-2xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
              />
            </div>
          </div>
        </div>

        {/* Featured / Grid Segment */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {blogs.map((blog, index) => (
            <BlogCard key={blog.id} blog={blog} index={index} />
          ))}

          {blogs.length === 0 && (
            <div className="col-span-full py-20 flex flex-col items-center text-center gap-4 bg-surface/30 backdrop-blur-sm border border-border/50 rounded-3xl">
              <div className="w-16 h-16 rounded-full bg-primary/5 flex items-center justify-center">
                <Clock className="text-primary/40" size={32} />
              </div>
              <div className="space-y-1">
                <h3 className="text-xl font-display font-semibold text-foreground">
                  No publications yet
                </h3>
                <p className="text-foreground-muted max-w-xs">
                  Writing takes time. Check back soon for new insights and
                  stories.
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function BlogCard({ blog, index }: { blog: any; index: number }) {
  return (
    <Link
      href={`/blog/${blog.slug}`}
      className="group flex flex-col bg-surface/40 backdrop-blur-md border border-border/50 rounded-3xl overflow-hidden hover:border-primary/30 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/5 hover:-translate-y-1"
    >
      <div className="p-8 flex flex-col h-full">
        <div className="flex items-center gap-3 mb-6">
          <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
            <Calendar size={12} className="text-primary/60" />
            {blog.publishedAt
              ? format(new Date(blog.publishedAt), "MMM dd, yyyy")
              : "Draft"}
          </div>
          <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
            <Clock size={12} className="text-primary/60" />5 min read
          </div>
        </div>

        <h2 className="text-2xl font-display font-bold text-foreground mb-4 group-hover:text-primary transition-colors line-clamp-2 leading-tight">
          {blog.title}
        </h2>

        <p className="text-foreground-muted text-sm leading-relaxed line-clamp-3 mb-8">
          {blog.excerpt ||
            "No excerpt available for this post. Click to read the full article."}
        </p>

        <div className="mt-auto pt-6 border-t border-border/20 flex items-center justify-between">
          <div className="flex flex-wrap gap-2">
            {blog.tags.slice(0, 2).map((tag: any) => (
              <span
                key={tag.id}
                className="text-[10px] font-bold uppercase tracking-widest text-foreground-muted/60 flex items-center gap-1"
              >
                <span className="w-1 h-1 rounded-full bg-primary" />
                {tag.name}
              </span>
            ))}
          </div>
          <div className="p-2 rounded-full bg-primary/10 text-primary -rotate-45 group-hover:rotate-0 transition-transform duration-500">
            <ArrowRight size={16} />
          </div>
        </div>
      </div>
    </Link>
  );
}
