import { BreadcrumbItem } from '@/app/components/Frontend/Breadcrumb';
import BlogDetailHero from '@/app/components/Frontend/Blogdetailhero';
import HTMLContentDisplay from '@/app/components/Frontend/HTMLContentDisplay';
import JsonLdSchemas from '@/app/components/Frontend/JsonLdSchemas';
import { renderSidebarWidget } from '@/lib/page-builder/sidebar-widget-registry';
import { SidebarWidgetProps, SidebarWidgetType } from '@/lib/page-builder/container-types';
import { Metadata } from 'next';
import React from 'react';
import AuthorCard from '@/app/components/Frontend/Authorcard';

type PageProps = {
  params: Promise<{ slug: string }>;
};

type SidebarWidget = {
  id: string;
  type: SidebarWidgetType;
  props: SidebarWidgetProps;
};

async function getBlogDetail(slug: string) {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/frontend/getBlogDetail/${slug}`,
    { method: 'GET' },
  );
  if (!res.ok) throw new Error('Failed to fetch Post data');
  return res.json();
}

// ── Metadata ──────────────────────────────────────────────────────────────────

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const Mdata = await getBlogDetail(slug);
  const title = Mdata?.data?.post_meta_title || 'Website Meta Title';
  const description = Mdata?.data?.post_meta_description || 'Website Meta Description';
  const canonicalURL = `${process.env.NEXT_PUBLIC_APP_URL}/blog/${Mdata?.data?.post_slug}`;

  return {
    title,
    description,
    alternates: { canonical: canonicalURL },
    openGraph: {
      title,
      description,
      url: process.env.NEXT_PUBLIC_APP_URL,
      siteName: process.env.NEXT_PUBLIC_API_WEBSITE_NAME,
      images: [
        {
          url: Mdata?.data?.post_featured_image || '/images/og-image.jpg',
          width: 1200,
          height: 630,
          alt: Mdata?.data?.post_featured_image_alt_text,
        },
      ],
      type: 'website',
    },
    twitter: { card: 'summary', title, description },
    robots: {
      index: Mdata?.data?.is_indexable,
      follow: Mdata?.data?.is_indexable,
    },
  };
}

// ── Helpers ───────────────────────────────────────────────────────────────────

function buildBreadcrumbs(blogData: Record<string, unknown>): BreadcrumbItem[] {
  const data = blogData?.data as Record<string, unknown> | undefined;

  if (Array.isArray(data?.breadcrumbs)) {
    return data.breadcrumbs as BreadcrumbItem[];
  }

  return [
    { label: 'Home', href: '/' },
    { label: 'Blog', href: '/blog' },
    { label: (data?.post_title as string) || (data?.post_meta_title as string) || 'Page' },
  ];
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default async function BlogDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const blogData = await getBlogDetail(slug);

  const schemas = blogData?.data?.page_schemas ?? [];
  const breadcrumbs = buildBreadcrumbs(blogData);

  const heroTitle: string =
    blogData?.data?.post_title ||
    blogData?.data?.post_meta_title ||
    'Page Title';

  const heroDescription: string | undefined =
    blogData?.data?.post_excerpt || undefined;

  const heroMeta = {
    date: blogData?.data?.post_create_date
      ? new Date(blogData.data.post_create_date).toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
        })
      : undefined,
    readTime:
      blogData?.data?.reading_time_minutes > 1
        ? `${blogData.data.reading_time_minutes} mins read`
        : blogData?.data?.reading_time_minutes === 1
        ? '1 min read'
        : undefined,
    author: blogData?.data?.author || undefined,
  };

  // ── Sidebar resolution ────────────────────────────────────────────────────
  const hasSidebar = !!blogData?.data?.post_sidebar_id && !!blogData?.data?.sidebar;
  const showOnMobile: boolean = hasSidebar && blogData.data.post_sidebar_on_mobile === true;
  const widgets: SidebarWidget[] = hasSidebar
    ? (blogData.data.sidebar.widgets as SidebarWidget[]) ?? []
    : [];

  return (
    <div className="min-h-screen">
      <JsonLdSchemas schemas={schemas} />

      {/* ── Hero ── */}
      <BlogDetailHero
        title={heroTitle}
        description={heroDescription}
        breadcrumbs={breadcrumbs}
        meta={heroMeta}
        badge={blogData?.data?.category || undefined}
        featuredImage={blogData?.data?.post_featured_image || undefined}
        featuredImageAlt={blogData?.data?.post_featured_image_alt_text || heroTitle}
        variant="ember"
      />

      {/* ── Article body ── */}
      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
      {hasSidebar ? (
        // ── Two-column layout with sidebar ──────────────────────────────
        <div className="flex flex-col lg:flex-row gap-10 lg:gap-14 items-start">

          {/* Main content */}
          <article className="w-full min-w-0 flex-1">
            <HTMLContentDisplay
              content={blogData?.data?.post_content || '<p>No content available.</p>'}
              className="blog-content"
            />
            {blogData?.data?.author?.id && (
              <AuthorCard author={blogData.data.author} />
            )}
          </article>

          {/* Sidebar — hidden on mobile when post_sidebar_on_mobile is false */}
          <aside
            className={[
              'w-full lg:w-80 xl:w-96 shrink-0 flex flex-col gap-6',
              showOnMobile ? 'block' : 'hidden lg:flex',
            ].join(' ')}
          >
            {widgets.map(widget => (
              <div key={widget.id}>
                {renderSidebarWidget(widget)}
              </div>
            ))}
          </aside>

        </div>
      ) : (
        // ── Full-width layout (no sidebar) ──────────────────────────────
        <article>
          <HTMLContentDisplay
            content={blogData?.data?.post_content || '<p>No content available.</p>'}
            className="blog-content"
          />
          {blogData?.data?.author?.id && (
            <AuthorCard author={blogData.data.author} />
          )}
        </article>
      )}
    </main>
    </div>
  );
}