import { getDictionary, langConfig, type Locale } from "{{LANG_CONFIG_PATH}}";
import Link from "next/link";
import styles from "./page.module.css";

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={styles.projectLink}
      >
        {{PROJECT_NAME}}
      </a>
    </span>,
    <span key={3}>
      Run <code className={styles.codeSnippet}>`{{UPDATE_COMMAND}}`</code>
    </span>,
    <span key={4}>Refresh this page</span>,
  ];

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>
        Generated by next-translator
      </h1>

      <div className={styles.content}>
        <section className={styles.dictionarySection}>
          <div className={styles.dictionaryCard}>
            <span className={styles.dictionaryLabel}>Dictionary size</span>
            <span
              className={`${styles.dictionarySize} ${
                dictionarySize ? styles.dictionarySizeSuccess : styles.dictionarySizeError
              }`}
            >
              {dictionarySize}
            </span>
          </div>
        </section>

        <div className={styles.localesContainer}>
          {langConfig.locales.map((locale) => {
            const isActive = locale === lang;
            return (
              <Link
                href={`/${locale}`}
                key={locale}
                className={`${styles.localeLink} ${
                  isActive ? styles.localeLinkActive : styles.localeLinkInactive
                }`}
              >
                {locale}
              </Link>
            );
          })}
        </div>

        <section className={styles.todoSection}>
          <h2 className={styles.todoTitle}>What&#39;s Next?</h2>

          <div className={styles.todoList}>
            {steps.map((item, index) => (
              <div key={index} className={styles.todoItem}>
                <div className={styles.todoItemContent}>
                  <div className={styles.todoNumber}>
                    {index + 1}
                  </div>
                  <h3 className={styles.todoText}>{item}</h3>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}