import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { getPostBySlug, getAdjacentPosts } from '@/lib/blog';
import { Metadata } from 'next';

interface BlogPostProps {
  params: {
    locale: string;
    slug: string;
  };
}

export async function generateMetadata({ params: { locale, slug } }: BlogPostProps): Promise<Metadata> {
  const post = await getPostBySlug(slug, locale);
  
  if (!post) return {};

  const description = post.frontmatter.excerpt || '';

  return {
    title: post.frontmatter.title,
    description: description,
    openGraph: {
      title: post.frontmatter.title,
      description: description,
      type: 'article',
      publishedTime: post.frontmatter.date,
      authors: ['KLZ Cables'],
      url: `https://klz-cables.com/${locale}/blog/${slug}`,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.frontmatter.title,
      description: description,
    },
  };
}

import Link from 'next/link';
import VisualLinkPreview from '@/components/blog/VisualLinkPreview';
import { Callout } from '@/components/ui';
import HighlightBox from '@/components/blog/HighlightBox';
import Stats from '@/components/blog/Stats';
import AnimatedImage from '@/components/blog/AnimatedImage';
import ChatBubble from '@/components/blog/ChatBubble';
import SplitHeading from '@/components/blog/SplitHeading';
import PostNavigation from '@/components/blog/PostNavigation';
import PowerCTA from '@/components/blog/PowerCTA';
import ShareButton from '@/components/blog/ShareButton';

const components = {
  VisualLinkPreview,
  Callout,
  HighlightBox,
  Stats,
  AnimatedImage,
  ChatBubble,
  PowerCTA,
  SplitHeading,
  a: ({ href, children, ...props }: any) => {
    if (href?.startsWith('/')) {
      return (
        <Link href={href} {...props} className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all">
          {children}
        </Link>
      );
    }
    return (
      <a
        href={href}
        {...props}
        target="_blank"
        rel="noopener noreferrer"
        className="text-primary font-medium hover:underline decoration-2 underline-offset-2 transition-all inline-flex items-center gap-1"
      >
        {children}
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
        </svg>
      </a>
    );
  },
  img: (props: any) => (
    <AnimatedImage src={props.src} alt={props.alt} />
  ),
  h2: ({ children, ...props }: any) => (
    <SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
      {children}
    </SplitHeading>
  ),
  h3: ({ children, ...props }: any) => (
    <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
      {children}
    </h3>
  ),
  p: ({ children, ...props }: any) => (
    <p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
      {children}
    </p>
  ),
  ul: ({ children, ...props }: any) => (
    <ul {...props} className="my-8 space-y-3">
      {children}
    </ul>
  ),
  ol: ({ children, ...props }: any) => (
    <ol {...props} className="my-8 space-y-3 list-decimal list-inside">
      {children}
    </ol>
  ),
  li: ({ children, ...props }: any) => (
    <li {...props} className="text-lg text-text-secondary flex items-start gap-3">
      <span className="text-primary mt-1.5 flex-shrink-0">
        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
        </svg>
      </span>
      <span className="flex-1">{children}</span>
    </li>
  ),
  blockquote: ({ children, ...props }: any) => (
    <blockquote {...props} className="my-8 pl-6 border-l-4 border-primary bg-neutral-light/30 py-4 pr-6 rounded-r-lg">
      <div className="text-lg text-text-primary italic">
        {children}
      </div>
    </blockquote>
  ),
  strong: ({ children, ...props }: any) => (
    <strong {...props} className="font-bold text-primary">
      {children}
    </strong>
  ),
  code: ({ children, ...props }: any) => (
    <code {...props} className="px-2 py-1 bg-neutral-light text-primary rounded font-mono text-sm">
      {children}
    </code>
  ),
  pre: ({ children, ...props }: any) => (
    <pre {...props} className="my-8 p-6 bg-neutral-dark/5 rounded-xl overflow-x-auto">
      {children}
    </pre>
  ),
  table: ({ children, ...props }: any) => (
    <div className="my-8 overflow-x-auto rounded-lg border border-neutral-200 shadow-sm">
      <table {...props} className="w-full text-left text-sm text-text-secondary">
        {children}
      </table>
    </div>
  ),
  thead: ({ children, ...props }: any) => (
    <thead {...props} className="bg-neutral-50 text-text-primary font-semibold border-b border-neutral-200">
      {children}
    </thead>
  ),
  tbody: ({ children, ...props }: any) => (
    <tbody {...props} className="divide-y divide-neutral-200 bg-white">
      {children}
    </tbody>
  ),
  tr: ({ children, ...props }: any) => (
    <tr {...props} className="hover:bg-neutral-50/50 transition-colors">
      {children}
    </tr>
  ),
  th: ({ children, ...props }: any) => (
    <th {...props} className="px-6 py-4 whitespace-nowrap">
      {children}
    </th>
  ),
  td: ({ children, ...props }: any) => (
    <td {...props} className="px-6 py-4">
      {children}
    </td>
  ),
};

export default async function BlogPost({ params: { locale, slug } }: BlogPostProps) {
  const post = await getPostBySlug(slug, locale);
  const { prev, next } = await getAdjacentPosts(slug, locale);

  if (!post) {
    notFound();
  }

  return (
    <article className="bg-white min-h-screen font-sans">
      {/* Featured Image Header */}
      {post.frontmatter.featuredImage && (
        <div className="relative w-full h-[60vh] min-h-[400px] overflow-hidden group">
          <div 
            className="absolute inset-0 bg-cover bg-center transition-transform duration-[2s] ease-out scale-105 group-hover:scale-100"
            style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
          
          {/* Title overlay on image */}
          <div className="absolute inset-0 flex flex-col justify-end p-8 md:p-16 lg:p-24">
            <div className="container mx-auto max-w-3xl">
              {post.frontmatter.category && (
                <span className="inline-block px-4 py-1.5 bg-primary/90 backdrop-blur-sm text-white text-sm font-bold uppercase tracking-wider rounded-full mb-6 shadow-lg transform transition-transform hover:scale-105">
                  {post.frontmatter.category}
                </span>
              )}
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight drop-shadow-xl">
                {post.frontmatter.title}
              </h1>
              <div className="flex items-center gap-4 text-white/90 text-sm md:text-base font-medium">
                <time dateTime={post.frontmatter.date}>
                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                  })}
                </time>
                <span className="w-1.5 h-1.5 bg-primary rounded-full" />
                <span>KLZ Cables</span>
                <div className="ml-auto hidden md:block">
                  <ShareButton 
                    title={post.frontmatter.title} 
                    text={post.frontmatter.excerpt || ''} 
                    url={`https://klz-cables.com/${locale}/blog/${slug}`} 
                    locale={locale} 
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Content */}
      <div className="container mx-auto px-4 py-16 md:py-24 max-w-3xl">
        {/* Mobile Share Button */}
        <div className="md:hidden mb-8 flex justify-end">
          <ShareButton 
            title={post.frontmatter.title} 
            text={post.frontmatter.excerpt || ''} 
            url={`https://klz-cables.com/${locale}/blog/${slug}`} 
            locale={locale} 
          />
        </div>
        {/* If no featured image, show header here */}
        {!post.frontmatter.featuredImage && (
          <header className="mb-16 text-center">
            {post.frontmatter.category && (
              <div className="mb-6">
                <span className="inline-block px-4 py-1.5 bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider rounded-full">
                  {post.frontmatter.category}
                </span>
              </div>
            )}
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-text-primary mb-8 leading-tight">
              {post.frontmatter.title}
            </h1>
            <div className="flex items-center justify-center gap-4 text-text-secondary font-medium">
              <time dateTime={post.frontmatter.date}>
                {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric'
                })}
              </time>
              <span className="w-1.5 h-1.5 bg-primary rounded-full" />
              <span>KLZ Cables</span>
            </div>
          </header>
        )}

        {/* Excerpt/Lead paragraph if available */}
        {post.frontmatter.excerpt && (
          <div className="mb-16">
            <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-6 py-2">
              {post.frontmatter.excerpt}
            </p>
          </div>
        )}

        {/* Main content with enhanced styling */}
        <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-xl prose-img:shadow-lg">
          <MDXRemote source={post.content} components={components} />
        </div>

        {/* Structured Data */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              '@context': 'https://schema.org',
              '@type': 'BlogPosting',
              headline: post.frontmatter.title,
              datePublished: post.frontmatter.date,
              image: post.frontmatter.featuredImage ? `https://klz-cables.com${post.frontmatter.featuredImage}` : undefined,
              author: {
                '@type': 'Organization',
                name: 'KLZ Cables',
                url: 'https://klz-cables.com',
              },
              publisher: {
                '@type': 'Organization',
                name: 'KLZ Cables',
                logo: {
                  '@type': 'ImageObject',
                  url: 'https://klz-cables.com/logo.png', // Assuming logo exists
                },
              },
              description: post.frontmatter.excerpt,
            }),
          }}
        />

        {/* Power CTA */}
        <div className="mt-20">
          <PowerCTA locale={locale} />
        </div>

        {/* Post Navigation */}
        <PostNavigation prev={prev} next={next} locale={locale} />

        {/* Back to blog link */}
        <div className="mt-16 pt-10 border-t border-neutral-200 text-center">
          <Link
            href={`/${locale}/blog`}
            className="inline-flex items-center gap-2 text-text-secondary hover:text-primary font-medium text-lg transition-colors group"
          >
            <svg className="w-5 h-5 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            {locale === 'de' ? 'Zurück zur Übersicht' : 'Back to Overview'}
          </Link>
        </div>
      </div>
    </article>
  );
}