"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Header from "@/components/features/header/header"
import Footer from "@/components/features/footer/footer"
import { getCourses } from "@/services/courses/query"
import { useTranslation } from "react-i18next"
import Image from "next/image"
import Link from "next/link"
import { Check, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent } from "@/components/ui/card"

export default function CoursesPage() {
  const { t } = useTranslation()
  const [courses, setCourses] = useState<any[]>([])
  const [filteredCourses, setFilteredCourses] = useState<any[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    // Fetch courses
    const fetchCourses = async () => {
      try {
        setIsLoading(true)
        const allCourses = await getCourses()
        console.log("Courses fetched:", allCourses)

        // Ensure we have an array
        if (Array.isArray(allCourses)) {
          setCourses(allCourses)
          setFilteredCourses(allCourses)
        } else {
          console.error("Expected courses to be an array but got:", typeof allCourses)
          setCourses([])
          setFilteredCourses([])
          setError("Failed to load courses data correctly")
        }
      } catch (err) {
        console.error("Error fetching courses:", err)
        setError("Failed to load courses. Please try again later.")
        setCourses([])
        setFilteredCourses([])
      } finally {
        setIsLoading(false)
      }
    }

    fetchCourses()
  }, [])

  // Handle search input change
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const term = e.target.value.toLowerCase()
    setSearchTerm(term)
    filterCourses(term, selectedCategory)
  }

  // Handle category filter change
  const handleCategoryChange = (category: string) => {
    setSelectedCategory(category)
    filterCourses(searchTerm, category)
  }

  // Filter courses based on search term and category
  const filterCourses = (term: string, category: string) => {
    if (!Array.isArray(courses)) {
      console.error("Cannot filter courses: courses is not an array", courses)
      setFilteredCourses([])
      return
    }

    let filtered = [...courses]

    // Filter by search term
    if (term) {
      filtered = filtered.filter(
        (course) => course.title?.toLowerCase().includes(term) || course.description?.toLowerCase().includes(term),
      )
    }

    // Filter by category (in a real app, courses would have categories)
    if (category !== "all") {
      // This is a mock filter since we don't have categories in our mock data
      // In a real app, you would filter by actual category
      filtered = filtered.filter((course) => {
        // Mock category assignment based on course ID for demonstration
        const mockCategories: Record<number, string> = {
          1: "memory",
          2: "brain-training",
          3: "speed-reading",
          4: "mind-mapping",
          5: "memory",
        }
        return mockCategories[course.id] === category
      })
    }

    setFilteredCourses(filtered)
  }

  // Loading state
  if (isLoading) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow py-12 bg-gray-50 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-lg">Loading courses...</p>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  // Error state
  if (error) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow py-12 bg-gray-50 flex items-center justify-center">
          <div className="text-center">
            <div className="text-red-500 text-xl mb-4">⚠️ {error}</div>
            <Button onClick={() => window.location.reload()}>Try Again</Button>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

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

      <main className="flex-grow py-12 bg-gray-50">
        <div className="container">
          <div className="mb-12">
            <h1 className="text-4xl md:text-5xl font-bold mb-4 font-heading">{t("courses.title")}</h1>
            <p className="text-lg text-gray-600 max-w-3xl">{t("courses.subtitle")}</p>
          </div>

          {/* Search and Filter Bar */}
          <div className="bg-white rounded-lg shadow-sm p-4 mb-8">
            <div className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-grow">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                <Input
                  type="text"
                  placeholder="Search courses..."
                  className="pl-10"
                  value={searchTerm}
                  onChange={handleSearchChange}
                />
              </div>
              <div className="flex gap-2 overflow-x-auto pb-2 md:pb-0">
                <Button
                  variant={selectedCategory === "all" ? "default" : "outline"}
                  className={selectedCategory === "all" ? "bg-secondary text-white" : ""}
                  onClick={() => handleCategoryChange("all")}
                >
                  All
                </Button>
                <Button
                  variant={selectedCategory === "memory" ? "default" : "outline"}
                  className={selectedCategory === "memory" ? "bg-secondary text-white" : ""}
                  onClick={() => handleCategoryChange("memory")}
                >
                  Memory
                </Button>
                <Button
                  variant={selectedCategory === "speed-reading" ? "default" : "outline"}
                  className={selectedCategory === "speed-reading" ? "bg-secondary text-white" : ""}
                  onClick={() => handleCategoryChange("speed-reading")}
                >
                  Speed Reading
                </Button>
                <Button
                  variant={selectedCategory === "mind-mapping" ? "default" : "outline"}
                  className={selectedCategory === "mind-mapping" ? "bg-secondary text-white" : ""}
                  onClick={() => handleCategoryChange("mind-mapping")}
                >
                  Mind Mapping
                </Button>
                <Button
                  variant={selectedCategory === "brain-training" ? "default" : "outline"}
                  className={selectedCategory === "brain-training" ? "bg-secondary text-white" : ""}
                  onClick={() => handleCategoryChange("brain-training")}
                >
                  Brain Training
                </Button>
              </div>
            </div>
          </div>

          {/* Course Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {Array.isArray(filteredCourses) &&
              filteredCourses.map((course) => (
                <Card
                  key={course.id}
                  className="bg-white overflow-hidden shadow-md transition-transform hover:translate-y-[-5px]"
                >
                  <div className="relative h-48">
                    <Image src={course.image || "/placeholder.svg"} alt={course.title} fill className="object-cover" />
                  </div>
                  <CardContent className="p-6">
                    <h3 className="text-xl font-bold mb-2 font-heading">{course.title}</h3>
                    <p className="text-gray-600 mb-4">{course.description}</p>
                    <div className="mb-4">
                      {Array.isArray(course.features) &&
                        course.features.slice(0, 3).map((feature: string, index: number) => (
                          <div key={index} className="flex items-center mb-2">
                            <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>
                    <div className="flex items-center justify-between mt-6">
                      <div className="text-xl font-bold text-secondary">
                        RM {typeof course.price === "number" ? course.price.toLocaleString() : course.price}
                      </div>
                      <Link href={`/courses/${course.id}`} className="btn btn-primary text-secondary">
                        {t("common.learnMore")}
                      </Link>
                    </div>
                  </CardContent>
                </Card>
              ))}
          </div>

          {/* No Results Message */}
          {(!Array.isArray(filteredCourses) || filteredCourses.length === 0) && (
            <div className="text-center py-12">
              <h3 className="text-xl font-medium mb-2">No courses found</h3>
              <p className="text-gray-500">Try adjusting your search or filter criteria</p>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  )
}