import React from 'react';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getLocale } from 'next-intl/server';

// Blog components
import TechnicalGrid from './blog/TechnicalGrid';
import Stats from './blog/Stats';
import VisualLinkPreview from './blog/VisualLinkPreview';
import StickyNarrative from './blog/StickyNarrative';
import ComparisonGrid from './blog/ComparisonGrid';
import HighlightBox from './blog/HighlightBox';
import ChatBubble from './blog/ChatBubble';

// Home components
import Hero from './home/Hero';
import ProductCategories from './home/ProductCategories';
import WhatWeDo from './home/WhatWeDo';
import RecentPosts from './home/RecentPosts';
import Experience from './home/Experience';
import WhyChooseUs from './home/WhyChooseUs';
import MeetTheTeam from './home/MeetTheTeam';
import GallerySection from './home/GallerySection';
import VideoSection from './home/VideoSection';
import CTA from './home/CTA';
import { AgbHistoryBlock } from './AgbHistoryBlock';
import { PDFDownloadBlock } from './PDFDownloadBlock';
function ContactSection(props: any) {
  return (
    <div className="p-8 border-2 border-dashed border-primary my-8 text-center text-primary font-bold">
      Contact Section Placeholder
    </div>
  );
}

function HeroSection(props: any) {
  return (
    <div className="p-16 bg-primary-dark text-white text-center my-8">
      <h1 className="text-4xl font-bold">{props.title}</h1>
      <p>{props.subtitle}</p>
    </div>
  );
}

async function Block(props: any) {
  const { type, children } = props;
  let { data } = props;
  const locale = await getLocale();

  // If data was passed as a JSON string (via our lib/blog.ts fix), parse it back
  if (typeof data === 'string') {
    try {
      data = JSON.parse(data);
    } catch (e) {
      console.error('Failed to parse MDX block data:', e);
    }
  }

  // Normalize type (Payload sometimes uses blockType in data)
  const blockType = type || data?.blockType;

  switch (blockType) {
    // Blog Components
    case 'technicalGrid':
      return <TechnicalGrid {...data} />;
    case 'stats':
      return <Stats {...data} />;
    case 'visualLinkPreview':
      return <VisualLinkPreview {...data} />;
    case 'stickyNarrative':
      return <StickyNarrative {...data} />;
    case 'comparisonGrid':
      return <ComparisonGrid {...data} />;
    case 'highlightBox':
      return <HighlightBox {...data}>{children}</HighlightBox>;
    case 'chatBubble':
      return <ChatBubble {...data}>{children}</ChatBubble>;

    // Home Components
    case 'homeHero':
      return <Hero data={data} />;
    case 'homeProductCategories':
      return <ProductCategories data={data} />;
    case 'homeWhatWeDo':
      return <WhatWeDo data={data} />;
    case 'homeRecentPosts':
      return <RecentPosts data={data} locale={locale} />;
    case 'homeExperience':
      return <Experience data={data} />;
    case 'homeWhyChooseUs':
      return <WhyChooseUs data={data} />;
    case 'homeMeetTheTeam':
      return <MeetTheTeam data={data} />;
    case 'homeGallery':
      return <GallerySection data={data} />;
    case 'homeVideo':
      return <VideoSection data={data} />;
    case 'homeCTA':
      return <CTA data={data} />;
    case 'agbHistory':
      return <AgbHistoryBlock {...data} />;
    case 'pdfDownload':
      return <PDFDownloadBlock {...data} />;

    default:
      return (
        <div className="p-8 border-2 border-dashed border-red-200 rounded-2xl my-8 bg-red-50 text-red-600">
          <p className="font-bold mb-2">Unknown Block Type: {blockType}</p>
          <pre className="text-xs overflow-auto p-4 bg-white/50 rounded">
            {JSON.stringify({ type, data: !!data, hasChildren: !!children }, null, 2)}
          </pre>
        </div>
      );
  }
}

const components = {
  ContactSection,
  HeroSection,
  Block,
  // Add other components that could be in MDX here
};

export default function MDXContent({ data, className }: { data: string; className?: string }) {
  if (!data) return null;

  return (
    <div className={className}>
      <MDXRemote source={data} components={components} />
    </div>
  );
}