"use client";

import { use, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { GraduationCap, Globe, ArrowRight, BookOpen, Award, Building2, ChevronRight } from "lucide-react";
import { Button } from "@workspace/ui/components/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@workspace/ui/components/card";
import Image from "next/image";

import idMessages from "../../../messages/id.json";
import enMessages from "../../../messages/en.json";
import jaMessages from "../../../messages/ja.json";
import koMessages from "../../../messages/ko.json";

const dictionaries: Record<string, any> = {
  id: idMessages,
  en: enMessages,
  ja: jaMessages,
  ko: koMessages,
};

export default function WelcomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = use(params);
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [selectedLanguage, setSelectedLanguage] = useState(dictionaries[locale] ? locale : "id");

  const [step, setStep] = useState<'language' | 'exam_type' | 'sub_level'>('language');
  const [selectedLangName, setSelectedLangName] = useState('');
  const [selectedExamCategory, setSelectedExamCategory] = useState('');

  const t = dictionaries[selectedLanguage] || dictionaries.id;

  const handleLanguageChange = (newLang: string) => {
    setSelectedLanguage(newLang);
    startTransition(() => {
      router.push(`/${newLang}`);
    });
  };

  const languageOptions = [
    { id: "en", name: "Bahasa Inggris", flag: "🇬🇧", desc: "TOEIC, TOEFL, IELTS Preparation" },
    { id: "ja", name: "Bahasa Jepang", flag: "🇯🇵", desc: "JLPT, JFT-Basic, NAT-Test" },
    { id: "ko", name: "Bahasa Korea", flag: "🇰🇷", desc: "TOPIK I & II, EPS-TOPIK" },
  ];

  const examCategories: Record<string, { id: string; name: string; desc: string }[]> = {
    "Bahasa Jepang": [
      { id: "JLPT", name: "JLPT (Japanese Language Proficiency Test)", desc: "Ujian resmi kemampuan bahasa Jepang standar internasional." },
      { id: "JFT", name: "JFT-Basic (Japan Foundation Test)", desc: "Ujian untuk pekerja keterampilan khusus (SSW)." },
      { id: "NAT", name: "NAT-Test", desc: "Ujian evaluasi kemampuan bahasa Jepang praktis." },
    ],
    "Bahasa Inggris": [
      { id: "TOEIC", name: "TOEIC", desc: "Standar kemampuan bahasa Inggris dunia kerja." },
      { id: "TOEFL", name: "TOEFL iBT", desc: "Standar akademik untuk studi internasional." },
    ],
    "Bahasa Korea": [
      { id: "TOPIK", name: "TOPIK (Test of Proficiency in Korea)", desc: "Ujian resmi kemampuan bahasa Korea." },
      { id: "EPS", name: "EPS-TOPIK", desc: "Ujian khusus pekerja migran ke Korea Selatan." },
    ]
  };

  const jlptLevels = [
    { level: "N5", name: "N5 (Dasar)", desc: "Memahami kalimat dasar dan percakapan sehari-hari sederhana." },
    { level: "N4", name: "N4 (Dasar Lanjutan)", desc: "Memahami percakapan dasar situasi sehari-hari." },
    { level: "N3", name: "N3 (Menengah)", desc: "Memahami situasi sehari-hari dalam tingkat tertentu." },
    { level: "N2", name: "N2 (Menengah Atas)", desc: "Memahami bahasa Jepang dalam situasi sehari-hari." },
    { level: "N1", name: "N1 (Tingkat Lanjut)", desc: "Memahami bahasa Jepang yang digunakan dalam situasi luas." },
  ];

  const handleSelectLanguageCard = (langName: string) => {
    setSelectedLangName(langName);
    setStep('exam_type');
  };

  const handleSelectExamCategory = (examId: string) => {
    setSelectedExamCategory(examId);
    if (selectedLangName === "Bahasa Jepang" && examId === "JLPT") {
      setStep('sub_level');
    } else {
      startTransition(() => {
        router.push(`/${selectedLanguage}`);
      });
    }
  };

  const handleSelectJlptLevel = (level: string) => {
    startTransition(() => {
      if (selectedLangName === "Bahasa Jepang" && selectedExamCategory === "JLPT" && level === "N5") {
        // Mengarahkan langsung ke rute halaman kuis N5 yang sudah dibuat
        router.push(`/${selectedLanguage}/jlpt-n5`);
      } else {
        router.push(`/${selectedLanguage}?level=${level}`);
      }
    });
  };

  const handleBack = () => {
    if (step === 'sub_level') setStep('exam_type');
    else if (step === 'exam_type') setStep('language');
  };

  return (
    <div className="relative min-h-svh w-full flex items-center justify-center p-4 sm:p-6 overflow-hidden bg-white text-gray-900">
      {/* Animasi Bunga Sakura Jatuh (Nuansa Putih & Pink Lembut) */}
      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden opacity-80">
        <div className="sakura-petal absolute -top-10 left-[10%] w-4 h-4 bg-pink-100 rounded-bl-full rounded-tr-full animate-fall-slow" style={{ animationDuration: '7s', animationDelay: '0s' }}></div>
        <div className="sakura-petal absolute -top-10 left-[25%] w-3 h-3 bg-pink-200 rounded-bl-full rounded-tr-full animate-fall-medium" style={{ animationDuration: '5s', animationDelay: '1s' }}></div>
        <div className="sakura-petal absolute -top-10 left-[40%] w-5 h-5 bg-rose-100 rounded-bl-full rounded-tr-full animate-fall-fast" style={{ animationDuration: '4s', animationDelay: '2s' }}></div>
        <div className="sakura-petal absolute -top-10 left-[60%] w-3.5 h-3.5 bg-pink-100 rounded-bl-full rounded-tr-full animate-fall-slow" style={{ animationDuration: '8s', animationDelay: '0.5s' }}></div>
        <div className="sakura-petal absolute -top-10 left-[75%] w-4 h-4 bg-pink-200 rounded-bl-full rounded-tr-full animate-fall-medium" style={{ animationDuration: '6s', animationDelay: '1.5s' }}></div>
        <div className="sakura-petal absolute -top-10 left-[90%] w-4.5 h-4.5 bg-rose-100 rounded-bl-full rounded-tr-full animate-fall-fast" style={{ animationDuration: '4.5s', animationDelay: '2.5s' }}></div>
      </div>

      <style jsx>{`
        @keyframes fall {
          0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 1; }
          100% { transform: translateY(105vh) translateX(50px) rotate(360deg); opacity: 0.2; }
        }
        .animate-fall-slow { animation: fall linear infinite; }
        .animate-fall-medium { animation: fall linear infinite; }
        .animate-fall-fast { animation: fall linear infinite; }
      `}</style>

      {/* Konten Utama */}
      <div className="relative z-10 w-full max-w-4xl space-y-6">
        
        {step !== 'language' && (
          <div className="flex items-center justify-between bg-white p-3 border border-gray-200 shadow-sm rounded-none">
            <button 
              onClick={handleBack}
              className="text-xs font-bold text-gray-700 hover:text-black flex items-center gap-1 cursor-pointer"
            >
              ← Kembali ke Pilihan Sebelumnya
            </button>
            <span className="text-xs font-mono text-gray-500 uppercase tracking-wider">
              Eduverse {selectedLangName ? `> ${selectedLangName}` : ''} {selectedExamCategory ? `> ${selectedExamCategory}` : ''}
            </span>
          </div>
        )}

        <Card className="border-2 border-gray-200 shadow-xl rounded-none bg-white text-gray-900">
          <CardHeader className="text-center pb-4 pt-8">
            <div className="flex justify-center mb-3">
              <div className="p-3 bg-gray-50 rounded-full border border-gray-200 shadow-sm flex items-center justify-center">
                <Image 
                  src="/images/eduverse-dark.png"
                  alt="Eduverse Logo" 
                  width={40} 
                  height={40} 
                  className="object-contain" 
                />
              </div>
            </div>
            <CardTitle className="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900">
              Eduverse CBT Simulator
            </CardTitle>
            <CardDescription className="text-xs sm:text-sm text-gray-500 mt-2 leading-relaxed px-4 max-w-lg mx-auto">
              {step === 'language' && "Silakan pilih salah satu bidang bahasa di Eduverse untuk memulai simulasi ujian profesional."}
              {step === 'exam_type' && `Pilih jenis kurikulum atau tipe ujian resmi (${selectedLangName}) di Eduverse.`}
              {step === 'sub_level' && "Tentukan tingkat kemampuan (Level) ujian JLPT untuk sertifikasi Eduverse Anda."}
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-6 pb-8 px-6">
            
            {step === 'language' && (
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                {languageOptions.map((lang) => (
                  <div
                    key={lang.id}
                    onClick={() => handleSelectLanguageCard(lang.name)}
                    className="border-2 border-gray-200 hover:border-gray-900 bg-white p-5 cursor-pointer transition-all flex flex-col justify-between group shadow-sm hover:shadow-md rounded-none"
                  >
                    <div className="space-y-3">
                      <span className="text-3xl">{lang.flag}</span>
                      <h3 className="font-bold text-base text-gray-900">{lang.name}</h3>
                      <p className="text-xs text-gray-500 leading-relaxed">{lang.desc}</p>
                    </div>
                    <div className="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between text-xs font-bold text-gray-800">
                      <span>Pilih Kategori</span>
                      <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </div>
                  </div>
                ))}
              </div>
            )}

            {step === 'exam_type' && (
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                {examCategories[selectedLangName]?.map((exam) => (
                  <div
                    key={exam.id}
                    onClick={() => handleSelectExamCategory(exam.id)}
                    className="border-2 border-gray-200 hover:border-gray-900 bg-white p-5 cursor-pointer transition-all flex flex-col justify-between group shadow-sm hover:shadow-md rounded-none"
                  >
                    <div className="space-y-2">
                      <div className="w-8 h-8 bg-gray-100 text-gray-900 flex items-center justify-center font-bold border border-gray-300 text-xs">
                        {exam.id}
                      </div>
                      <h3 className="font-bold text-sm text-gray-900">{exam.name}</h3>
                      <p className="text-xs text-gray-500 leading-relaxed">{exam.desc}</p>
                    </div>
                    <div className="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between text-xs font-bold text-gray-800">
                      <span>Mulai Tes</span>
                      <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                    </div>
                  </div>
                ))}
              </div>
            )}

            {step === 'sub_level' && (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {jlptLevels.map((lvl) => (
                  <div
                    key={lvl.level}
                    onClick={() => handleSelectJlptLevel(lvl.level)}
                    className="border-2 border-gray-200 hover:border-gray-900 bg-white p-4 cursor-pointer transition-all flex items-center justify-between group shadow-sm rounded-none"
                  >
                    <div>
                      <div className="inline-block bg-gray-900 text-white font-bold text-xs px-2 py-0.5 mb-1">
                        {lvl.level}
                      </div>
                      <h4 className="font-bold text-sm text-gray-900">{lvl.name}</h4>
                      <p className="text-[11px] text-gray-500 mt-0.5">{lvl.desc}</p>
                    </div>
                    <div className="p-2 bg-gray-50 group-hover:bg-gray-100 text-gray-400 group-hover:text-gray-900 border border-gray-200">
                      <ArrowRight className="w-4 h-4" />
                    </div>
                  </div>
                ))}
              </div>
            )}

            <div className="pt-4 border-t border-gray-200 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Globe className="w-4 h-4 text-gray-600" />
                <span className="text-xs font-bold text-gray-700">UI Language:</span>
              </div>
              <div className="flex gap-1.5">
                {[
                  { code: "id", label: "ID" },
                  { code: "en", label: "EN" },
                  { code: "ja", label: "JA" },
                  { code: "ko", label: "KO" },
                ].map((lang) => (
                  <button
                    key={lang.code}
                    type="button"
                    onClick={() => handleLanguageChange(lang.code)}
                    className={`px-2.5 py-1 text-xs font-bold border transition-all cursor-pointer rounded-none ${
                      selectedLanguage === lang.code
                        ? "bg-gray-900 text-white border-gray-900 shadow-sm"
                        : "bg-white text-gray-700 border-gray-300 hover:border-gray-900"
                    }`}
                  >
                    {lang.label}
                  </button>
                ))}
              </div>
            </div>

          </CardContent>
        </Card>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <Card className="border border-gray-200 bg-white shadow-sm rounded-none p-4 flex flex-col justify-between hover:border-gray-900 transition-all">
            <div className="space-y-2">
              <div className="w-8 h-8 bg-gray-50 text-gray-800 flex items-center justify-center font-bold border border-gray-300">
                <BookOpen className="w-4 h-4" />
              </div>
              <h3 className="font-bold text-sm text-gray-900">Eduverse Global Courses</h3>
              <p className="text-xs text-gray-500 leading-relaxed">
                {t.AboutSection?.list3}
              </p>
            </div>
          </Card>

          <Card className="border border-gray-200 bg-white shadow-sm rounded-none p-4 flex flex-col justify-between hover:border-gray-900 transition-all">
            <div className="space-y-2">
              <div className="w-8 h-8 bg-gray-50 text-gray-800 flex items-center justify-center font-bold border border-gray-300">
                <Award className="w-4 h-4" />
              </div>
              <h3 className="font-bold text-sm text-gray-900">Eduverse Certifications</h3>
              <p className="text-xs text-gray-500 leading-relaxed">
                {t.QuizSection?.subtitle || "Test your vocabulary and grammar understanding efficiently."}
              </p>
            </div>
          </Card>

          <Card className="border border-gray-200 bg-white shadow-sm rounded-none p-4 flex flex-col justify-between hover:border-gray-900 transition-all">
            <div className="space-y-2">
              <div className="w-8 h-8 bg-gray-50 text-gray-800 flex items-center justify-center font-bold border border-gray-300">
                <Building2 className="w-4 h-4" />
              </div>
              <h3 className="font-bold text-sm text-gray-900">Eduverse LPK Ready</h3>
              <p className="text-xs text-gray-500 leading-relaxed">
                {t.FooterSection?.description}
              </p>
            </div>
          </Card>
        </div>

        <div className="text-center font-mono text-[10px] sm:text-xs text-gray-400">
          <span>{t.FooterSection?.copyright || "All Rights Reserved by Eduverse AslanAsilon"}</span>
        </div>

      </div>
    </div>
  );
}