import type { Metadata } from "next";
import { Sparkles } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { getTranslations } from "next-intl/server";

import { Container } from "@/components/layout/container";
import { MotionFade } from "@/components/motion-fade";
import { ThemeToggle } from "@/components/theme-toggle";
import { getSiteSettings } from "@/lib/app-config";
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 } from "@/components/ui/card";

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

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

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

export default async function ComingSoonPage({
  params: { locale },
}: ComingSoonPageProps) {
  const localeKey = resolveLocale(locale);
  const localeOptions = ["de", "en", "ar"] as const;
  const t = await getTranslations({ locale: localeKey, namespace: "comingSoon" });
  const tNav = await getTranslations({ locale: localeKey, namespace: "navigation" });

  return (
    <div className="relative min-h-screen overflow-hidden bg-background">
      <div className="surface-grid absolute inset-0 opacity-30" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,hsl(var(--brand-primary)/0.18),transparent_42%),radial-gradient(circle_at_bottom_right,hsl(var(--brand-secondary)/0.14),transparent_36%)]" />

      <Container className="relative flex min-h-screen items-center py-14">
        <MotionFade className="w-full">
          <AppCard
            level={3}
            className="brand-glow mx-auto max-w-4xl overflow-hidden border-border/70"
          >
            <CardContent className="relative p-7 text-center sm:p-10 lg:p-14">
              <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-brand-secondary/15 blur-3xl" />
              <div className="pointer-events-none absolute -bottom-24 -left-16 h-72 w-72 rounded-full bg-brand-primary/15 blur-3xl" />

              <div className="relative">
                <div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-surface border border-border bg-surface-1 px-2 py-2 shadow-sm">
                  <ThemeToggle ariaLabel={tNav("themeToggle")} />
                  <div className="flex items-center gap-2">
                    {localeOptions.map((targetLocale) => (
                      <Button
                        key={targetLocale}
                        asChild
                        type="button"
                        variant={targetLocale === localeKey ? "secondary" : "outline"}
                        size="sm"
                      >
                        <Link
                          href={getLocalizedPath(targetLocale, "/coming-soon")}
                          aria-label={targetLocale.toUpperCase()}
                        >
                          {targetLocale.toUpperCase()}
                        </Link>
                      </Button>
                    ))}
                  </div>
                </div>

                <p className="inline-flex items-center gap-2 rounded-pill border border-border bg-surface-1 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-foreground/80">
                  <Sparkles className="h-3.5 w-3.5 text-brand-secondary" />
                  {t("badge")}
                </p>

                <div className="mt-7 flex items-center justify-center">
                  <Image
                    src="/logos/light-primary.svg"
                    alt="mohfarawati"
                    width={190}
                    height={44}
                    className="block h-auto w-[150px] dark:hidden sm:w-[190px]"
                    priority
                  />
                  <Image
                    src="/logos/dark-primary.svg"
                    alt="mohfarawati"
                    width={190}
                    height={44}
                    className="hidden h-auto w-[150px] dark:block sm:w-[190px]"
                    priority
                  />
                </div>

                <h1 className="text-balance mx-auto mt-7 max-w-3xl text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
                  {t("titleStart")}{" "}
                  <span className="brand-gradient-text">{t("titleAccent")}</span>{" "}
                  {t("titleEnd")}
                </h1>

                <p className="mx-auto mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
                  {t("description")}
                </p>

                <p className="mx-auto mt-6 max-w-2xl text-sm text-foreground/72 sm:text-base">
                  {t("note")}
                </p>
              </div>
            </CardContent>
          </AppCard>
        </MotionFade>
      </Container>
    </div>
  );
}