import { notFound } from 'next/navigation';
import { pageStore } from '@/lib/data-store';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';

interface PageProps {
  params: {
    slug: string;
  };
}

// Generate static params for known pages
export async function generateStaticParams() {
  try {
    const pages = await pageStore.getAll();
    const activePages = pages.filter(page => page.isActive);
    
    return activePages.map((page) => ({
      slug: page.slug,
    }));
  } catch (error) {
    return [];
  }
}

export default async function DynamicPage({ params }: PageProps) {
  let page;
  
  try {
    const pages = await pageStore.getAll();
    page = pages.find(p => p.slug === params.slug && p.isActive);
  } catch (error) {
    console.error('Error fetching page:', error);
  }

  if (!page) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      {page.heroImage && (
        <section className="relative py-20 bg-gradient-to-r from-blue-900/90 to-slate-900/90">
          <div className="absolute inset-0">
            <Image
              src={page.heroImage}
              alt={page.title}
              fill
              className="object-cover"
              priority
            />
            <div className="absolute inset-0 bg-black/40"></div>
          </div>
          
          <div className="relative z-20 container mx-auto px-4 text-center text-white">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              {page.title}
            </h1>
            {page.metaDescription && (
              <p className="text-xl md:text-2xl max-w-3xl mx-auto">
                {page.metaDescription}
              </p>
            )}
          </div>
        </section>
      )}

      {/* Content Section */}
      <section className={`${page.heroImage ? 'py-16' : 'py-20'} bg-white`}>
        <div className="container mx-auto px-4">
          {!page.heroImage && (
            <div className="text-center mb-12">
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                {page.title}
              </h1>
              {page.metaDescription && (
                <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                  {page.metaDescription}
                </p>
              )}
            </div>
          )}

          {/* Page Content */}
          <div className="max-w-4xl mx-auto">
            <Card>
              <CardContent className="p-8">
                <div 
                  className="prose prose-lg max-w-none"
                  dangerouslySetInnerHTML={{ __html: page.content }}
                />
              </CardContent>
            </Card>
          </div>

          {/* Back Navigation */}
          <div className="text-center mt-12">
            <Button variant="outline" asChild>
              <Link href="/">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Home
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Page Type Specific Styling */}
      {page.pageType === 'landing' && (
        <section className="py-16 bg-blue-600 text-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl font-bold mb-4">Ready to Get Started?</h2>
            <p className="text-xl mb-8">Contact us today for more information about our services.</p>
            <Button size="lg" className="bg-white text-blue-600 hover:bg-gray-100">
              <Link href="/contact">Get In Touch</Link>
            </Button>
          </div>
        </section>
      )}
    </div>
  );
}

// SEO metadata
export async function generateMetadata({ params }: PageProps) {
  let page;
  
  try {
    const pages = await pageStore.getAll();
    page = pages.find(p => p.slug === params.slug && p.isActive);
  } catch (error) {
    return {
      title: 'Page Not Found',
    };
  }

  if (!page) {
    return {
      title: 'Page Not Found',
    };
  }

  return {
    title: page.title,
    description: page.metaDescription,
    keywords: page.metaKeywords,
  };
}