import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import { Calendar, Clock, MapPin, Users, Star, Monitor, ArrowLeft } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { allCourses, getCourseBySlug, getCourseStartDate, formatPrice } from '@/lib/courses'
import { siteConfig } from '@/lib/site-config'
import { CourseEnrollment } from '@/components/course-enrollment'
import { SimilarCourses } from '@/components/similar-courses'
import { SocialShare } from '@/components/social-share'
import { GoogleReviews } from '@/components/google-reviews'

interface PageProps {
  params: Promise<{ slug: string }>
}

export async function generateStaticParams() {
  return allCourses.map((course) => ({ slug: course.slug }))
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const course = getCourseBySlug(slug)
  if (!course) return { title: 'Course Not Found' }

  const pageUrl = `/courses/${course.slug}`

  return {
    title: course.title,
    description: course.description,
    openGraph: {
      title: `${course.title} | ${siteConfig.shortName}`,
      description: course.description,
      url: pageUrl,
      siteName: siteConfig.shortName,
      images: [
        {
          url: course.image,
          width: 1200,
          height: 630,
          alt: course.title,
        },
      ],
      locale: 'en_GB',
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: course.title,
      description: course.description,
      images: [course.image],
    },
  }
}

export default async function CourseDetailPage({ params }: PageProps) {
  const { slug } = await params
  const course = getCourseBySlug(slug)
  if (!course) notFound()

  const startDate = getCourseStartDate(course.scheduleOffset)

  return (
    <main>
      {/* Hero */}
      <section className="relative bg-primary overflow-hidden">
        <div className="absolute inset-0">
          <Image src={course.image} alt={course.title} fill className="object-cover opacity-20" priority />
          <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/95 to-primary/80" />
        </div>
        <div className="container-wide relative py-12 md:py-16">
          <Link href="/services/upcoming-courses" className="inline-flex items-center gap-2 text-primary-foreground/70 hover:text-white text-sm mb-6 transition-colors">
            <ArrowLeft className="w-4 h-4" /> Back to Courses
          </Link>
          <div className="flex flex-wrap gap-2 mb-4">
            <Badge className="bg-white/10 text-white border-white/20">{course.category}</Badge>
            <Badge className="bg-accent/90 text-white border-0">{course.level}</Badge>
            <Badge className="bg-white/10 text-white border-white/20">{course.format}</Badge>
          </div>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight max-w-4xl text-balance">
            {course.title}
          </h1>
          <p className="mt-4 text-lg text-primary-foreground/85 max-w-2xl">{course.description}</p>
          <div className="flex flex-wrap gap-5 mt-6 text-sm text-primary-foreground/80">
            <span className="flex items-center gap-1.5"><Calendar className="w-4 h-4 text-accent" />{startDate}</span>
            <span className="flex items-center gap-1.5"><Clock className="w-4 h-4 text-accent" />{course.duration}</span>
            <span className="flex items-center gap-1.5"><MapPin className="w-4 h-4 text-accent" />{course.location}</span>
            <span className="flex items-center gap-1.5"><Users className="w-4 h-4 text-accent" />{course.spots} spots left</span>
            <span className="flex items-center gap-1.5"><Star className="w-4 h-4 text-accent fill-accent" />{course.rating}</span>
          </div>
        </div>
      </section>

      <section className="section-padding">
        <div className="container-wide">
          <div className="grid lg:grid-cols-3 gap-10">
            {/* Main content */}
            <div className="lg:col-span-2 space-y-8">
              <div>
                <h2 className="text-2xl font-bold mb-4">About This Course</h2>
                <p className="text-muted-foreground leading-relaxed">{course.longDescription}</p>
              </div>

              <div>
                <h3 className="text-lg font-bold mb-3">What You Will Learn</h3>
                <div className="flex flex-wrap gap-2">
                  {course.skills.map((skill) => (
                    <Badge key={skill} variant="outline" className="text-sm py-1 px-3">{skill}</Badge>
                  ))}
                </div>
              </div>

              <div className="grid sm:grid-cols-2 gap-4">
                {[
                  { icon: Monitor, label: 'Format', value: course.format },
                  { icon: Users, label: 'Instructor', value: course.instructor },
                  { icon: Star, label: 'Rating', value: `${course.rating} / 5 (${course.students} enrolled)` },
                  { icon: Calendar, label: 'Next Date', value: startDate },
                ].map(({ icon: Icon, label, value }) => (
                  <div key={label} className="flex gap-3 p-4 rounded-xl border border-border/50 bg-muted/20">
                    <Icon className="w-5 h-5 text-primary shrink-0 mt-0.5" />
                    <div>
                      <p className="text-xs text-muted-foreground">{label}</p>
                      <p className="text-sm font-medium">{value}</p>
                    </div>
                  </div>
                ))}
              </div>

              <SocialShare
                title={course.title}
                description={course.description}
                url={`/courses/${course.slug}`}
                image={course.image}
              />

              <GoogleReviews compact />
            </div>

            {/* Enrollment sidebar */}
            <div>
              <CourseEnrollment course={course} />
              <p className="text-center text-xs text-muted-foreground mt-4">
                Course fee: <strong className="text-primary">{formatPrice(course.price)}</strong> per participant
              </p>
            </div>
          </div>
        </div>
      </section>

      <SimilarCourses course={course} />
    </main>
  )
}