import Link from "next/link";
import { notFound } from "next/navigation";
import { CrosswordConfigForm } from "@/components/crossword-config-form";
import { LanguageSwitcher } from "@/components/language-switcher";
import { getDictionary, isLocale } from "@/lib/i18n";
import { getMockCrosswordResponse } from "@/lib/mock-crossword";

type LocalizedHomePageProps = {
  params: Promise<{ locale: string }>;
};

export default async function LocalizedHomePage({ params }: LocalizedHomePageProps) {
  const { locale } = await params;
  if (!isLocale(locale)) {
    notFound();
  }

  const dict = getDictionary(locale);
  const crossword = getMockCrosswordResponse(locale);

  return (
    <main className="shell stack">
      <section className="hero">
        <div className="hero__topline">
          <span className="hero__badge">{dict.home.badge}</span>
          <LanguageSwitcher locale={locale} />
        </div>
        <h1>{dict.home.title}</h1>
        <p>{dict.home.subtitle}</p>
      </section>

      <section className="home-grid">
        <div className="card panel">
          <h2>{dict.home.requestTitle}</h2>
          <p className="muted">{dict.home.requestText}</p>
          <CrosswordConfigForm locale={locale} dict={dict.form} />
        </div>

        <div className="stack">
          <div className="card panel">
            <h2>{dict.home.structureTitle}</h2>
            <div className="chip-row">
              {dict.home.structureChips.map((chip) => (
                <span className="chip" key={chip}>
                  {chip}
                </span>
              ))}
            </div>
            <p className="muted contract-note">{dict.home.structureText}</p>
          </div>

          <div className="card panel">
            <h2>{dict.home.demoTitle}</h2>
            <div className="kpi-grid">
              <div className="kpi">
                <span className="muted">{dict.home.kpis.words}</span>
                <strong>{crossword.summary.total_words}</strong>
              </div>
              <div className="kpi">
                <span className="muted">{dict.home.kpis.intersections}</span>
                <strong>{crossword.summary.intersections}</strong>
              </div>
              <div className="kpi">
                <span className="muted">{dict.home.kpis.rows}</span>
                <strong>{crossword.grid.rows}</strong>
              </div>
              <div className="kpi">
                <span className="muted">{dict.home.kpis.cols}</span>
                <strong>{crossword.grid.cols}</strong>
              </div>
            </div>
            <div className="actions" style={{ marginTop: 18 }}>
              <Link className="button" href={`/${locale}/crosswords/demo-transport`}>
                {dict.home.openDemo}
              </Link>
              <Link className="button button--secondary" href={`/${locale}/new`}>
                {dict.home.openConfig}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}