import type { Metadata } from "next";
import {
  ArrowRight,
  CalendarDays,
  CheckCircle2,
  Clock,
  DoorOpen,
  KeyRound,
  MapPin,
  ShieldCheck,
  Sparkles,
  Utensils,
  Waves,
  Wifi,
} from "lucide-react";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { notFound } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import {
  legalPages,
  publicPages,
  siteConfig,
  type PublicPageSlug,
} from "@/config/site";
import { publicPageContent } from "@/content/public-pages";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

type PublicPageProps = {
  params: Promise<{ locale: string; slug: string }>;
};

const slugs = [
  ...publicPages.map((page) => page.slug),
  ...legalPages,
] as PublicPageSlug[];

const verifiedAmenities = [
  { label: "Courtyard view", icon: Sparkles },
  { label: "Beach access", icon: Waves },
  { label: "Kitchen", icon: Utensils },
  { label: "Wi-Fi", icon: Wifi },
  { label: "Dedicated workspace", icon: DoorOpen },
];

function getPageAccents(slug: PublicPageSlug) {
  if (slug === "amenities") {
    return {
      signature: "Amenities",
      featureTitle: "Simple comforts, clearly listed.",
      featureBody:
        "The page shows only confirmed amenities for now: courtyard view, beach access, kitchen, Wi-Fi, and dedicated workspace.",
      facts: verifiedAmenities.map((amenity) => amenity.label),
    };
  }

  if (slug === "availability-booking") {
    return {
      signature: "Dates first",
      featureTitle: "A booking flow should feel calm before it becomes transactional.",
      featureBody:
        "The public surface starts with dates and guests. The heavier inventory checks stay behind the interface where they belong.",
      facts: [
        `Maximum ${siteConfig.maxGuests} guests`,
        `Check-in from ${siteConfig.checkIn}`,
        `Checkout before ${siteConfig.checkOut}`,
      ],
    };
  }

  if (slug === "gallery") {
    return {
      signature: "Real images only",
      featureTitle: "The image system is ready; the photography is the missing ingredient.",
      featureBody:
        "Until owner-approved photography is added, this page shows a crafted media frame instead of pretending generated images are real rooms.",
      facts: ["Owner-approved source", "Localized alt text", "Publication review"],
    };
  }

  if (slug === "location" || slug === "discover-paros") {
    return {
      signature: "Paros context",
      featureTitle: "Location content should be precise without exposing private details.",
      featureBody:
        "The page can feel evocative while still avoiding invented distances, beach promises, or exact address exposure before booking.",
      facts: ["Paros, Greece", "Exact location after booking", "Owner review required"],
    };
  }

  return {
    signature: "Owner review",
    featureTitle: "The structure is ready for final owner-approved content.",
    featureBody:
      "This page keeps claims restrained until policies, translations, and property details are confirmed.",
    facts: ["Verified facts only", "Bilingual content", "Ready for admin editing"],
  };
}

export function generateStaticParams() {
  return ["en", "el"].flatMap((locale) =>
    slugs.map((slug) => ({
      locale,
      slug,
    }))
  );
}

export async function generateMetadata({
  params,
}: PublicPageProps): Promise<Metadata> {
  const { locale, slug } = await params;
  const page = publicPageContent[slug as PublicPageSlug];

  if (!page) {
    return {};
  }

  return {
    title: page.title,
    description: page.description,
    alternates: {
      canonical: `/${locale}/${slug}`,
      languages: {
        en: `/en/${slug}`,
        el: `/el/${slug}`,
      },
    },
  };
}

export default async function PublicPage({ params }: PublicPageProps) {
  const { locale, slug } = await params;
  setRequestLocale(locale);

  const page = publicPageContent[slug as PublicPageSlug];

  if (!page) {
    notFound();
  }

  const t = await getTranslations("Shared");
  const accents = getPageAccents(slug as PublicPageSlug);
  const isAmenities = slug === "amenities";
  const isBooking = slug === "availability-booking";

  return (
    <article className="limestone-surface">
      <header className="mx-auto grid max-w-7xl items-center gap-12 px-4 py-12 sm:px-6 lg:grid-cols-[1fr_0.74fr] lg:px-8 lg:py-16">
        <div className="flex flex-col gap-10">
          <div className="flex flex-col gap-5">
            <Badge variant="outline" className="w-fit bg-background">
              {page.eyebrow}
            </Badge>
            <h1 className="max-w-3xl text-4xl font-semibold leading-[0.98] tracking-tight text-balance-pretty sm:text-5xl lg:text-6xl">
              {page.title}
            </h1>
            <p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
              {page.description}
            </p>
          </div>

          <div className="flex flex-wrap gap-2">
            {accents.facts.map((fact) => (
              <span
                key={fact}
                className="inline-flex items-center gap-2 rounded-full border bg-background px-3 py-1.5 text-sm text-muted-foreground"
              >
                <CheckCircle2 className="text-primary" />
                {fact}
              </span>
            ))}
          </div>

          <div className="flex flex-col gap-3 sm:flex-row">
            <Link
              href={isBooking ? "/availability-booking" : "/contact"}
              className={cn(buttonVariants({ size: "lg" }), "w-fit")}
            >
              {isBooking ? t("bookingAction") : t("askOwner")}
              <ArrowRight data-icon="inline-end" />
            </Link>
          </div>
        </div>

        <div className="relative min-h-[360px] overflow-hidden border bg-card lg:min-h-[460px]">
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{
              backgroundImage:
                "url('/media/generated/minimal-paros-light-api.webp')",
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-background/78" />
          <div className="absolute bottom-6 left-6 right-6 grid gap-4 border bg-background/92 p-5 backdrop-blur">
            <p className="text-xs font-medium uppercase tracking-[0.18em] text-primary">
              {accents.signature}
            </p>
            <h2 className="text-3xl font-semibold leading-tight tracking-tight">
              {accents.featureTitle}
            </h2>
            <p className="text-sm leading-6 text-muted-foreground">
              {accents.featureBody}
            </p>
          </div>
        </div>
      </header>

      <Separator />

      {isAmenities && (
        <section className="bg-card">
          <div className="mx-auto grid max-w-7xl gap-px border-x bg-border px-0 sm:grid-cols-2 lg:grid-cols-5">
            {verifiedAmenities.map((amenity) => {
              const Icon = amenity.icon;

              return (
                <div
                  key={amenity.label}
                  className="flex min-h-36 flex-col justify-between gap-5 bg-background p-5"
                >
                  <Icon className="text-primary" />
                  <p className="text-2xl font-semibold leading-tight tracking-tight">
                    {amenity.label}
                  </p>
                </div>
              );
            })}
          </div>
        </section>
      )}

      {isBooking && (
        <section className="bg-card">
          <div className="mx-auto grid max-w-7xl gap-px border-x bg-border px-0 lg:grid-cols-3">
            {[
              { label: "Dates", value: "Select check-in and checkout", icon: CalendarDays },
              { label: "Guests", value: `Up to ${siteConfig.maxGuests} guests`, icon: KeyRound },
              { label: "Review", value: "Owner confirmation before final approval", icon: ShieldCheck },
            ].map((item) => {
              const Icon = item.icon;

              return (
                <div
                  key={item.label}
                  className="flex min-h-40 flex-col justify-between gap-6 bg-background p-6"
                >
                  <Icon className="text-primary" />
                  <div className="flex flex-col gap-1">
                    <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
                      {item.label}
                    </p>
                    <p className="text-2xl font-semibold tracking-tight">
                      {item.value}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </section>
      )}

      <div className="mx-auto grid max-w-7xl gap-12 px-4 py-16 sm:px-6 lg:grid-cols-[0.42fr_1fr] lg:px-8">
        <aside className="flex flex-col gap-5 lg:sticky lg:top-28 lg:self-start">
          <p className="text-3xl font-semibold tracking-tight">
            {t("pageNotesTitle")}
          </p>
          <p className="text-sm leading-6 text-muted-foreground">
            {t("ownerReview")}
          </p>
          <div className="grid gap-3 text-sm text-muted-foreground">
            <span className="inline-flex items-center gap-2">
              <MapPin className="text-primary" />
              Paros, Greece
            </span>
            <span className="inline-flex items-center gap-2">
              <Clock className="text-primary" />
              {siteConfig.checkIn} / {siteConfig.checkOut}
            </span>
          </div>
        </aside>

        <div className="grid gap-4">
          {page.sections.map((section) => (
            <section
              key={section.title}
              className="grid gap-5 border-b py-7 md:grid-cols-[0.34fr_1fr]"
            >
              <h2 className="text-3xl font-semibold leading-tight tracking-tight">
                {section.title}
              </h2>
              <p className="text-base leading-8 text-muted-foreground">
                {section.body}
              </p>
            </section>
          ))}

          <div className="flex flex-col gap-4 bg-primary p-6 text-primary-foreground sm:flex-row sm:items-center sm:justify-between">
            <p className="max-w-2xl text-2xl font-semibold leading-tight tracking-tight">
              {t("quietCta")}
            </p>
            <Link
              href="/availability-booking"
              className={cn(buttonVariants({ variant: "secondary", size: "lg" }), "w-fit")}
            >
              {t("bookingAction")}
              <ArrowRight data-icon="inline-end" />
            </Link>
          </div>
        </div>
      </div>
    </article>
  );
}