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

import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { buildLocalizedMetadata } from "@/lib/metadata";
import { getLocalizedPath, resolveLocale } from "@/lib/locale";
import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

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 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 = await getTranslations({ locale: localeKey, namespace: "contactPage" });

  return (
    <Container className="grid gap-6 py-10 lg:grid-cols-2 lg:py-14">
      <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">
            <form className="grid gap-4">
              <Label className="grid gap-2">
                {t("name")}
                <Input type="text" placeholder={t("name")} />
              </Label>

              <Label className="grid gap-2">
                {t("email")}
                <Input type="email" placeholder={t("email")} />
              </Label>

              <Label className="grid gap-2">
                {t("message")}
                <Textarea rows={5} placeholder={t("message")} />
              </Label>

              <div className="flex flex-wrap gap-3">
                <Button type="button">{t("submit")}</Button>
                <Button asChild variant="outline">
                  <Link href={getLocalizedPath(localeKey, "/success")}>{t("preview")}</Link>
                </Button>
              </div>
            </form>
          </CardContent>
        </AppCard>
      </MotionFade>
    </Container>
  );
}