"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import AnimatedSection from "@/components/AnimatedSection";
import { Play, CheckCircle, BookOpen, Clock } from "lucide-react";
import Link from "next/link";
import { getStoredLanguage } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";

const courseModules = [
  {
    id: 1,
    title: "Introduction to Bhagavad Gita",
    duration: "2 hours",
    videos: [
      { id: 1, title: "What is Bhagavad Gita?", duration: "30 min", completed: true },
      { id: 2, title: "Historical Context", duration: "25 min", completed: true },
      { id: 3, title: "Why Study the Gita?", duration: "35 min", completed: false },
      { id: 4, title: "Key Concepts Overview", duration: "30 min", completed: false },
    ],
  },
  {
    id: 2,
    title: "Chapter 1-6: Foundation",
    duration: "5 hours",
    videos: [
      { id: 5, title: "Chapter 1: Arjuna's Dilemma", duration: "45 min", completed: false },
      { id: 6, title: "Chapter 2: Sankhya Yoga", duration: "60 min", completed: false },
      { id: 7, title: "Chapter 3: Karma Yoga", duration: "55 min", completed: false },
      { id: 8, title: "Chapter 4: Jnana Yoga", duration: "50 min", completed: false },
      { id: 9, title: "Chapter 5: Renunciation", duration: "45 min", completed: false },
      { id: 10, title: "Chapter 6: Meditation", duration: "45 min", completed: false },
    ],
  },
];

export default function OlympiadCourse() {
  const [expandedModule, setExpandedModule] = useState<number | null>(1);
  const lang = getStoredLanguage();
  const t = getTranslation(lang).olympiadCoursePage;

  const calculateProgress = () => {
    const totalVideos = courseModules.reduce((acc, module) => acc + module.videos.length, 0);
    const completedVideos = courseModules.reduce((acc, module) => acc + module.videos.filter((v) => v.completed).length, 0);
    return Math.round((completedVideos / totalVideos) * 100);
  };

  const progress = calculateProgress();
  const completedCount = courseModules.reduce((acc, m) => acc + m.videos.filter((v) => v.completed).length, 0);
  const totalCount = courseModules.reduce((acc, m) => acc + m.videos.length, 0);

  return (
    <div className="pt-20 min-h-screen bg-gradient-to-br from-orange-50 to-white">
      <div className="container mx-auto px-4 py-12">
        <AnimatedSection className="max-w-5xl mx-auto">
          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900">{t.title}</h1>
              <Link href="/olympiad/exam">
                <Button className="bg-[#FAA631] hover:bg-orange-400">{t.examButton}</Button>
              </Link>
            </div>
            <p className="text-lg text-gray-600 mb-6">{t.subtitle}</p>

            <Card className="bg-gradient-to-r from-[#FAA631] to-[#FAA631] text-white">
              <CardContent className="pt-6">
                <div className="flex items-center justify-between mb-4">
                  <span className="text-lg font-semibold">{t.overallProgress}</span>
                  <span className="text-2xl font-bold">{progress}%</span>
                </div>
                <div className="w-full bg-white/20 rounded-full h-3">
                  <div className="bg-white h-3 rounded-full transition-all duration-300" style={{ width: `${progress}%` }} />
                </div>
                <p className="text-sm text-orange-100 mt-2">
                  {completedCount} / {totalCount} {t.videosCompletedSuffix}
                </p>
              </CardContent>
            </Card>
          </div>

          <div className="space-y-4">
            {courseModules.map((module) => {
              const moduleProgress = Math.round((module.videos.filter((v) => v.completed).length / module.videos.length) * 100);

              return (
                <Card key={module.id} className="overflow-hidden">
                  <CardHeader className="cursor-pointer hover:bg-gray-50 transition-colors" onClick={() => setExpandedModule(expandedModule === module.id ? null : module.id)}>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                          <BookOpen className="w-6 h-6 text-[#FAA631]" />
                        </div>
                        <div>
                          <CardTitle className="text-xl">{module.title}</CardTitle>
                          <div className="flex items-center space-x-4 text-sm text-gray-600 mt-1">
                            <span className="flex items-center">
                              <Clock className="w-4 h-4 mr-1" />
                              {module.duration}
                            </span>
                            <span>{module.videos.length} {t.videos}</span>
                            <span className="text-[#FAA631] font-semibold">{moduleProgress}% {t.complete}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>

                  {expandedModule === module.id && (
                    <CardContent className="pt-0">
                      <div className="space-y-2">
                        {module.videos.map((video) => (
                          <div key={video.id} className={`flex items-center justify-between p-4 rounded-lg border-2 transition-all ${video.completed ? "border-green-500 bg-green-50" : "border-gray-200 hover:border-orange-300 hover:bg-orange-50"}`}>
                            <div className="flex items-center space-x-3">
                              {video.completed ? <CheckCircle className="w-6 h-6 text-green-600" /> : <Play className="w-6 h-6 text-[#FAA631]" />}
                              <div>
                                <p className="font-medium text-gray-900">{video.title}</p>
                                <p className="text-sm text-gray-600">{video.duration}</p>
                              </div>
                            </div>
                            <Button variant={video.completed ? "outline" : "default"} className={video.completed ? "hover:bg-[#FAA631]" : "bg-[#FAA631] hover:bg-orange-400"}>
                              {video.completed ? t.rewatch : t.watch}
                            </Button>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  )}
                </Card>
              );
            })}
          </div>

          {progress >= 80 && (
            <AnimatedSection className="mt-8">
              <Card className="bg-gradient-to-br from-green-600 to-green-700 text-white">
                <CardContent className="pt-6 text-center">
                  <CheckCircle className="w-16 h-16 mx-auto mb-4" />
                  <h3 className="text-2xl font-bold mb-2">{t.readyTitle}</h3>
                  <p className="text-green-100 mb-6">{t.readyDescription}</p>
                  <Link href="/olympiad/exam">
                    <Button size="lg" className="bg-white text-green-600 hover:bg-green-50">
                      {t.takeOlympiadExam}
                    </Button>
                  </Link>
                </CardContent>
              </Card>
            </AnimatedSection>
          )}
        </AnimatedSection>
      </div>
    </div>
  );
}