import { IconArrowLeft, IconClock } from "@tabler/icons-react";
import { allBlogs, Blog } from "content-collections";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import Image from "next/image";
import Link from "next/link";
import { Logo } from "../logo";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import CTA from "@/components/cta";
import { ActuBridge } from "./actu-bridge";
import { AutoCTA } from "./auto-cta";
import { BlogCardVertical } from "./blog-card";
import { ReadingProgress } from "./reading-progress";
import { ScrollReset } from "./scroll-reset";
import { StickySidebarCTA } from "./sticky-sidebar-cta";
import { TableOfContents } from "./toc";

interface BlogLayoutProps {
  blog: Blog;
  children: React.ReactNode;
  category?: string;
  categoryLabel?: string;
}

export async function BlogLayout({
  blog,
  children,
  category,
  categoryLabel,
}: BlogLayoutProps) {
  // Filter related blogs by same category, excluding current blog
  const relatedBlogs = allBlogs
    .filter((b) => b.category === blog.category && b.slug !== blog.slug)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .slice(0, 3);

  const backHref = category ? `/${category}` : "/";

  return (
    <main>
      <ReadingProgress />
      <ScrollReset />
      {/* Hero image first */}
      <div className="mt-16 lg:mt-14 w-full">
        {blog.image ? (
          <div className="relative h-[25vh] max-h-[300px] w-full">
            <Image
              src={blog.image}
              fill
              sizes="100vw"
              priority
              quality={80}
              style={{ objectFit: "cover", objectPosition: "center" }}
              alt={blog.title}
            />
          </div>
        ) : (
          <div className="h-[65vh] w-full bg-gray-100 flex items-center justify-center">
            <Logo />
          </div>
        )}
      </div>

      <div className="max-w-6xl mx-auto px-4">
        {/* Breadcrumbs */}
        {category && categoryLabel && (
          <Breadcrumb className="px-2 pt-8">
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link href="/">Accueil</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link href={`/${category}`}>{categoryLabel}</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage className="truncate max-w-[250px]">
                  {blog.title}
                </BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        )}

        <div className="flex justify-between items-center px-2 py-8">
          <Link href={backHref} className="flex space-x-2 items-center">
            <IconArrowLeft
              className="w-4 h-4 text-gray-500"
              aria-hidden="true"
            />
            <span className="text-sm text-gray-500">
              {categoryLabel ? `Retour aux ${categoryLabel}` : "Retour"}
            </span>
          </Link>
        </div>

        <div className="xl:relative">
          <div className="mx-auto max-w-7xl">
            <article className="pb-8 pt-8">
              <div className="flex gap-4 flex-wrap items-center">
                {/* Show the actual category as badge */}
                {categoryLabel && (
                  <Link
                    href={`/${category}`}
                    className="prose-xs font-medium text-white px-3 py-0.5 rounded-full bg-orange-600 hover:bg-orange-800 transition-colors uppercase"
                  >
                    {categoryLabel}
                  </Link>
                )}
                {/* Reading time */}
                {blog.readingTime && (
                  <div className="flex items-center space-x-1 text-xs text-gray-500">
                    <IconClock className="w-4 h-4" aria-hidden="true" />
                    <span>{blog.readingTime} min de lecture</span>
                  </div>
                )}
              </div>

              <header className="flex flex-col text">
                <h1 className="mt-8 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
                  {blog.title}
                </h1>
              </header>

              {/* Table of Contents */}
              {blog.toc && blog.toc.length > 0 && (
                <TableOfContents items={blog.toc} />
              )}

              <div
                className="mt-8 w-full mx-auto prose prose-gray sm:prose-base md:prose-lg lg:prose-xl prose-img:m-0"
                data-mdx-content
              >
                {children}
              </div>

              {/* Auto-inject CTAs every 3 H2s */}
              <AutoCTA />

              {/* Sticky sidebar CTA (desktop only) */}
              <StickySidebarCTA />

              <div className="flex space-x-2 items-center pt-12 border-t border-gray-200 mt-12">
                <div className="flex space-x-2 items-center">
                  <Image
                    src={blog.authorAvatar}
                    alt={blog.author}
                    width={40}
                    height={40}
                    className="rounded-full h-6 w-6 md:h-10 md:w-10"
                  />
                  <p className="text-sm md:text-base font-normal text-gray-600">
                    {blog.author}
                  </p>
                </div>
                <div className="h-5 md:h-6 rounded-lg w-0.5 bg-gray-200" />
                <time
                  dateTime={blog.date}
                  className="flex items-center text-base"
                >
                  <span className="text-gray-600 text-sm md:text-base">
                    {format(new Date(blog.date), "d MMMM yyyy", { locale: fr })}
                  </span>
                </time>
                {/* Show update date if different from publish date */}
                {blog.updatedAt && blog.updatedAt !== blog.date && (
                  <>
                    <div className="h-5 rounded-lg w-0.5 bg-gray-200" />
                    <span className="text-gray-500 text-sm">
                      Mis à jour le{" "}
                      {format(new Date(blog.updatedAt), "d MMMM yyyy", {
                        locale: fr,
                      })}
                    </span>
                  </>
                )}
              </div>
            </article>
          </div>
        </div>

        {/* CTA before Related Posts (Gemini Pro: convert before distraction) */}
        <div className="py-16" id="cta-section">
          <CTA />
        </div>

        {relatedBlogs.length > 0 && (
          <div className="mt-4 pb-20">
            <h2 className="text-2xl font-bold text-gray-900 mb-10">
              Articles similaires
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              {relatedBlogs.map((relatedBlog) => (
                <BlogCardVertical
                  key={relatedBlog.slug}
                  blog={{
                    ...relatedBlog,
                    href: `/${relatedBlog.category}/${relatedBlog.slug}`,
                  }}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </main>
  );
}