import { notFound } from "next/navigation";
import Image from "next/image";
import { prisma } from "@/lib/prisma";
import { BlogPostCommentForm } from "./comment-form";
import { AnimatedSection } from "@/components/animated-section";
import { SetBreadcrumbLabels } from "@/components/breadcrumb-context";
import { createPageMetadata } from "@/lib/seo/metadata";
import { isStoredUploadUrl } from "@/lib/uploads/url";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await prisma.blogPost.findFirst({
    where: { slug, status: "PUBLISHED" },
    select: { titleFa: true, excerptFa: true, coverImageUrl: true, publishedAt: true, updatedAt: true },
  });
  if (!post) return {};
  return createPageMetadata({
    title: post.titleFa,
    description: post.excerptFa,
    path: `/blog/${slug}`,
    image: post.coverImageUrl,
    type: "article",
    publishedTime: post.publishedAt?.toISOString(),
    modifiedTime: post.updatedAt.toISOString(),
  });
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await prisma.blogPost.findFirst({
    where: { slug, status: "PUBLISHED" },
    include: { category: true },
  });
  if (!post) notFound();

  const youtubeUrls = (Array.isArray(post.youtubeUrls) ? post.youtubeUrls : (post.youtubeUrls as unknown as string[]) ?? []) as string[];

  const approvedComments = await prisma.comment.findMany({
    where: { blogPostId: post.id, status: "APPROVED" },
    include: { user: { select: { phone: true } } },
    orderBy: { createdAt: "desc" },
  });

  return (
    <article className="container mx-auto px-4 py-12 max-w-3xl">
      <SetBreadcrumbLabels labels={{ [slug]: post.titleFa }} />
      <AnimatedSection>
        <p className="text-sm text-muted-foreground mb-2">{post.category.nameFa}</p>
        <h1 className="text-3xl font-bold mb-4">{post.titleFa}</h1>
        <p className="text-muted-foreground mb-6">
        {post.publishedAt && new Date(post.publishedAt).toLocaleDateString("fa-IR")}
      </p>
      {post.coverImageUrl && (
        <div className="relative aspect-video rounded-lg overflow-hidden mb-8">
          <Image
            src={post.coverImageUrl}
            alt=""
            fill
            className="object-cover"
            priority
            unoptimized={post.coverImageUrl.startsWith("http") || isStoredUploadUrl(post.coverImageUrl)}
          />
        </div>
      )}
      <div className="prose prose-sm max-w-none whitespace-pre-wrap mb-8">
        {post.content}
      </div>
      {youtubeUrls.length > 0 && (
        <div className="space-y-4 mb-8">
          {youtubeUrls.map((url, i) => (
            <div key={i} className="aspect-video rounded-lg overflow-hidden">
              <VideoEmbed url={url} />
            </div>
          ))}
        </div>
      )}
      </AnimatedSection>
      <AnimatedSection delay={0.15}>
      <section className="mt-12">
        <h2 className="text-xl font-semibold mb-4">نظرات</h2>
        <BlogPostCommentForm slug={post.slug} />
        <ul className="mt-6 space-y-4">
          {approvedComments.map((c) => (
            <li key={c.id} className="border rounded-lg p-4">
              <p className="text-sm text-muted-foreground mb-1">
                {c.user.phone} — {new Date(c.createdAt).toLocaleDateString("fa-IR")}
              </p>
              <p className="text-sm whitespace-pre-wrap">{c.content}</p>
            </li>
          ))}
        </ul>
      </section>
      </AnimatedSection>
    </article>
  );
}

function VideoEmbed({ url }: { url: string }) {
  const trimmed = url.trim();
  if (!trimmed) return <p className="text-sm text-muted-foreground">لینک ویدیو</p>;

  try {
    const u = new URL(trimmed);

    // YouTube
    let ytId = "";
    if (u.hostname.includes("youtube.com") && u.searchParams.get("v")) {
      ytId = u.searchParams.get("v")!;
    } else if (u.hostname === "youtu.be") {
      ytId = u.pathname.slice(1).replace(/^\//, "");
    }
    if (ytId) {
      return (
        <iframe
          src={`https://www.youtube.com/embed/${ytId}`}
          title="YouTube"
          className="w-full h-full"
          allowFullScreen
        />
      );
    }

    // Aparat: https://www.aparat.com/v/VIDEO_HASH or https://aparat.com/v/VIDEO_HASH
    if (u.hostname.replace(/^www\./, "") === "aparat.com") {
      const match = u.pathname.match(/\/v\/([^/?#]+)/);
      const aparatId = match?.[1];
      if (aparatId) {
        return (
          <iframe
            src={`https://www.aparat.com/video/video/embed/videohash/${aparatId}/vt/frame`}
            title="آپارات"
            className="w-full h-full"
            allowFullScreen
          />
        );
      }
    }
  } catch {
    // fallback
  }
  return <p className="text-sm text-muted-foreground">لینک ویدیو (یوتیوب یا آپارات)</p>;
}