import { isLocale, type Locale, publicPath } from "@/i18n/routes";
import { getDict } from "@/i18n/dictionaries";
import { getDb } from "@/lib/db";
import { seedIfEmpty } from "@/lib/seed";
import { getProfile } from "@/lib/models";
import { BioSection } from "@/components/bio-section";
import { LinksSection } from "@/components/links-section";
import { StackIcon } from "@/components/stack-icon";
import { buildMetadata } from "@/lib/metadata";

const STACK_PRIMARY: Array<{ key: string; label: string }> = [
  { key: "typescript", label: "TypeScript" },
  { key: "node", label: "Node.js" },
  { key: "python", label: "Python" },
  { key: "rust", label: "Rust" },
  { key: "sqlite", label: "SQLite" },
  { key: "react", label: "React" },
  { key: "next", label: "Next.js" },
  { key: "tailwind", label: "Tailwind" },
  { key: "docker", label: "Docker" },
  { key: "gitea", label: "Gitea" },
  { key: "nix", label: "Nix" },
  { key: "shell", label: "Shell" },
  { key: "selfhost", label: "Self-Host" },
];

export async function generateMetadata({
  params,
}: {
  params: Promise<{ lang: string }>;
}) {
  const { lang } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  return buildMetadata(locale, getDict(locale).about.title, "Über eldov", { path: publicPath(locale, "about") });
}

export default async function AboutPage({
  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);
  return (
    <div className="mx-auto max-w-[var(--max-w)] px-4 py-12 md:px-6">
      <div className="grid gap-8 lg:grid-cols-[1.6fr_1fr]">
        <div>
          <BioSection profile={profile} locale={locale} />

          <section className="mt-10">
            <div className="section-heading">
              <span className="section-heading__label">~/stack</span>
              <h2 className="section-heading__title">
                {locale === "de" ? "Stack & Werkzeuge" : "Stack & tools"}
              </h2>
            </div>
            <p className="mb-4 max-w-2xl text-[var(--fg-dim)]">
              {locale === "de"
                ? "Womit ich arbeite. Auswahl, kein Anspruch auf Vollständigkeit — die Liste wächst mit dem, was ich gerade brauche."
                : "What I work with. A selection, not exhaustive — the list grows with what I currently need."}
            </p>
            <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
              {STACK_PRIMARY.map((s) => (
                <div
                  key={s.key}
                  className="flex items-center gap-3 border border-hairline bg-[color-mix(in_oklab,var(--panel)_70%,transparent)] p-3 transition-colors hover:border-accent"
                  data-cursor="hover"
                >
                  <span className="text-accent">
                    <StackIcon name={s.key} className="h-5 w-5" />
                  </span>
                  <div>
                    <div className="text-sm font-medium text-[var(--fg)]">{s.label}</div>
                    <div className="font-mono text-[10px] uppercase tracking-wider text-muted">{s.key}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
        <aside className="space-y-6">
          <LinksSection profile={profile} locale={locale} />
        </aside>
      </div>
    </div>
  );
}
