import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import type { Prisma } from "@prisma/client";
import { prisma } from "@/lib/prisma";
import Image from "next/image";
import { AnimatedSection } from "@/components/animated-section";
import { createPageMetadata } from "@/lib/seo/metadata";
import { isStoredUploadUrl } from "@/lib/uploads/url";

export const metadata = createPageMetadata({
  title: "وبلاگ",
  description: "مقالات و راهنماهای تاروت — آموزش، تفسیر کارت‌ها و نکات فال‌گیری.",
  path: "/blog",
});

const PER_PAGE = 12;

export default async function BlogListPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string; category?: string; q?: string }>;
}) {
  const { page = "1", category, q } = await searchParams;
  const pageNum = Math.max(1, parseInt(page, 10) || 1);
  const skip = (pageNum - 1) * PER_PAGE;

  const where: Prisma.BlogPostWhereInput = {
    status: "PUBLISHED",
  };
  if (category) where.category = { slug: category };
  if (q?.trim()) {
    const term = q.trim();
    where.OR = [
      { titleFa: { contains: term, mode: "insensitive" } },
      { content: { contains: term, mode: "insensitive" } },
    ];
  }

  const [posts, total, categories] = await Promise.all([
    prisma.blogPost.findMany({
      where,
      include: { category: { select: { nameFa: true, slug: true } } },
      orderBy: { publishedAt: "desc" },
      skip,
      take: PER_PAGE,
    }),
    prisma.blogPost.count({ where }),
    prisma.blogCategory.findMany({ orderBy: { nameFa: "asc" } }),
  ]);

  const totalPages = Math.ceil(total / PER_PAGE);

  return (
    <div className="container mx-auto px-4 py-12">
      <AnimatedSection>
        <h1 className="text-3xl font-bold mb-8">وبلاگ</h1>
        <form method="GET" className="mb-8 flex gap-2 flex-wrap">
        <input
          type="text"
          name="q"
          defaultValue={q}
          placeholder="جستجو..."
          className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
        />
        <select
          name="category"
          defaultValue={category ?? ""}
          className="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm"
        >
          <option value="">همه دسته‌ها</option>
          {categories.map((c) => (
            <option key={c.id} value={c.slug}>
              {c.nameFa}
            </option>
          ))}
        </select>
        <button
          type="submit"
          className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 bg-primary text-primary-foreground"
        >
          اعمال
        </button>
      </form>
      </AnimatedSection>

      <AnimatedSection delay={0.1}>
      {posts.length === 0 ? (
        <p className="text-muted-foreground">مطلبی یافت نشد.</p>
      ) : (
        <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <li key={post.id}>
              <Link href={`/blog/${post.slug}`}>
                <Card className="overflow-hidden h-full transition-shadow hover:shadow-md">
                  {post.coverImageUrl && (
                    <div className="relative aspect-video">
                      <Image
                        src={post.coverImageUrl}
                        alt=""
                        fill
                        className="object-cover"
                        sizes="(max-width: 768px) 100vw, 33vw"
                        unoptimized={
                          post.coverImageUrl.startsWith("http") || isStoredUploadUrl(post.coverImageUrl)
                        }
                      />
                    </div>
                  )}
                  <CardContent className="p-4">
                    <p className="text-xs text-muted-foreground mb-1">
                      {post.category.nameFa}
                    </p>
                    <h2 className="font-semibold">{post.titleFa}</h2>
                    <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
                      {post.excerptFa}
                    </p>
                  </CardContent>
                </Card>
              </Link>
            </li>
          ))}
        </ul>
      )}
      </AnimatedSection>

      {totalPages > 1 && (
        <AnimatedSection delay={0.2}>
        <div className="flex justify-center gap-2 mt-12">
          {pageNum > 1 && (
            <Link
              href={`/blog?page=${pageNum - 1}${category ? `&category=${encodeURIComponent(category)}` : ""}${q ? `&q=${encodeURIComponent(q)}` : ""}`}
              className="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background h-9 px-4"
            >
              قبلی
            </Link>
          )}
          <span className="py-2 text-sm text-muted-foreground">
            صفحه {pageNum} از {totalPages}
          </span>
          {pageNum < totalPages && (
            <Link
              href={`/blog?page=${pageNum + 1}${category ? `&category=${encodeURIComponent(category)}` : ""}${q ? `&q=${encodeURIComponent(q)}` : ""}`}
              className="inline-flex items-center justify-center rounded-md text-sm font-medium border border-input bg-background h-9 px-4"
            >
              بعدی
            </Link>
          )}
        </div>
        </AnimatedSection>
      )}
    </div>
  );
}