import type { Metadata } from "next";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { connectDB } from "@/lib/db";
import { Service } from "@/models/Service";
import { Link } from "@/i18n/navigation";
import { ScrollReveal } from "@/components/ScrollReveal";
import { PageHeaderBanner } from "@/components/PageHeaderBanner";
import { VacationNotice } from "@/components/VacationNotice";
import { AvailabilityCalendar } from "@/components/AvailabilityCalendar";
import { buildPageMetadata } from "@/lib/seo";
import { getSettings } from "@/lib/settings";
import { getNextAvailableDate } from "@/lib/availability";
import { Testimonial } from "@/models/Testimonial";
import { QuickReview } from "@/models/QuickReview";
import { CombinedReviewsBadge } from "@/components/ReviewsWidget";

export const dynamic = "force-dynamic";

// Etwas breiter als die 1120er-Portfolio-Spalte: die Angebote-Seite hat
// pro Kategorie 3 Preiskarten nebeneinander, die bei 1120 zu eng wurden
// (Till: "die großen segmente sehen gequetscht aus"). Weiterhin fest, kein vw.
const COL = "mx-auto w-full max-w-[1220px] px-5 sm:px-8";

const fmt = (n: number) =>
  new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n);

function isPromoActive(tier: { promoPrice?: number | null; promoFrom?: Date | null; promoUntil?: Date | null }): boolean {
  if (tier.promoPrice === null || tier.promoPrice === undefined) return false;
  const now = new Date();
  if (tier.promoFrom && now < new Date(tier.promoFrom)) return false;
  if (tier.promoUntil) {
    // promoUntil kommt aus <input type="date"> (UTC-Mitternacht) — ein voller
    // Tag Puffer deckt den ganzen deutschen Kalendertag ab.
    const cutoff = new Date(new Date(tier.promoUntil).getTime() + 24 * 60 * 60 * 1000);
    if (now >= cutoff) return false;
  }
  return true;
}

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "services" });
  return buildPageMetadata({ locale, path: "/angebote", title: t("title"), description: t("subtitle") });
}

export default async function ServicesPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "services" });

  await connectDB();
  const [services, settings, testimonialDocs, quickReviewDocs] = await Promise.all([
    Service.find({}).sort({ sortOrder: 1 }).lean(),
    getSettings(),
    Testimonial.find({ visible: true }).select("rating").lean(),
    QuickReview.find({ visible: true }).select("rating").lean(),
  ]);
  const minLeadTimeWeeks = settings.bookingSettings.minLeadTimeWeeks;
  const nextAvailable = await getNextAvailableDate(minLeadTimeWeeks);

  return (
    // Opake --rk-bg-Fläche blockt den weißen Radial-Schimmer des body-Hintergrunds.
    // Header/Nav: geteilte Behandlung — siehe reference/subpage-header-spec.
    <main className="min-h-screen bg-[var(--rk-bg)] pb-24">
      <PageHeaderBanner
        image="/img/featured-1.jpg"
        eyebrow={t("eyebrow")}
        title={t("title")}
        subtitle={t("subtitle")}
        focalPoint="48% 15%"
        tall
      />

      {/* Bewertungs-Badge + nächster freier Termin — direkt am Banner (kein
          dunkler "Balken" dazwischen, -mt-8 hebt das mb-8 des Banners auf) */}
      <section className="-mt-8">
        <div className={`${COL} flex flex-col items-center gap-7 pt-14 sm:pt-20`}>
          <CombinedReviewsBadge
            testimonials={testimonialDocs}
            quickReviews={quickReviewDocs}
            label={t("reviewsLabel")}
            countLabel={t("reviewsCountLabel")}
          />
          <VacationNotice locale={locale} />
          <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[var(--rk-surface)] px-6 py-6 text-center">
            <p className="text-xs uppercase tracking-[0.25em] text-[var(--rk-ink-muted)]">{t("nextAvailableLabel")}</p>
            {nextAvailable ? (
              <p className="rk-wordmark mt-2 whitespace-nowrap text-lg sm:text-xl">
                {nextAvailable.toLocaleDateString(locale === "en" ? "en-GB" : "de-DE", {
                  day: "2-digit",
                  month: "long",
                  year: "numeric",
                })}
              </p>
            ) : (
              <p className="mt-1.5 text-sm">{t("nextAvailableUnknown")}</p>
            )}
            {minLeadTimeWeeks > 0 && (
              <p className="mt-2 text-xs leading-relaxed text-[var(--rk-ink-muted)]">
                {t("nextAvailableNote", { weeks: minLeadTimeWeeks })}
              </p>
            )}
          </div>
        </div>
      </section>

      {/* 4 Kategorien, je 3 Preisstufen — mittlere Stufe "Empfohlen" */}
      <div className={`${COL} mt-20 space-y-24 sm:mt-28`}>
        {services.map((s, i) => {
          const title = (locale === "en" && s.titleEn) || s.title;
          const description = (locale === "en" && s.descriptionEn) || s.description;
          const orderable = s.status !== "unavailable";
          const tiers = s.tiers.filter((tier) => tier.active).sort((a, b) => a.sortOrder - b.sortOrder);
          const recommendedIdx = tiers.length === 3 ? 1 : -1;

          return (
            <ScrollReveal key={String(s._id)} delayMs={(i % 3) * 80}>
              <div>
                <div className="flex flex-wrap items-center gap-3">
                  <h2 className="rk-wordmark text-xl sm:text-2xl">{title}</h2>
                  <StatusBadge status={s.status} t={t} />
                </div>
                {description && <p className="mt-3 max-w-xl text-sm text-[var(--rk-ink-muted)]">{description}</p>}

                {tiers.length > 0 ? (
                  <div className="mt-9 grid gap-5 sm:grid-cols-3">
                    {tiers.map((tier, ti) => {
                      const tierName = (locale === "en" && tier.nameEn) || tier.name;
                      const deliverables = (locale === "en" && tier.deliverablesEn) || tier.deliverables;
                      const items = String(deliverables || "")
                        .split(/\s*·\s*/)
                        .map((x) => x.trim())
                        .filter(Boolean);
                      const promoActive = isPromoActive(tier);
                      const recommended = ti === recommendedIdx;
                      return (
                        // Alle drei Karten mit identischem p-7, damit Stufenname
                        // und Preis über die Reihe auf einer Linie liegen. Das
                        // "Empfohlen"-Badge (-top-3) hat bei 28px Innenabstand
                        // genug Luft zum Stufennamen.
                        <div
                          key={String(tier._id)}
                          className={`relative flex flex-col rounded-xl border p-7 ${
                            recommended
                              ? "border-[var(--rk-accent)] bg-[var(--rk-accent)]/[0.05]"
                              : "border-white/10 bg-[var(--rk-surface)]"
                          }`}
                        >
                          {recommended && (
                            <span className="absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[var(--rk-accent)] px-3.5 py-1 text-[0.6rem] font-semibold uppercase tracking-[0.14em] text-[#141413]">
                              {t("recommendedLabel")}
                            </span>
                          )}
                          <p className="text-xs uppercase tracking-[0.16em] text-[var(--rk-ink-muted)]">{tierName}</p>
                          <p className="mt-3 flex items-baseline gap-2">
                            {tier.priceFrom && (
                              <span className="text-xs text-[var(--rk-ink-muted)]">{t("priceFromLabel")}</span>
                            )}
                            {promoActive ? (
                              <>
                                <span className="rk-wordmark text-[1.7rem] ![letter-spacing:0.04em] text-[var(--rk-accent)]">
                                  {fmt(tier.promoPrice as number)}
                                </span>
                                <span className="text-sm text-[var(--rk-ink-muted)] line-through">{fmt(tier.price)}</span>
                              </>
                            ) : (
                              <span className="rk-wordmark text-[1.7rem] ![letter-spacing:0.04em]">{fmt(tier.price)}</span>
                            )}
                          </p>
                          {items.length > 0 && (
                            <ul className="mt-5 flex-1 space-y-2 text-sm leading-relaxed text-[var(--rk-ink-muted)]">
                              {items.map((it, ii) => (
                                <li key={ii} className="flex gap-2.5">
                                  <span className="mt-[7px] h-1 w-1 shrink-0 rounded-full bg-[var(--rk-accent)]/70" />
                                  <span>{it}</span>
                                </li>
                              ))}
                            </ul>
                          )}
                          {(tier.addOns || []).length > 0 && (
                            <ul className="mt-3 flex flex-col gap-1 text-xs text-[var(--rk-ink-muted)]">
                              {tier.addOns.map(
                                (addOn: { label: string; labelEn: string; priceSurcharge: number }, ai: number) => (
                                  <li key={ai}>
                                    + {(locale === "en" && addOn.labelEn) || addOn.label} ({fmt(addOn.priceSurcharge)})
                                  </li>
                                )
                              )}
                            </ul>
                          )}
                          {orderable && (
                            <Link
                              href={`/account/new-order?shootingType=${encodeURIComponent(
                                s.shootingType
                              )}&concept=${encodeURIComponent(`${title} — ${tierName}`)}&serviceId=${s._id}&tierId=${
                                tier._id
                              }`}
                              className={`mt-7 inline-block rounded-lg px-4 py-3 text-center text-xs uppercase tracking-[0.2em] transition-colors ${
                                recommended
                                  ? "bg-[var(--rk-accent)] font-semibold text-[#141413] hover:opacity-90"
                                  : "border border-white/25 hover:border-white hover:bg-white/5"
                              }`}
                            >
                              {s.status === "on_request" ? t("requestButton") : t("bookButton")}
                            </Link>
                          )}
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  <p className="mt-4 text-sm text-[var(--rk-ink-muted)]">{t("noTiers")}</p>
                )}
              </div>
            </ScrollReveal>
          );
        })}
        {services.length === 0 && (
          <p className="text-center text-sm text-[var(--rk-ink-muted)]">{t("none")}</p>
        )}
      </div>

      {/* Verfügbarkeits-Kalender — die Überschrift ("Verfügbarkeit") und der
          Hinweis ("Nur zur groben Orientierung …") kommen aus der Komponente
          selbst, daher hier NICHT doppeln. */}
      <div className="mt-24">
        <AvailabilityCalendar locale={locale} />
      </div>

      {/* Nichts Passendes dabei? — zweispaltig, diagonaler Einschnitt links */}
      <section className={`${COL} mt-24`}>
        <ScrollReveal>
          <div className="grid overflow-hidden rounded-2xl border border-white/10 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.55)] sm:grid-cols-2">
            <div className="relative flex flex-col justify-center gap-4 bg-[var(--rk-surface)] p-8 sm:p-10 sm:[clip-path:polygon(0_0,100%_0,calc(100%-2.25rem)_100%,0_100%)]">
              <Image
                src="/img/featured-1.jpg"
                alt=""
                fill
                sizes="560px"
                className="object-cover opacity-[0.06]"
              />
              <div className="relative">
                <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{t("customEyebrow")}</p>
                <h2 className="rk-wordmark mt-3 text-2xl sm:text-3xl">{t("customTitle")}</h2>
                <p className="mt-4 max-w-sm text-sm leading-relaxed text-[var(--rk-ink-muted)]">{t("customText")}</p>
                <Link
                  href="/account/new-order"
                  className="mt-6 inline-block rounded-lg bg-[var(--rk-accent)] px-6 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-[#141413] transition-opacity hover:opacity-90"
                >
                  {t("customLink")}
                </Link>
              </div>
            </div>
            <div className="relative min-h-[220px] sm:min-h-full">
              <Image src="/img/hero.jpg" alt="" fill sizes="560px" className="object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent" />
              <div className="absolute bottom-6 left-6">
                <p className="text-[0.65rem] uppercase tracking-[0.2em] text-[var(--rk-accent)]">{t("customImageEyebrow")}</p>
                <p className="rk-wordmark mt-1 text-lg drop-shadow-[0_2px_10px_rgba(0,0,0,0.8)]">{t("customImageLabel")}</p>
              </div>
            </div>
          </div>
        </ScrollReveal>
      </section>

      {/* Ablauf / Shooting-Info — 4 Schritte, auf abgesetzter Fläche */}
      <Process />
    </main>
  );
}

// Nutzt weiterhin den "home"-Namespace (Texte unverändert; Namespaces sind
// nicht an eine Seite gebunden).
function Process() {
  const t = useTranslations("home");
  const steps = ["one", "two", "three", "four"] as const;

  return (
    <section className="rk-surface-band rk-grain mt-24 py-24 sm:py-28">
      <div className={`${COL} text-center`}>
        <ScrollReveal>
          <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">{t("processEyebrow")}</p>
          <h2 className="rk-wordmark mt-3 text-2xl sm:text-3xl">{t("processTitle")}</h2>
          <div className="rk-accent-rule rk-accent-rule--center" />
          <p className="mx-auto mt-4 max-w-md text-sm text-[var(--rk-ink-muted)]">{t("processText")}</p>
        </ScrollReveal>

        <div className="mt-14 grid gap-10 text-left sm:grid-cols-2 lg:grid-cols-4">
          {steps.map((step, i) => (
            <ScrollReveal key={step} delayMs={i * 100}>
              <div>
                <p className="rk-wordmark text-3xl text-[var(--rk-accent)]/70">{String(i + 1).padStart(2, "0")}</p>
                <h3 className="mt-3 text-sm uppercase tracking-[0.15em]">{t(`process.${step}.title`)}</h3>
                <p className="mt-2 text-sm leading-relaxed text-[var(--rk-ink-muted)]">{t(`process.${step}.text`)}</p>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatusBadge({ status, t }: { status: string; t: (key: string) => string }) {
  if (status === "available") return null;
  const styles: Record<string, string> = {
    on_request: "border-[var(--rk-accent)]/40 text-[var(--rk-accent)]",
    unavailable: "border-white/15 text-[var(--rk-ink-muted)]",
  };
  return (
    <span className={`rounded-full border px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.08em] ${styles[status]}`}>
      {t(`status.${status}`)}
    </span>
  );
}