import { Link } from "waku";

import { Progress } from "@/components/ui/progress";
import { getContextData } from "waku/middleware/context";

type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr";
type LangMeta = { flag: string; name: string };
const langs: Record<LanguageChoice, LangMeta> = {
  th: { flag: "🇹🇭", name: "Thai" },
  en: { flag: "🇬🇧", name: "English" },
  zh: { flag: "🇨🇳", name: "Chinese" },
  ja: { flag: "🇯🇵", name: "Japanese" },
  es: { flag: "🇪🇸", name: "Spanish" },
  fr: { flag: "🇫🇷", name: "French" },
};

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

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold text-indigo-600">Prosody</h1>
            </div>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex space-x-8">
              <Link to="/">
                <button
                  className={`py-2 font-medium text-indigo-600 border-b-2 border-indigo-600`}
                >
                  Home
                </button>
              </Link>
              <Link to="/parse">
                <button
                  className={`py-2 font-medium text-gray-600 hover:text-indigo-600`}
                >
                  Analyze Text
                </button>
              </Link>
            </nav>
          </div>
        </div>

        {/* Mobile Navigation */}
      </header>
      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <h2 className="text-lg"> Your Languages</h2>
        <LanguageItem lang="en" />
        <LanguageItem lang="th" />
        <LanguageItem lang="zh" />
        <LanguageItem lang="ja" />
      </section>
    </div>
  );
}

const getData = async () => {
  const data = {
    title: "Waku",
    headline: "Waku",
    body: "Hello world!",
  };

  return data;
};

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

async function LanguageItem({ lang }: { lang: LanguageChoice }) {
  return (
    <Link to={`/lang/${lang}`}>
      <div className="bg-white rounded-xl h-32 shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
        <div className="p-6">
          <div className="flex">
            <div className="text-lg">{langs[lang].flag}</div>
            <div className="text-lg">{langs[lang].name}</div>
          </div>
          <Progress value={50} className="w-[60%]" />
        </div>
      </div>
    </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>;