import type { Metadata } from "next";
import {
  ArrowRight,
  BriefcaseBusiness,
  Boxes,
  Mail,
} from "lucide-react";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { HomeHero } from "@/components/layout/home-hero";
import { MotionFade } from "@/components/motion-fade";
import { getSiteSettings } from "@/lib/app-config";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import {
  getLocalizedValue,
  getPublishedPortfolioProjects,
} from "@/lib/portfolio";
import { pickText, productItems } from "@/lib/site-data";

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

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params: { locale },
}: HomePageProps): Promise<Metadata> {
  const localeKey = resolveLocale(locale);
  const [t, siteSettings] = await Promise.all([
    getTranslations({ locale: localeKey, namespace: "homepage" }),
    getSiteSettings(),
  ]);

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/",
    title: siteSettings.locales[localeKey].siteName,
    description: t("heroText"),
    applyTitleTemplate: false,
  });
}

export default async function HomePage({ params: { locale } }: HomePageProps) {
  const localeKey = resolveLocale(locale);
  const featuredProjects = (await getPublishedPortfolioProjects()).slice(0, 3);
  const featuredProducts = productItems.slice(0, 3);
  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });

  return (
    <>
      <HomeHero
        locale={localeKey}
        kicker={t("heroKicker")}
        title={t("heroTitle")}
        description={t("heroText")}
        portfolioLabel={t("toPortfolio")}
        contactLabel={t("toContact")}
      />

      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
        <MotionFade delay={0.05}>
        <AppCard>
          <CardContent className="p-6 lg:p-8">
            <div className="mb-6 flex items-center justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold text-foreground">
                  {t("portfolioTitle")}
                </h2>
                <p className="mt-2 text-sm text-muted-foreground">
                  {t("portfolioText")}
                </p>
              </div>
              <BriefcaseBusiness className="h-5 w-5 text-muted-foreground" />
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              {featuredProjects.map((item) => (
                <AppCard key={item.slug} interactive>
                  <CardContent className="p-5">
                    <Link
                      href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
                      className="group block"
                    >
                      <p className="text-sm text-muted-foreground/80">
                        {getLocalizedValue(item.category.name, localeKey)} - {item.projectYear}
                      </p>
                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                        {getLocalizedValue(item.title, localeKey)}
                      </h3>
                      <p className="mt-2 text-sm text-muted-foreground">
                        {getLocalizedValue(item.summary, localeKey)}
                      </p>
                      <span className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
                        {t("toPortfolio")}
                        <ArrowRight className="h-4 w-4" />
                      </span>
                    </Link>
                  </CardContent>
                </AppCard>
              ))}
            </div>
          </CardContent>
        </AppCard>
        </MotionFade>

        <MotionFade delay={0.1}>
        <AppCard>
          <CardContent className="p-6 lg:p-8">
            <div className="mb-6 flex items-center justify-between gap-4">
              <div>
                <h2 className="text-2xl font-semibold text-foreground">
                  {t("productsTitle")}
                </h2>
                <p className="mt-2 text-sm text-muted-foreground">
                  {t("productsText")}
                </p>
              </div>
              <Boxes className="h-5 w-5 text-muted-foreground" />
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              {featuredProducts.map((item) => (
                <AppCard key={item.slug} interactive>
                  <CardContent className="p-5">
                    <Link
                      href={getLocalizedPath(localeKey, `/products/${item.slug}`)}
                      className="group block"
                    >
                      <p className="text-sm text-muted-foreground/80">
                        {pickText(item.segment, localeKey)}
                      </p>
                      <h3 className="mt-2 text-lg font-semibold text-foreground">
                        {pickText(item.name, localeKey)}
                      </h3>
                      <p className="mt-2 text-sm text-muted-foreground">
                        {pickText(item.summary, localeKey)}
                      </p>
                      <p className="mt-3 text-sm font-medium text-foreground/80">
                        {pickText(item.price, localeKey)}
                      </p>
                    </Link>
                  </CardContent>
                </AppCard>
              ))}
            </div>
          </CardContent>
        </AppCard>
        </MotionFade>

        <MotionFade delay={0.15}>
        <AppCard level="inverse">
          <CardContent className="p-6 lg:p-8">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
              <div>
                <p className="inline-flex items-center gap-2 text-sm font-medium text-primary-foreground/80">
                  <Mail className="h-4 w-4" />
                  {t("ctaTitle")}
                </p>
                <p className="mt-2 max-w-2xl text-sm text-primary-foreground/88 sm:text-base">
                  {t("ctaText")}
                </p>
              </div>
              <Button asChild variant="secondary">
                <Link href={getLocalizedPath(localeKey, "/contact")}>
                  {t("toContact")}
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </CardContent>
        </AppCard>
        </MotionFade>
      </Container>
    </>
  );
}