import { Link } from "waku";
import { getContextData } from "waku/middleware/context";
import { ArrowRightIcon, BookOpenIcon, BrainIcon, LanguagesIcon, GraduationCapIcon } from "lucide-react";

import { Progress } from "@/components/ui/progress";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import Navbar from "@/components/Navbar";

type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr";
type LangMeta = { flag: string; name: string; level?: string; progress?: number; totalCards?: number; dueCards?: number };

const langs: Record<LanguageChoice, LangMeta> = {
  th: { flag: "🇹🇭", name: "Thai", level: "Beginner", progress: 32, totalCards: 245, dueCards: 12 },
  en: { flag: "🇬🇧", name: "English", level: "Advanced", progress: 87, totalCards: 542, dueCards: 5 },
  zh: { flag: "🇨🇳", name: "Chinese", level: "Intermediate", progress: 59, totalCards: 378, dueCards: 8 },
  ja: { flag: "🇯🇵", name: "Japanese", level: "Beginner", progress: 23, totalCards: 198, dueCards: 15 },
  es: { flag: "🇪🇸", name: "Spanish", level: "Not Started", progress: 0, totalCards: 312, dueCards: 0 },
  fr: { flag: "🇫🇷", name: "French", level: "Not Started", progress: 0, totalCards: 289, dueCards: 0 },
};

export default async function HomePage() {
  const { user } = getContextData() as any;

  // Get due cards count for the progress badge
  const totalDueCards = Object.values(langs)
    .reduce((sum, lang) => sum + (lang.dueCards || 0), 0);

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar user={user} />
      
      {/* Hero section */}
      <section className="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0">
              <h1 className="text-4xl md:text-5xl font-bold leading-tight mb-4">
                Master Languages with Sorlang
              </h1>
              <p className="text-lg md:text-xl mb-6 text-indigo-100">
                Boost your language learning with our scientifically proven spaced repetition system. Track progress, analyze text, and learn efficiently.
              </p>
              <div className="flex flex-wrap gap-4">
                <Link to="/study">
                  <Button size="lg" className="bg-white text-indigo-700 hover:bg-indigo-50">
                    Start Learning
                    <ArrowRightIcon className="ml-2 h-4 w-4" />
                  </Button>
                </Link>
                <Link to="/parse">
                  <Button size="lg" variant="outline" className="border-white text-white hover:bg-indigo-600">
                    Analyze Text
                  </Button>
                </Link>
              </div>
            </div>
            <div className="md:w-1/2">
              <div className="flex justify-center">
                <div className="relative">
                  <div className="absolute -top-4 -left-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg">
                    🇹🇭
                  </div>
                  <div className="absolute top-8 -right-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg">
                    🇨🇳
                  </div>
                  <div className="absolute -bottom-4 -left-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg">
                    🇯🇵
                  </div>
                  <div className="absolute -bottom-4 right-4 bg-indigo-500 text-white p-3 rounded-lg shadow-lg">
                    🇬🇧
                  </div>
                  <div className="bg-white rounded-xl p-8 shadow-xl">
                    <div className="text-indigo-700 text-6xl font-bold mb-2">
                      SRS
                    </div>
                    <div className="text-gray-600">
                      Spaced Repetition System
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Feature highlights */}
      <section className="py-12 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Learning Features</h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Tools designed to accelerate your language learning journey
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card>
              <CardHeader>
                <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2">
                  <BrainIcon className="h-6 w-6 text-indigo-600" />
                </div>
                <CardTitle>Spaced Repetition</CardTitle>
                <CardDescription>
                  Optimized review schedule based on your performance
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Our SRS algorithm determines the optimal time for you to review each card, helping you memorize efficiently.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2">
                  <LanguagesIcon className="h-6 w-6 text-indigo-600" />
                </div>
                <CardTitle>Text Analysis</CardTitle>
                <CardDescription>
                  Break down complex text into manageable pieces
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Parse any text to analyze grammar, vocabulary, and patterns to enhance your understanding.
                </p>
              </CardContent>
            </Card>
            
            <Card>
              <CardHeader>
                <div className="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-2">
                  <GraduationCapIcon className="h-6 w-6 text-indigo-600" />
                </div>
                <CardTitle>Progress Tracking</CardTitle>
                <CardDescription>
                  Monitor your learning journey with detailed statistics
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Track your progress across different languages, see your mastery level, and identify areas for improvement.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
      
      {/* Languages section */}
      <section className="py-12 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-2xl font-bold text-gray-900">Your Languages</h2>
            {totalDueCards > 0 && (
              <div className="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">
                {totalDueCards} cards due for review
              </div>
            )}
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {Object.entries(langs).map(([langCode, langData]) => (
              <LanguageItem 
                key={langCode}
                lang={langCode as LanguageChoice}
                langData={langData}
              />
            ))}
          </div>
          
          <div className="text-center mt-8">
            <Link to="/study">
              <Button size="lg" className="bg-indigo-600 hover:bg-indigo-700">
                <BookOpenIcon className="mr-2 h-4 w-4" />
                Go to Study Dashboard
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

export const getConfig = async () => {
  return {
    render: "dynamic",
  } as const;
};

function LanguageItem({ lang, langData }: { lang: LanguageChoice, langData: LangMeta }) {
  return (
    <Link to={`/lang/${lang}`}>
      <Card className="hover:shadow-md transition-shadow duration-300 h-full">
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="text-3xl">{langData.flag}</div>
              <div>
                <CardTitle>{langData.name}</CardTitle>
                <CardDescription>{langData.level}</CardDescription>
              </div>
            </div>
            {langData.dueCards > 0 && (
              <div className="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">
                {langData.dueCards} due
              </div>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <div className="mb-2">
            <Progress value={langData.progress} className="h-2" />
            <div className="flex justify-between mt-1 text-xs text-gray-500">
              <span>{langData.progress}% complete</span>
              <span>{langData.totalCards} cards</span>
            </div>
          </div>
        </CardContent>
        <CardFooter className="pt-0">
          <Button variant="outline" className="w-full">
            {langData.progress > 0 ? "Continue Learning" : "Start Learning"}
          </Button>
        </CardFooter>
      </Card>
    </Link>
  );
}
{
  /* Language Cards */
}
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
//   {languages.slice(0, 3).map((lang) => (
//     <div
//       key={lang.id}
//       className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"
//     >
//       <div className="p-6">
//         <div className="flex items-center justify-between mb-4">
//           <div className="flex items-center">
//             <span className="text-3xl mr-3">{lang.flag}</span>
//             <h3 className="text-xl font-semibold">{lang.name}</h3>
//           </div>
//           <span className="text-xs font-semibold bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
//             Beginner
//           </span>
//         </div>
//         <div className="mb-4">
//           <div className="w-full bg-gray-200 rounded-full h-2.5 mb-1">
//             <div
//               className="bg-indigo-600 h-2.5 rounded-full"
//               style={{ width: "40%" }}
//             ></div>
//           </div>
//           <div className="text-right text-sm text-gray-500">40% Complete</div>
//         </div>
//         <button className="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-300">
//           Continue Learning
//         </button>
//       </div>
//     </div>
//   ))}
// </div>;