import { getCourseBySlug, renderStrapiBlocks, getImageUrl } from '../../../lib/api';
import BannerSlider from '../../../components/BannerSlider';
import Header from '../../../components/Header';
import Footer from '../../../components/Footer';
import BackToTop from '../../../components/BackToTop';
import FloatingContact from '../../../components/FloatingContact';

const ContentSection = ({ 
  image, 
  heading, 
  content, 
  reverse = false,
  delay = 0
}: { 
  image: any, 
  heading: string, 
  content: string, 
  reverse?: boolean,
  delay?: number
}) => {
  const imgUrl = getImageUrl(image);
  
  return (
    <div 
      className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 items-start group animate-fadeInUp`}
      style={{ animationDelay: `${delay}ms` }}
    >
      <div className="w-full md:w-2/5 shrink-0">
        {imgUrl ? (
          <div className="relative overflow-hidden rounded-2xl shadow-xl group-hover:shadow-2xl transition-all duration-500">
            <img 
              src={`http://localhost:1337${imgUrl}`} 
              alt={heading}
              className="w-full h-auto object-contain transform group-hover:scale-105 transition-transform duration-700"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          </div>
        ) : (
          <div className="w-full aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center text-gray-400">
            <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
        )}
      </div>
      <div className="w-full md:w-3/5">
        <h2 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-4 group-hover:from-blue-600 group-hover:to-indigo-600 transition-all duration-300">
          {heading}
        </h2>
        <div 
          className="prose prose-lg prose-blue max-w-none text-gray-700 leading-relaxed [&_strong]:font-bold [&_strong]:text-gray-900 [&_em]:italic [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-4 [&_li]:mb-1 [&_p]:text-justify [&_p]:mb-4"
          dangerouslySetInnerHTML={{ __html: renderStrapiBlocks(content) }}
        />
      </div>
    </div>
  );
};

const Breadcrumb = ({ title }: { title: string }) => {
  return (
    <div className="bg-gray-50 border-b py-3 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-2 text-sm">
          <a href="/" className="text-gray-500 hover:text-blue-600 transition-colors">Home</a>
          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          <a href="/courses" className="text-gray-500 hover:text-blue-600 transition-colors">Courses</a>
          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
          <span className="text-gray-700 font-medium truncate">{title}</span>
        </div>
      </div>
    </div>
  );
};

export default async function CoursePage({ params }: { params: { slug: string } }) {
  const course = await getCourseBySlug(params.slug);

  if (!course) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
        <div className="text-center">
          <div className="w-24 h-24 mx-auto mb-6 text-gray-400">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h1 className="text-2xl font-bold text-gray-800 mb-2">Course Not Found</h1>
          <p className="text-gray-500 mb-6">The course you're looking for doesn't exist or has been removed.</p>
          <a href="/" className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-xl hover:shadow-lg transition-all inline-flex items-center gap-2">
            Back to Home
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white font-sans">
      <Header />
      
      <BannerSlider 
        images={course.banner_images || []} 
        heading={course.banner_heading || course.title}
        subheading={course.banner_subheading}
        ctaText={course.banner_cta_text}
      />

      <Breadcrumb title={course.title} />

      {/* Full Width Sections */}
      <div className="w-full bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.hero_image}
            heading={course.hero_heading}
            content={course.hero_content}
            delay={100}
          />
        </div>
      </div>

      <div className="w-full bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.overview_image}
            heading={course.overview_heading}
            content={course.overview_content}
            reverse={true}
            delay={200}
          />
        </div>
      </div>

      <div className="w-full bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.benefits_image}
            heading={course.benefits_heading}
            content={course.benefits_content}
            delay={300}
          />
        </div>
      </div>

      <div className="w-full bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.advantages_image}
            heading={course.advantages_heading}
            content={course.advantages_content}
            reverse={true}
            delay={400}
          />
        </div>
      </div>

      <div className="w-full bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.attendees_image}
            heading={course.attendees_heading}
            content={course.attendees_content}
            delay={500}
          />
        </div>
      </div>

      <div className="w-full bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <ContentSection 
            image={course.eligibility_image}
            heading={course.eligibility_heading}
            content={course.eligibility_content}
            reverse={true}
            delay={600}
          />
        </div>
      </div>
      
      <Footer phone={course.contact_phone} email={course.contact_email} />
      <BackToTop />
      <FloatingContact phone={course.contact_phone || "(+965) 25652876"} email={course.contact_email || "mail@uikuwait.com"} />
    </div>
  );
}