import { getDictionary, langConfig, type Locale } from "{{LANG_CONFIG_PATH}}";
import Link from "next/link";

export default async function Home(props: {
  params: Promise<{ lang: Locale }>;
}) {
  const { lang } = await props.params;
  const dictionary = await getDictionary(lang);

  const dictionarySize = Object.keys(dictionary).length;

  const steps = [
    <span key={1}>Verify your email</span>,
    <span key={2}>
      Add a new translation to{" "}
      <a
        href="https://next-translator.com/projects/{{PROJECT_ID}}"
        target="_blank"
        className="font-medium text-blue-600"
      >
        {{PROJECT_NAME}}
      </a>
    </span>,
    <span key={3}>
      Run <code className={"text-green-600"}>`{{UPDATE_COMMAND}}`</code>
    </span>,
    <span key={4}>Refresh this page</span>,
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-100 to-gray-50">
      <h1 className="pt-12 text-center text-4xl font-bold">
        Generated by next-translator
      </h1>

      <div className="mx-auto max-w-2xl p-4">
        <section className="flex justify-center">
          <div className="rounded-lg bg-white px-4 py-2 shadow-sm">
            <span className="text-sm">Dictionary size</span>
            <span
              className={`ml-2 font-semibold ${dictionarySize ? "text-green-600" : "text-red-600"}`}
            >
              {dictionarySize}
            </span>
          </div>
        </section>

        <div className="mt-4 flex flex-wrap justify-center gap-2">
          {langConfig.locales.map((locale) => {
            const isActive = locale === lang;
            return (
              <Link
                href={`/${locale}`}
                key={locale}
                className={`w-18 rounded-xl py-1 text-center text-sm font-medium shadow-sm ${
                  isActive ? "bg-sky-600 text-white" : "bg-white"
                }`}
              >
                {locale}
              </Link>
            );
          })}
        </div>

        <section className="mt-8 rounded-2xl bg-white p-4 shadow-xl">
          <h2 className="text-center text-2xl font-bold">What&#39;s Next?</h2>

          <div className="mt-6 space-y-3">
            {steps.map((item, index) => (
              <div key={index} className="rounded-xl bg-blue-50 p-6">
                <div className="flex items-center">
                  <div className="mr-3 flex size-8 items-center justify-center rounded-full bg-sky-600 text-sm font-bold text-white">
                    {index + 1}
                  </div>
                  <h3 className="text-lg font-semibold">{item}</h3>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}