import { isLocale, type Locale } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { getDb } from "@/lib/db";
import { seedIfEmpty } from "@/lib/seed";
import { getProfile, listFeaturedProjects, listProjects } from "@/lib/models";
import { BioSection } from "@/components/bio-section";
import { LinksSection } from "@/components/links-section";
import { ProjectGrid } from "@/components/project-grid";
import { JsonLd } from "@/components/json-ld";
import { buildMetadata } from "@/lib/metadata";
import Link from "next/link";
import { publicPath } from "@/i18n/routes";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  const dict = getDict(locale);
  return buildMetadata(locale, dict.home.title, dict.home.lede);
}

export default async function HomePage({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  const db = getDb();
  seedIfEmpty(db);
  const profile = getProfile(db, locale);
  const featured = listFeaturedProjects(db, locale);
  const all = listProjects(db, locale);
  const dict = getDict(locale);

  return (
    <>
      <JsonLd profile={profile} featured={featured} />

      <section className="ascii-box mb-8">
        <p className="font-mono text-xs uppercase tracking-wider text-muted">{dict.home.kicker}</p>
        <h1
          className="headline-glitch mt-2 text-4xl font-semibold leading-tight md:text-5xl"
          data-text={dict.home.title}
        >
          {dict.home.title}
        </h1>
        <p className="mt-4 max-w-2xl text-[var(--fg)]">{dict.home.lede}</p>
      </section>

      <div className="grid gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          {featured.length > 0 ? (
            <>
              <div className="section-heading">
                <span className="section-heading__label">~/featured</span>
                <h2 className="section-heading__title">{dict.home.featuredLabel}</h2>
              </div>
              <ProjectGrid projects={featured} locale={locale} showStance />
            </>
          ) : null}
          <div className="section-heading mt-12">
            <span className="section-heading__label">~/all</span>
            <h2 className="section-heading__title">{dict.home.allProjectsLabel}</h2>
            <Link
              href={publicPath(locale, "projects")}
              className="ml-auto font-mono text-xs uppercase text-accent hover:underline"
            >
              {dict.actions.viewProjects} →
            </Link>
          </div>
          <ProjectGrid projects={all.slice(0, 6)} locale={locale} />
        </div>
        <aside className="space-y-6">
          <BioSection profile={profile} locale={locale} />
          <LinksSection profile={profile} locale={locale} />
        </aside>
      </div>

      <section className="ascii-box mt-12">
        <p className="font-mono text-xs uppercase tracking-wider text-accent">{dict.home.cta.title}</p>
        <p className="mt-2 text-[var(--fg)]">{dict.home.cta.body}</p>
      </section>
    </>
  );
}