"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import Header from "@/components/features/header/header"
import Footer from "@/components/features/footer/footer"
import { getCourseById } from "@/services/courses/query"
import { getInstructorById } from "@/services/instructors/query"
import { getPackagesByCourseId } from "@/services/course_packages/query"
import { useTranslation } from "react-i18next"
import Image from "next/image"
import Link from "next/link"
import { Check, Calendar, Clock, Users, Award, Star } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function CourseDetailPage() {
  const { t } = useTranslation()
  const params = useParams()
  const courseId = Number.parseInt(params.id as string)

  const [course, setCourse] = useState<any>(null)
  const [instructor, setInstructor] = useState<any>(null)
  const [packages, setPackages] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

  useEffect(() => {
    const fetchData = async () => {
      if (isNaN(courseId)) {
        setError("Invalid course ID")
        setLoading(false)
        return
      }

      try {
        // Fetch course details
        console.log("Fetching course with ID:", courseId)
        const courseData = await getCourseById(courseId)
        console.log("Course data received:", courseData)

        if (!courseData) {
          setError("Course not found")
          setLoading(false)
          return
        }

        // Ensure features is an array
        if (!Array.isArray(courseData.features)) {
          console.warn("Course features is not an array:", courseData.features)
          courseData.features = []
        }

        setCourse(courseData)

        // Fetch instructor details
        console.log("Fetching instructor with ID:", courseData.instructor_id)
        try {
          const instructorData = await getInstructorById(courseData.instructor_id)
          console.log("Instructor data received:", instructorData)
          setInstructor(instructorData)
        } catch (instructorError) {
          console.error("Error fetching instructor:", instructorError)
          // Continue without instructor data
        }

        // Fetch package details
        console.log("Fetching packages for course ID:", courseId)
        try {
          const packageData = await getPackagesByCourseId(courseId)
          console.log("Package data received:", packageData)
          setPackages(Array.isArray(packageData) ? packageData : [])
        } catch (packageError) {
          console.error("Error fetching packages:", packageError)
          setPackages([])
        }

        setLoading(false)
      } catch (err) {
        console.error("Error fetching data:", err)
        setError("Failed to load course details")
        setLoading(false)
      }
    }

    fetchData()
  }, [courseId])

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary mx-auto mb-4"></div>
            <p className="text-gray-600">Loading course details...</p>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow flex items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-red-600 mb-2">Error</h2>
            <p className="text-gray-600">{error}</p>
            <Link href="/courses" className="btn btn-primary text-secondary mt-6 inline-block">
              Back to Courses
            </Link>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  // Safety check to ensure course is loaded
  if (!course) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow flex items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-red-600 mb-2">Error</h2>
            <p className="text-gray-600">Course data is missing</p>
            <Link href="/courses" className="btn btn-primary text-secondary mt-6 inline-block">
              Back to Courses
            </Link>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  // Ensure features is an array before rendering
  const courseFeatures = Array.isArray(course.features) ? course.features : []

  console.log("Rendering course:", course)
  console.log("Course price:", course.price)
  console.log("Course features:", courseFeatures)
  console.log("Packages:", packages)

  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="flex-grow py-12 bg-gray-50">
        <div className="container">
          {/* Course Header */}
          <div className="bg-white rounded-lg shadow-sm p-8 mb-8">
            <div className="grid md:grid-cols-2 gap-8 items-center">
              <div>
                <h1 className="text-3xl md:text-4xl font-bold mb-4 font-heading">{course.title}</h1>
                <p className="text-lg text-gray-600 mb-6">{course.description}</p>

                {instructor && (
                  <div className="flex items-center mb-6">
                    <div className="relative w-12 h-12 rounded-full overflow-hidden mr-4">
                      <Image
                        src={instructor.avatar || "/placeholder.svg"}
                        alt={instructor.name}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div>
                      <p className="font-medium">{instructor.name}</p>
                      <p className="text-sm text-gray-500">{instructor.summary}</p>
                    </div>
                  </div>
                )}

                <div className="flex flex-wrap gap-4 mb-6">
                  <div className="flex items-center text-gray-600">
                    <Calendar className="h-5 w-5 mr-2 text-secondary" />
                    <span>Multiple schedules</span>
                  </div>
                  <div className="flex items-center text-gray-600">
                    <Clock className="h-5 w-5 mr-2 text-secondary" />
                    <span>60-120 minutes per session</span>
                  </div>
                  <div className="flex items-center text-gray-600">
                    <Users className="h-5 w-5 mr-2 text-secondary" />
                    <span>Small groups</span>
                  </div>
                </div>

                <div className="flex items-center gap-4">
                  {typeof course.price === "number" ? (
                    <div className="text-2xl font-bold text-secondary">RM {course.price.toLocaleString()}</div>
                  ) : (
                    <div className="text-2xl font-bold text-secondary">RM {(0.0).toLocaleString()}</div>
                  )}
                  <Link href={`/enroll/course/${course.id}`} className="btn btn-primary text-secondary">
                    {t("common.enrollNow")}
                  </Link>
                </div>
              </div>

              <div className="relative rounded-lg overflow-hidden h-64 md:h-80">
                <Image src={course.image || "/placeholder.svg"} alt={course.title} fill className="object-cover" />
              </div>
            </div>
          </div>

          {/* Course Content Tabs */}
          <div className="grid md:grid-cols-3 gap-8">
            <div className="md:col-span-2">
              <Tabs defaultValue="overview">
                <TabsList className="mb-6">
                  <TabsTrigger value="overview">Overview</TabsTrigger>
                  <TabsTrigger value="curriculum">Curriculum</TabsTrigger>
                  <TabsTrigger value="instructor">Instructor</TabsTrigger>
                </TabsList>

                <TabsContent value="overview" className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-2xl font-bold mb-4 font-heading">Course Overview</h2>
                  <p className="text-gray-600 mb-6">{course.summary || course.description}</p>

                  <h3 className="text-xl font-bold mb-4 font-heading">What You'll Learn</h3>
                  <div className="grid md:grid-cols-2 gap-4 mb-6">
                    {courseFeatures.map((feature: string, index: number) => (
                      <div key={index} className="flex items-center">
                        <div className="w-6 h-6 rounded-full bg-primary-light border border-secondary flex items-center justify-center mr-2 shrink-0">
                          <Check className="h-3.5 w-3.5 text-secondary" />
                        </div>
                        <span className="text-gray-600">{feature}</span>
                      </div>
                    ))}
                  </div>

                  <h3 className="text-xl font-bold mb-4 font-heading">Requirements</h3>
                  <ul className="list-disc list-inside text-gray-600 mb-6">
                    <li>No prior experience required</li>
                    <li>Open mind and willingness to practice</li>
                    <li>Notebook and pen for exercises</li>
                  </ul>

                  <h3 className="text-xl font-bold mb-4 font-heading">Who This Course is For</h3>
                  <ul className="list-disc list-inside text-gray-600">
                    <li>Students looking to improve their learning efficiency</li>
                    <li>Professionals seeking to enhance their cognitive abilities</li>
                    <li>Anyone interested in memory improvement techniques</li>
                    <li>People preparing for exams or certifications</li>
                  </ul>
                </TabsContent>

                <TabsContent value="curriculum" className="bg-white rounded-lg shadow-sm p-6">
                  <h2 className="text-2xl font-bold mb-6 font-heading">Course Curriculum</h2>

                  <div className="space-y-4">
                    {/* Module 1 */}
                    <div className="border border-gray-200 rounded-lg overflow-hidden">
                      <div className="bg-secondary-light p-4 flex justify-between items-center">
                        <h3 className="font-bold">Module 1: Introduction to Memory Techniques</h3>
                        <span className="text-sm text-gray-500">3 lessons</span>
                      </div>
                      <div className="p-4 space-y-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">1</span>
                            </div>
                            <span>Understanding How Memory Works</span>
                          </div>
                          <span className="text-sm text-gray-500">45 min</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">2</span>
                            </div>
                            <span>The Science Behind Memory Formation</span>
                          </div>
                          <span className="text-sm text-gray-500">60 min</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">3</span>
                            </div>
                            <span>Memory Assessment and Baseline</span>
                          </div>
                          <span className="text-sm text-gray-500">45 min</span>
                        </div>
                      </div>
                    </div>

                    {/* Module 2 */}
                    <div className="border border-gray-200 rounded-lg overflow-hidden">
                      <div className="bg-secondary-light p-4 flex justify-between items-center">
                        <h3 className="font-bold">Module 2: Core Memory Techniques</h3>
                        <span className="text-sm text-gray-500">4 lessons</span>
                      </div>
                      <div className="p-4 space-y-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">1</span>
                            </div>
                            <span>Association and Visualization</span>
                          </div>
                          <span className="text-sm text-gray-500">60 min</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">2</span>
                            </div>
                            <span>The Memory Palace Technique</span>
                          </div>
                          <span className="text-sm text-gray-500">75 min</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">3</span>
                            </div>
                            <span>The Major System for Numbers</span>
                          </div>
                          <span className="text-sm text-gray-500">60 min</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <div className="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center mr-3">
                              <span className="text-secondary font-medium">4</span>
                            </div>
                            <span>Practical Applications and Exercises</span>
                          </div>
                          <span className="text-sm text-gray-500">90 min</span>
                        </div>
                      </div>
                    </div>

                    {/* Additional modules would be listed here */}
                  </div>
                </TabsContent>

                <TabsContent value="instructor" className="bg-white rounded-lg shadow-sm p-6">
                  {instructor && (
                    <>
                      <h2 className="text-2xl font-bold mb-6 font-heading">Meet Your Instructor</h2>

                      <div className="flex flex-col md:flex-row gap-6 mb-8">
                        <div className="relative w-32 h-32 rounded-lg overflow-hidden shrink-0">
                          <Image
                            src={instructor.avatar || "/placeholder.svg"}
                            alt={instructor.name}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div>
                          <h3 className="text-xl font-bold mb-2">{instructor.name}</h3>
                          <p className="text-gray-600 mb-4">{instructor.summary}</p>

                          <div className="flex items-center gap-4 mb-4">
                            <div className="flex items-center">
                              <Award className="h-5 w-5 text-secondary mr-1" />
                              <span className="text-sm text-gray-600">Expert Instructor</span>
                            </div>
                            <div className="flex items-center">
                              <Star className="h-5 w-5 text-yellow-500 mr-1" />
                              <span className="text-sm text-gray-600">4.9 Rating</span>
                            </div>
                            <div className="flex items-center">
                              <Users className="h-5 w-5 text-secondary mr-1" />
                              <span className="text-sm text-gray-600">1000+ Students</span>
                            </div>
                          </div>

                          <p className="text-gray-600">{instructor.description}</p>
                        </div>
                      </div>

                      <Dialog>
                        <DialogTrigger asChild>
                          <Button variant="outline" className="w-full">
                            Contact Instructor
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Contact {instructor.name}</DialogTitle>
                            <DialogDescription>
                              Send a message to the instructor if you have any questions about the course.
                            </DialogDescription>
                          </DialogHeader>
                          <div className="space-y-4 py-4">
                            <div className="space-y-2">
                              <label htmlFor="subject" className="text-sm font-medium">
                                Subject
                              </label>
                              <input
                                id="subject"
                                className="w-full p-2 border border-gray-300 rounded-md"
                                placeholder="Enter subject"
                              />
                            </div>
                            <div className="space-y-2">
                              <label htmlFor="message" className="text-sm font-medium">
                                Message
                              </label>
                              <textarea
                                id="message"
                                className="w-full p-2 border border-gray-300 rounded-md h-32"
                                placeholder="Enter your message"
                              ></textarea>
                            </div>
                            <Button className="w-full">Send Message</Button>
                          </div>
                        </DialogContent>
                      </Dialog>
                    </>
                  )}
                </TabsContent>
              </Tabs>
            </div>

            {/* Sidebar */}
            <div className="space-y-6">
              {/* Course Packages */}
              <Card className="bg-white shadow-sm border-0">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold mb-4 font-heading">Available Packages</h3>

                  <div className="space-y-4">
                    {packages.length > 0 ? (
                      packages.map((pkg) => {
                        console.log("Rendering package:", pkg)
                        console.log("Package price:", pkg?.price)
                        console.log("Package discount:", pkg?.discount)

                        return (
                          <div key={pkg.id} className="border border-gray-200 rounded-lg p-4">
                            <h4 className="font-bold mb-2">{pkg.name}</h4>
                            <p className="text-sm text-gray-600 mb-3">{pkg.description}</p>

                            {typeof pkg.price === "number" ? (
                              <div className="flex items-center justify-between mb-3">
                                <div className="text-lg font-bold text-secondary">RM {pkg.price.toLocaleString()}</div>
                                {typeof pkg.discount === "number" && pkg.discount > 0 && (
                                  <div className="bg-primary-light text-secondary text-sm px-2 py-1 rounded">
                                    Save RM {pkg.discount.toLocaleString()}
                                  </div>
                                )}
                              </div>
                            ) : (
                              <p className="text-sm text-gray-600 mb-3">Multiple pricing options available</p>
                            )}

                            <Link
                              href={`/enroll/course/${course.id}?package=${pkg.id}`}
                              className="btn btn-primary text-secondary w-full text-center"
                            >
                              Select Package
                            </Link>
                          </div>
                        )
                      })
                    ) : (
                      <div className="text-center py-4 text-gray-500">No packages available for this course yet.</div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Course Stats */}
              <Card className="bg-secondary-light shadow-sm border-0">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold mb-4 font-heading">Course Stats</h3>

                  <div className="space-y-3">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Enrolled Students</span>
                      <span className="font-medium">250+</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Course Duration</span>
                      <span className="font-medium">8 weeks</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Total Lessons</span>
                      <span className="font-medium">24</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Skill Level</span>
                      <span className="font-medium">All Levels</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Languages</span>
                      <span className="font-medium">English, Chinese</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Certificate</span>
                      <span className="font-medium">Yes</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Share Course */}
              <Card className="bg-white shadow-sm border-0">
                <CardContent className="p-6">
                  <h3 className="text-xl font-bold mb-4 font-heading">Share This Course</h3>

                  <div className="flex gap-2">
                    <Button variant="outline" className="flex-1">
                      <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path
                          fillRule="evenodd"
                          d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
                          clipRule="evenodd"
                        ></path>
                      </svg>
                      Share
                    </Button>
                    <Button variant="outline" className="flex-1">
                      <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                      </svg>
                      Tweet
                    </Button>
                    <Button variant="outline" className="flex-1">
                      <svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path
                          fillRule="evenodd"
                          d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
                          clipRule="evenodd"
                        />
                      </svg>
                      Video
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          {/* Similar Courses */}
          <div className="mt-12">
            <h2 className="text-2xl font-bold mb-6 font-heading">Similar Courses You May Like</h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {/* We would typically fetch similar courses here, but for now we'll show mock data */}
              {[1, 2, 3].map((id) => {
                try {
                  console.log("Fetching similar course with ID:", id === courseId ? (id % 5) + 1 : id)
                  const similarCourse = getCourseById(id === courseId ? (id % 5) + 1 : id)
                  console.log("Similar course data:", similarCourse)

                  if (!similarCourse) {
                    console.log("Similar course not found")
                    return null
                  }

                  console.log("Similar course price:", similarCourse.price)

                  return (
                    <Card
                      key={id}
                      className="bg-white overflow-hidden shadow-md transition-transform hover:translate-y-[-5px]"
                    >
                      <div className="relative h-40">
                        <Image
                          src={similarCourse.image || "/placeholder.svg"}
                          alt={similarCourse.title}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <CardContent className="p-6">
                        <h3 className="text-xl font-bold mb-2 font-heading">{similarCourse.title}</h3>
                        <p className="text-gray-600 mb-4 line-clamp-2">{similarCourse.description}</p>
                        <div className="flex items-center justify-between mt-4">
                          {typeof similarCourse.price === "number" ? (
                            <div className="text-lg font-bold text-secondary">
                              RM {similarCourse.price.toLocaleString()}
                            </div>
                          ) : (
                            <div className="text-lg font-bold text-secondary">RM {(0.0).toLocaleString()}</div>
                          )}
                          <Link href={`/courses/${similarCourse.id}`} className="btn btn-primary text-secondary">
                            View Details
                          </Link>
                        </div>
                      </CardContent>
                    </Card>
                  )
                } catch (error) {
                  console.error("Error rendering similar course:", error)
                  return null
                }
              })}
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}