"use client";
import { useState } from "react"
import { ChevronDown } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { useTranslation } from "react-i18next"

interface Section {
  id: string
  title: string
  content: string[]
}

interface CourseContent {
  id: string
  name: string
  title: string
  description: string
  objectives: string[]
  sections: Section[]
}

const CmiCourses: React.FC = () => {
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null)
  const [activeCourse, setActiveCourse] = useState<string>("course1")
  const { t } = useTranslation()

  // Generate courses data from translations
  const coursesData: CourseContent[] = [
    {
      id: "course1",
      name: t("cmi_courses.courses.course1.name"),
      title: t("cmi_courses.courses.course1.title"),
      description: t("cmi_courses.courses.course1.description"),
      objectives: t("cmi_courses.courses.course1.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "concept",
          title: t("cmi_courses.courses.course1.sections.concept.title"),
          content: t("cmi_courses.courses.course1.sections.concept.content", { returnObjects: true }) as string[]
        },
        {
          id: "methods",
          title: t("cmi_courses.courses.course1.sections.methods.title"),
          content: t("cmi_courses.courses.course1.sections.methods.content", { returnObjects: true }) as string[]
        },
        {
          id: "development",
          title: t("cmi_courses.courses.course1.sections.development.title"),
          content: t("cmi_courses.courses.course1.sections.development.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course2",
      name: t("cmi_courses.courses.course2.name"),
      title: t("cmi_courses.courses.course2.title"),
      description: t("cmi_courses.courses.course2.description"),
      objectives: t("cmi_courses.courses.course2.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "time-analysis",
          title: t("cmi_courses.courses.course2.sections.time-analysis.title"),
          content: t("cmi_courses.courses.course2.sections.time-analysis.content", { returnObjects: true }) as string[]
        },
        {
          id: "planning-techniques",
          title: t("cmi_courses.courses.course2.sections.planning-techniques.title"),
          content: t("cmi_courses.courses.course2.sections.planning-techniques.content", { returnObjects: true }) as string[]
        },
        {
          id: "productivity-tools",
          title: t("cmi_courses.courses.course2.sections.productivity-tools.title"),
          content: t("cmi_courses.courses.course2.sections.productivity-tools.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course3",
      name: t("cmi_courses.courses.course3.name"),
      title: t("cmi_courses.courses.course3.title"),
      description: t("cmi_courses.courses.course3.description"),
      objectives: t("cmi_courses.courses.course3.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "communication-basics",
          title: t("cmi_courses.courses.course3.sections.communication-basics.title"),
          content: t("cmi_courses.courses.course3.sections.communication-basics.content", { returnObjects: true }) as string[]
        },
        {
          id: "presentation-skill",
          title: t("cmi_courses.courses.course3.sections.presentation-skill.title"),
          content: t("cmi_courses.courses.course3.sections.presentation-skill.content", { returnObjects: true }) as string[]
        },
        {
          id: "presentation-skills",
          title: t("cmi_courses.courses.course3.sections.presentation-skills.title"),
          content: t("cmi_courses.courses.course3.sections.presentation-skills.content", { returnObjects: true }) as string[]
        },
        {
          id: "confidence-building",
          title: t("cmi_courses.courses.course3.sections.confidence-building.title"),
          content: t("cmi_courses.courses.course3.sections.confidence-building.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course4",
      name: t("cmi_courses.courses.course4.name"),
      title: t("cmi_courses.courses.course4.title"),
      description: t("cmi_courses.courses.course4.description"),
      objectives: t("cmi_courses.courses.course4.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "leadership-styles",
          title: t("cmi_courses.courses.course4.sections.leadership-styles.title"),
          content: t("cmi_courses.courses.course4.sections.leadership-styles.content", { returnObjects: true }) as string[]
        },
        {
          id: "team-management",
          title: t("cmi_courses.courses.course4.sections.team-management.title"),
          content: t("cmi_courses.courses.course4.sections.team-management.content", { returnObjects: true }) as string[]
        },
        {
          id: "motivation-influence",
          title: t("cmi_courses.courses.course4.sections.motivation-influence.title"),
          content: t("cmi_courses.courses.course4.sections.motivation-influence.content", { returnObjects: true }) as string[]
        },
        {
          id: "motivation-influenc",
          title: t("cmi_courses.courses.course4.sections.motivation-influenc.title"),
          content: t("cmi_courses.courses.course4.sections.motivation-influenc.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course5",
      name: t("cmi_courses.courses.course5.name"),
      title: t("cmi_courses.courses.course5.title"),
      description: t("cmi_courses.courses.course5.description"),
      objectives: t("cmi_courses.courses.course5.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "project-fundamentals",
          title: t("cmi_courses.courses.course5.sections.project-fundamentals.title"),
          content: t("cmi_courses.courses.course5.sections.project-fundamentals.content", { returnObjects: true }) as string[]
        },
        {
          id: "strategic-planning",
          title: t("cmi_courses.courses.course5.sections.strategic-planning.title"),
          content: t("cmi_courses.courses.course5.sections.strategic-planning.content", { returnObjects: true }) as string[]
        },
        {
          id: "monitoring-evaluation",
          title: t("cmi_courses.courses.course5.sections.monitoring-evaluation.title"),
          content: t("cmi_courses.courses.course5.sections.monitoring-evaluation.content", { returnObjects: true }) as string[]
        },
        {
          id: "monitoring-evaluatio",
          title: t("cmi_courses.courses.course5.sections.monitoring-evaluatio.title"),
          content: t("cmi_courses.courses.course5.sections.monitoring-evaluatio.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course6",
      name: t("cmi_courses.courses.course6.name"),
      title: t("cmi_courses.courses.course6.title"),
      description: t("cmi_courses.courses.course6.description"),
      objectives: t("cmi_courses.courses.course6.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "emotional-awareness",
          title: t("cmi_courses.courses.course6.sections.emotional-awareness.title"),
          content: t("cmi_courses.courses.course6.sections.emotional-awareness.content", { returnObjects: true }) as string[]
        },
        {
          id: "emotion-management",
          title: t("cmi_courses.courses.course6.sections.emotion-management.title"),
          content: t("cmi_courses.courses.course6.sections.emotion-management.content", { returnObjects: true }) as string[]
        },
        {
          id: "relatonship-buiding",
          title: t("cmi_courses.courses.course6.sections.relatonship-buiding.title"),
          content: t("cmi_courses.courses.course6.sections.relatonship-buiding.content", { returnObjects: true }) as string[]
        },
        {
          id: "relationship-buildig",
          title: t("cmi_courses.courses.course6.sections.relationship-buildig.title"),
          content: t("cmi_courses.courses.course6.sections.relationship-buildig.content", { returnObjects: true }) as string[]
        },
        {
          id: "relationship-buiding",
          title: t("cmi_courses.courses.course6.sections.relationship-buiding.title"),
          content: t("cmi_courses.courses.course6.sections.relationship-buiding.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course7",
      name: t("cmi_courses.courses.course7.name"),
      title: t("cmi_courses.courses.course7.title"),
      description: t("cmi_courses.courses.course7.description"),
      objectives: t("cmi_courses.courses.course7.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "creative-thinking",
          title: t("cmi_courses.courses.course7.sections.creative-thinking.title"),
          content: t("cmi_courses.courses.course7.sections.creative-thinking.content", { returnObjects: true }) as string[]
        },
        {
          id: "brainstorming-techniques",
          title: t("cmi_courses.courses.course7.sections.brainstorming-techniques.title"),
          content: t("cmi_courses.courses.course7.sections.brainstorming-techniques.content", { returnObjects: true }) as string[]
        },
        {
          id: "innovation-implementation",
          title: t("cmi_courses.courses.course7.sections.innovation-implementation.title"),
          content: t("cmi_courses.courses.course7.sections.innovation-implementation.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course8",
      name: t("cmi_courses.courses.course8.name"),
      title: t("cmi_courses.courses.course8.title"),
      description: t("cmi_courses.courses.course8.description"),
      objectives: t("cmi_courses.courses.course8.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "negotiation-basics",
          title: t("cmi_courses.courses.course8.sections.negotiation-basics.title"),
          content: t("cmi_courses.courses.course8.sections.negotiation-basics.content", { returnObjects: true }) as string[]
        },
        {
          id: "persuasion-techniques",
          title: t("cmi_courses.courses.course8.sections.persuasion-techniques.title"),
          content: t("cmi_courses.courses.course8.sections.persuasion-techniques.content", { returnObjects: true }) as string[]
        },
        {
          id: "win-win-solutions",
          title: t("cmi_courses.courses.course8.sections.win-win-solutions.title"),
          content: t("cmi_courses.courses.course8.sections.win-win-solutions.content", { returnObjects: true }) as string[]
        },
        {
          id: "win-n-solutions",
          title: t("cmi_courses.courses.course8.sections.win-n-solutions.title"),
          content: t("cmi_courses.courses.course8.sections.win-n-solutions.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course9",
      name: t("cmi_courses.courses.course9.name"),
      title: t("cmi_courses.courses.course9.title"),
      description: t("cmi_courses.courses.course9.description"),
      objectives: t("cmi_courses.courses.course9.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "change-dynamics",
          title: t("cmi_courses.courses.course9.sections.change-dynamics.title"),
          content: t("cmi_courses.courses.course9.sections.change-dynamics.content", { returnObjects: true }) as string[]
        },
        {
          id: "change-strategie",
          title: t("cmi_courses.courses.course9.sections.change-strategie.title"),
          content: t("cmi_courses.courses.course9.sections.change-strategie.content", { returnObjects: true }) as string[]
        },
        {
          id: "resilience-buildin",
          title: t("cmi_courses.courses.course9.sections.resilience-buildin.title"),
          content: t("cmi_courses.courses.course9.sections.resilience-buildin.content", { returnObjects: true }) as string[]
        },
        {
          id: "resilience-uildin",
          title: t("cmi_courses.courses.course9.sections.resilience-uildin.title"),
          content: t("cmi_courses.courses.course9.sections.resilience-uildin.content", { returnObjects: true }) as string[]
        }
      ]
    },
    {
      id: "course10",
      name: t("cmi_courses.courses.course10.name"),
      title: t("cmi_courses.courses.course10.title"),
      description: t("cmi_courses.courses.course10.description"),
      objectives: t("cmi_courses.courses.course10.objectives", { returnObjects: true }) as string[],
      sections: [
        {
          id: "career-planningl",
          title: t("cmi_courses.courses.course10.sections.career-planningl.title"),
          content: t("cmi_courses.courses.course10.sections.career-planningl.content", { returnObjects: true }) as string[]
        },
        {
          id: "career-planningj",
          title: t("cmi_courses.courses.course10.sections.career-planningj.title"),
          content: t("cmi_courses.courses.course10.sections.career-planningj.content", { returnObjects: true }) as string[]
        },
        {
          id: "continuous-klearning",
          title: t("cmi_courses.courses.course10.sections.continuous-klearning.title"),
          content: t("cmi_courses.courses.course10.sections.continuous-klearning.content", { returnObjects: true }) as string[]
        },
        {
          id: "continuous-llearning",
          title: t("cmi_courses.courses.course10.sections.continuous-llearning.title"),
          content: t("cmi_courses.courses.course10.sections.continuous-llearning.content", { returnObjects: true }) as string[]
        }
      ]
    }
  ]

  const toggleDropdown = (dropdown: string) => {
    setActiveDropdown(activeDropdown === dropdown ? null : dropdown)
  }

  const currentCourse = coursesData.find((course) => course.id === activeCourse) || coursesData[0]

  return (
    <div className="cmi-courses">
      <div className="container mx-auto">
        {/* Header Section */}
        <div className="text-center mb-8">
          <h2 className="services-header after:w-20 after:-bottom-2 text-center m-auto mb-4 mt-4">
            {t("cmi_courses.title")}
          </h2>
          <p className="text-gray-600 max-w-4xl mx-auto leading-relaxed">
            {t("cmi_courses.description")}
          </p>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar */}
          <div className="lg:w-80">
            <Card>
              <CardContent className="p-6">
                <div className="grid grid-cols-2 gap-3">
                  {coursesData.map((course) => (
                    <button
                      key={course.id}
                      onClick={() => {
                        setActiveCourse(course.id)
                        setActiveDropdown(null) // Reset dropdown when switching courses
                      }}
                      className={`h-12 text-sm font-medium transition-all duration-200 p-2 ${activeCourse === course.id
                        ? "hover:bg-red-6A2F38 text-white bg-[#6A2F38] rounded"
                        : "bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-300 rounded"
                        }`}
                    >
                      {course.name}
                    </button>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Main Content */}
          <div className="flex-1">
            <Card>
              <CardContent className="p-8">
                <h3 className="text-center text-[#D4AD89] mt-3 mb-3">{currentCourse.title}</h3>
                <p className="text-gray-700 leading-relaxed mb-8 text-center">{currentCourse.description}</p>

                {/* Course Objectives Button */}
                <div className="text-center mb-8">
                  <h3 onClick={() => toggleDropdown("objectives")} className="text-[#D4AD89] !text-start font-semibold cursor-pointer">
                    {t("cmi_courses.course_objectives")}
                  </h3>
                </div>

                {/* Objectives Dropdown */}
                {activeDropdown === "objectives" && (
                  <div className="mb-8 p-6 bg-orange-50 border border-orange-200 rounded-lg">
                    <h3 className="text-lg font-bold text-gray-800 mb-4">{t("cmi_courses.course_objectives")}:</h3>
                    <ul className="space-y-2">
                      {currentCourse.objectives.map((objective, index) => (
                        <li key={index} className="flex items-start gap-3">
                          <span className="w-2 h-2 bg-orange-400 rounded-full mt-2 flex-shrink-0"></span>
                          <span className="text-gray-700">{objective}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                {/* Course Sections */}
                <div className="row justify-content-center align-items-start">
                  {currentCourse.sections.map((section) => (
                    <div key={section.id} className="border border-gray-200 rounded-lg col-lg-5 p-0 m-2">
                      <button
                        onClick={() => toggleDropdown(section.id)}
                        className="w-full p-4 !text-start bg-gray-50 hover:bg-gray-100 transition-colors duration-200 flex items-center justify-between rounded-lg"
                      >
                        <span className="font-semibold text-gray-800">{section.title}</span>
                        <ChevronDown
                          className={`w-5 h-5 text-gray-600 transition-transform duration-200 ${activeDropdown === section.id ? "rotate-180" : ""}`}
                        />
                      </button>
                      {activeDropdown === section.id && (
                        <div className="p-4 bg-white border-t">
                          <ul className="text-gray-700 leading-relaxed list-disc list-inside">
                            {section.content.map((item, index) => (
                              <li key={index} className="list-disc list-inside !text-start">{item}</li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CmiCourses