import type { Metadata } from "next";
import { ArrowRight, BriefcaseBusiness, GraduationCap, Layers3, MapPin, Sparkles, Wrench } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { PageHero } from "@/components/layout/page-hero";
import { SiteLogo } from "@/components/layout/site-logo";
import { MotionFade } from "@/components/motion-fade";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { buildLocalizedMetadata } from "@/lib/metadata";

type AboutPageProps = {
  params: {
    locale: string;
  };
};

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params: { locale },
}: AboutPageProps): Promise<Metadata> {
  const localeKey = resolveLocale(locale);
  const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/about",
    title: t("title"),
    description: t("intro"),
  });
}

export default async function AboutPage({ params: { locale } }: AboutPageProps) {
  const localeKey = resolveLocale(locale);
  const [t, siteSettings, mediaBindings] = await Promise.all([
    getTranslations({ locale: localeKey, namespace: "aboutPage" }),
    getSiteSettings(),
    getSiteSettingsMediaBindings(),
  ]);
  const siteName = siteSettings.locales[localeKey].siteName;

  const workItems = [
    {
      period: t("workOnePeriod"),
      role: t("workOneRole"),
      company: t("workOneCompany"),
      text: t("workOneText"),
    },
    {
      period: t("workTwoPeriod"),
      role: t("workTwoRole"),
      company: t("workTwoCompany"),
      text: t("workTwoText"),
    },
    {
      period: t("workThreePeriod"),
      role: t("workThreeRole"),
      company: t("workThreeCompany"),
      text: t("workThreeText"),
    },
  ];

  const educationItems = [
    {
      title: t("educationOneTitle"),
      place: t("educationOnePlace"),
      text: t("educationOneText"),
    },
    {
      title: t("educationTwoTitle"),
      place: t("educationTwoPlace"),
      text: t("educationTwoText"),
    },
  ];

  const skillItems = [t("skillOne"), t("skillTwo"), t("skillThree"), t("skillFour"), t("skillFive"), t("skillSix")];
  const toolItems = [t("toolOne"), t("toolTwo"), t("toolThree"), t("toolFour")];
  const focusItems = [t("focusOne"), t("focusTwo"), t("focusThree")];

  return (
    <>
      <PageHero
        locale={localeKey}
        badge={t("heroBadge")}
        title={t("heroTitle")}
        description={t("intro")}
      />

      <Container className="relative z-10 flex flex-col gap-8 pb-12 lg:pb-16">
        <MotionFade delay={0.05}>
          <section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-12">
            <div className="lg:col-span-9">
              <Badge
                variant="outline"
                className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
              >
                {t("storyEyebrow")}
              </Badge>

              <h2 className="mt-5 max-w-[11ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
                {t("storyTitle")}
              </h2>

              <div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(15rem,18rem)]">
                <div className="space-y-4">
                  <p className="text-sm leading-7 text-muted-foreground sm:text-base">
                    {t("storyTextOne")}
                  </p>
                  <p className="text-sm leading-7 text-muted-foreground sm:text-base">
                    {t("storyTextTwo")}
                  </p>
                </div>

                <div className="space-y-3">
                  {focusItems.map((item) => (
                    <div key={item} className="rounded-nested border border-border/70 bg-surface-2/70 px-4 py-4 text-sm font-medium leading-6 text-foreground/84">
                      {item}
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-8 flex flex-wrap gap-3">
                <Button asChild size="lg" className="min-w-[11rem]">
                  <Link href={getLocalizedPath(localeKey, "/contact")}>
                    {t("primaryCta")}
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
                <Button
                  asChild
                  size="lg"
                  variant="outline"
                  className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background"
                >
                  <Link href={getLocalizedPath(localeKey, "/portfolio")}>
                    {t("secondaryCta")}
                  </Link>
                </Button>
              </div>
            </div>

            <aside className="flex flex-col gap-5 lg:col-span-3">
              <div className="rounded-surface border border-border/70 bg-surface-2/65 p-5">
                <Badge
                  variant="outline"
                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                >
                  {t("snapshotEyebrow")}
                </Badge>
                <div className="mt-5 flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold text-foreground">{t("snapshotTitle")}</h3>
                    <p className="mt-2 text-sm leading-6 text-muted-foreground">{t("snapshotText")}</p>
                  </div>
                  <SiteLogo
                    alt={siteName}
                    priority
                    lightLogoUrl={mediaBindings.siteLogoLight?.url}
                    darkLogoUrl={mediaBindings.siteLogoDark?.url}
                    className="h-10 sm:h-11"
                  />
                </div>
              </div>

              <div className="rounded-surface border border-border/70 bg-background/40 p-5">
                <div className="flex items-start gap-3">
                  <MapPin className="mt-0.5 h-4 w-4 text-brand-primary" />
                  <div>
                    <p className="text-sm font-semibold text-foreground">{t("locationTitle")}</p>
                    <p className="mt-1 text-sm leading-6 text-muted-foreground">{t("locationText")}</p>
                  </div>
                </div>
              </div>
            </aside>
          </section>
        </MotionFade>

        <MotionFade delay={0.1}>
          <section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-10">
            <div className="lg:col-span-4">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <Badge
                    variant="outline"
                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                  >
                    {t("experienceEyebrow")}
                  </Badge>
                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
                    {t("experienceTitle")}
                  </h2>
                </div>
                <BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
              </div>

              <div className="mt-6 space-y-5">
                {workItems.map((item, index) => (
                  <div
                    key={`${item.period}-${item.role}`}
                    className={index === 0 ? "" : "border-t border-border/70 pt-5"}
                  >
                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/50">
                      {item.period}
                    </p>
                    <h3 className="mt-3 text-lg font-semibold text-foreground">{item.role}</h3>
                    <p className="mt-1 text-sm font-medium text-foreground/72">{item.company}</p>
                    <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
                  </div>
                ))}
              </div>
            </div>

            <div className="lg:col-span-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <Badge
                    variant="outline"
                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                  >
                    {t("educationEyebrow")}
                  </Badge>
                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
                    {t("educationTitle")}
                  </h2>
                  <p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
                    {t("educationIntro")}
                  </p>
                </div>
                <GraduationCap className="h-5 w-5 text-brand-primary" />
              </div>

              <div className="mt-6 grid gap-6 md:grid-cols-2">
                {educationItems.map((item) => (
                  <div key={item.title} className="rounded-surface border border-border/70 bg-surface-2/60 p-5">
                    <p className="text-sm font-semibold uppercase tracking-[0.16em] text-foreground/50">
                      {item.place}
                    </p>
                    <h3 className="mt-3 text-xl font-semibold text-foreground">{item.title}</h3>
                    <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
                  </div>
                ))}
              </div>
            </div>
          </section>
        </MotionFade>

        <MotionFade delay={0.15}>
          <section className="grid gap-8 lg:grid-cols-10">
            <div className="lg:col-span-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <Badge
                    variant="outline"
                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                  >
                    {t("skillsEyebrow")}
                  </Badge>
                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
                    {t("skillsTitle")}
                  </h2>
                  <p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
                    {t("skillsIntro")}
                  </p>
                </div>
                <Layers3 className="h-5 w-5 text-brand-primary" />
              </div>

              <div className="mt-6 flex flex-wrap gap-3">
                {skillItems.map((item) => (
                  <span
                    key={item}
                    className="inline-flex items-center rounded-pill border border-border/70 bg-surface-2/70 px-4 py-2 text-sm font-medium text-foreground/84"
                  >
                    {item}
                  </span>
                ))}
              </div>
            </div>

            <div className="lg:col-span-2">
              <div className="flex items-center justify-between gap-3">
                <Badge
                  variant="outline"
                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                >
                  {t("toolsEyebrow")}
                </Badge>
                <Wrench className="h-4 w-4 text-brand-primary" />
              </div>

              <div className="mt-5 space-y-3">
                {toolItems.map((item) => (
                  <div key={item} className="rounded-surface border border-border/70 bg-surface-2/60 px-4 py-3 text-sm font-medium text-foreground/84">
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div className="lg:col-span-2">
              <div className="flex items-center justify-between gap-3">
                <Badge
                  variant="outline"
                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                >
                  {t("focusEyebrow")}
                </Badge>
                <Sparkles className="h-4 w-4 text-brand-primary" />
              </div>

              <div className="mt-5 space-y-3">
                {focusItems.map((item) => (
                  <div key={item} className="rounded-surface border border-border/70 bg-background/40 px-4 py-4 text-sm leading-6 text-foreground/84">
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </section>
        </MotionFade>
      </Container>
    </>
  );
}