import type { Metadata } from "next";
import { Mail, MapPin, Phone } from "lucide-react";
import { getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { PageHero } from "@/components/layout/page-hero";
import { MotionFade } from "@/components/motion-fade";
import { ContactForm } from "@/components/site/contact-form";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getPublicContactProtectionSettings } from "@/lib/app-config";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { AppCard } from "@/components/ui/app-card";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import { submitContactFormAction } from "./actions";

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

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

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

export default async function ContactPage({ params: { locale } }: ContactPageProps) {
  const localeKey = resolveLocale(locale);
  const [t, protection] = await Promise.all([
    getTranslations({ locale: localeKey, namespace: "contactPage" }),
    getPublicContactProtectionSettings(),
  ]);

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

      <Container className="grid gap-6 pb-12 lg:grid-cols-2 lg:pb-16">
        <MotionFade>
        <AppCard level={3}>
          <CardHeader>
            <CardTitle className="text-3xl sm:text-4xl">{t("title")}</CardTitle>
            <p className="text-base text-muted-foreground sm:text-lg">{t("intro")}</p>
          </CardHeader>
          <CardContent>
            <ul className="space-y-3 text-sm text-foreground/85">
              <li className="inline-flex items-center gap-2">
                <Phone className="h-4 w-4 text-brand-primary" />
                +49 30 123456
              </li>
              <li className="inline-flex items-center gap-2">
                <Mail className="h-4 w-4 text-brand-primary" />
                hello@moh-sass.dev
              </li>
              <li className="inline-flex items-center gap-2">
                <MapPin className="h-4 w-4 text-brand-primary" />
                {t("city")}
              </li>
            </ul>
          </CardContent>
        </AppCard>
        </MotionFade>

        <MotionFade delay={0.05}>
        <AppCard>
          <CardContent className="pt-6">
            <ContactForm
              action={submitContactFormAction}
              locale={localeKey}
              previewHref={getLocalizedPath(localeKey, "/success")}
              protection={protection}
              copy={{
                name: t("name"),
                email: t("email"),
                phone: t("phone"),
                company: t("company"),
                message: t("message"),
                note: t("note"),
                submit: t("submit"),
                preview: t("preview"),
              }}
            />
          </CardContent>
        </AppCard>
        </MotionFade>
      </Container>
    </>
  );
}