import type { Metadata } from "next";
import { ArrowLeft, CalendarDays, FolderKanban, Tag } from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";

import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { routing } from "@/i18n/routing";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { getPortfolioItem, pickText, portfolioItems } from "@/lib/site-data";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";

type PortfolioItemPageProps = {
  params: {
    locale: string;
    slug: string;
  };
};

export function generateStaticParams() {
  return routing.locales.flatMap((locale) =>
    portfolioItems.map((item) => ({
      locale,
      slug: item.slug,
    })),
  );
}

export async function generateMetadata({
  params: { locale, slug },
}: PortfolioItemPageProps): Promise<Metadata> {
  const localeKey = resolveLocale(locale);
  const item = getPortfolioItem(slug);

  if (!item) {
    return buildLocalizedMetadata({
      locale: localeKey,
      pathname: `/portfolio/${slug}`,
      title: "Portfolio",
      description: "Portfolio item",
    });
  }

  return buildLocalizedMetadata({
    locale: localeKey,
    pathname: `/portfolio/${slug}`,
    title: pickText(item.title, localeKey),
    description: pickText(item.summary, localeKey),
  });
}

export default async function PortfolioItemPage({
  params: { locale, slug },
}: PortfolioItemPageProps) {
  const localeKey = resolveLocale(locale);
  const item = getPortfolioItem(slug);

  if (!item) {
    notFound();
  }

  const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });

  return (
    <Container size="wide" className="flex flex-col gap-section py-10 lg:py-14">
      <MotionFade>
        <AppCard level={3}>
          <CardContent className="p-6 lg:p-10">
            <Button asChild variant="ghost" className="h-auto px-0 py-0 text-sm">
              <Link href={getLocalizedPath(localeKey, "/portfolio")}>
                <ArrowLeft className="h-4 w-4" />
                {t("back")}
              </Link>
            </Button>

            <h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl">
              {pickText(item.title, localeKey)}
            </h1>
            <p className="mt-4 text-base text-muted-foreground sm:text-lg">
              {pickText(item.summary, localeKey)}
            </p>

            <div className="mt-6 flex flex-wrap gap-3 text-sm text-foreground/80">
              {[
                {
                  icon: Tag,
                  label: pickText(item.category, localeKey),
                },
                {
                  icon: CalendarDays,
                  label: item.year,
                },
                {
                  icon: FolderKanban,
                  label: item.slug,
                },
              ].map((meta) => {
                const Icon = meta.icon;

                return (
                  <AppCard key={meta.label} level={2}>
                    <CardContent className="flex items-center gap-2 p-3">
                      <Icon className="h-4 w-4 text-brand-primary" />
                      {meta.label}
                    </CardContent>
                  </AppCard>
                );
              })}
            </div>
          </CardContent>
        </AppCard>
      </MotionFade>

      <div className="grid gap-4 md:grid-cols-3">
        {[
          {
            title: t("challenge"),
            text: t("challengeText"),
          },
          {
            title: t("solution"),
            text: t("solutionText"),
          },
          {
            title: t("outcome"),
            text: t("outcomeText"),
          },
        ].map((section, index) => (
          <MotionFade key={section.title} delay={0.05 * (index + 1)}>
            <AppCard>
              <CardContent className="p-5">
                <h2 className="text-lg font-semibold text-foreground">{section.title}</h2>
                <p className="mt-2 text-sm text-muted-foreground">{section.text}</p>
              </CardContent>
            </AppCard>
          </MotionFade>
        ))}
      </div>
    </Container>
  );
}