// src/app/(root)/[slug]/page.tsx

import DetailHeroSection from '@/app/components/Frontend/Detailherosection';
import { Metadata } from 'next';
import JsonLdSchemas from '@/app/components/Frontend/JsonLdSchemas';
import DynamicComponent from '@/app/components/Frontend/DynamicComponent';
import { PageComponent, ContainerComponentProps } from '@/lib/page-builder/types';
import { BreadcrumbItem } from '@/app/components/Frontend/Breadcrumb';

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

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

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

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const Mdata = await getPageData(slug);
  const title = Mdata?.data?.page_meta_title || 'Website Meta Title';
  const description = Mdata?.data?.page_meta_description || 'Website Meta Description';
  const canonicalURL = `${process.env.NEXT_PUBLIC_APP_URL}/${Mdata?.data?.page_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,
      type: 'website',
    },
    twitter: { card: 'summary', title, description },
    robots: {
      index: Mdata?.data?.is_indexable,
      follow: Mdata?.data?.is_indexable,
    },
  };
}

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

function isContainer(
  comp: PageComponent,
): comp is PageComponent & { props: ContainerComponentProps } {
  return comp.type === 'Container';
}

function getTopLevelComponents(components: PageComponent[]): PageComponent[] {
  const childIds = new Set<string>();
  for (const comp of components) {
    if (isContainer(comp)) {
      for (const id of comp.props.childComponentIds ?? []) {
        childIds.add(id);
      }
    }
  }
  return components.filter((comp) => !childIds.has(comp.id));
}

/**
 * Build breadcrumbs from page data.
 * Adjust the field names to match your actual API response shape.
 */
function buildBreadcrumbs(pageData: Record<string, unknown>): BreadcrumbItem[] {
  const data = pageData?.data as Record<string, unknown> | undefined;

  // If your API returns a ready-made breadcrumb array, use it directly:
  if (Array.isArray(data?.breadcrumbs)) {
    return data.breadcrumbs as BreadcrumbItem[];
  }

  // Otherwise build a two-level fallback: Home → Current page
  return [
    { label: 'Home', href: '/' },
    { label: (data?.page_title as string) || (data?.page_meta_title as string) || 'Page' },
  ];
}

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

export default async function DynamicPages({ params }: PageProps) {
  const { slug } = await params;
  const pageData = await getPageData(slug);

  const schemas = pageData?.data?.page_schemas ?? [];
  const allComponents: PageComponent[] = pageData?.data?.builder_data?.components ?? [];
  const topLevelComponents = getTopLevelComponents(allComponents);

  // ── Hero data derived from page API response ──
  const breadcrumbs = buildBreadcrumbs(pageData);

  const heroTitle: string =
    pageData?.data?.page_title ||
    pageData?.data?.page_meta_title ||
    'Page Title';

  const heroDescription: string | undefined =
    pageData?.data?.page_short_description || undefined;

  // Optional: pull tags / author / date from your data shape
  const heroMeta = {
    date: pageData?.data?.published_at
      ? new Date(pageData.data.published_at).toLocaleDateString('en-US', {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
        })
      : undefined,
    readTime: pageData?.data?.read_time || undefined,
    author: pageData?.data?.author_name || undefined,
    tags: Array.isArray(pageData?.data?.tags) ? pageData.data.tags : undefined,
  };

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

      {/* ── Details Hero with breadcrumb built-in ── */}
      <DetailHeroSection
        title={heroTitle}
        description={heroDescription}
        breadcrumbs={breadcrumbs}
        meta={heroMeta}
        badge={pageData?.data?.page_category || undefined}
        variant="ember"
      />

      {/* ── Page builder content ── */}
      <div className="relative overflow-x-clip">
        {topLevelComponents.map((component) => (
          <DynamicComponent
            key={component.id}
            component={component}
            allComponents={allComponents}
          />
        ))}
      </div>
    </main>
  );
}