import { getTranslations } from "next-intl/server";
import Link from "next/link";
import Image from "next/image";
import { auth } from "@/lib/auth";
import { cached } from "@/lib/cache";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export async function SiteHeader() {
  const t = await getTranslations("header");
  const [_session, hotelName, header, logo] = await Promise.all([
    auth(),
    siteSettings.get("hotel_name", "Atom"),
    siteSettings.get("cms_header", "/assets/images/background.png"),
    siteSettings.get("cms_logo", ""),
  ]);

  let online: number;
  try {
    online = await cached("online_count", 10_000, () => prisma.user.count({ where: { online: "1" } }));
  } catch {
    online = 0;
  }

  const bannerUrl =
    header && header !== "/assets/images/background.png" ? header : "/assets/images/banner.png";

  return (
    <div
      className="site-header relative w-full overflow-hidden"
      style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}
    >
      {/* Background image */}
      <div className="absolute inset-0" style={{ background: `url(${bannerUrl}) center/cover no-repeat` }} />

      {/* Gradient overlays */}
      <div
        className="absolute inset-0"
        style={{
          background:
            "linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.7) 100%)",
        }}
      />

      {/* Subtle dot pattern */}
      <div
        className="absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage: "radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
          backgroundSize: "20px 20px",
        }}
      />

      {/* Decorative glows */}
      <div
        className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]"
        style={{ background: "var(--color-primary)" }}
      />
      <div
        className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]"
        style={{ background: "var(--color-primary)" }}
      />

      {/* Content */}
      <div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]">
        <Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
          {logo ? (
            <Image
              className="drop-shadow-2xl block"
              src={logo}
              alt={hotelName ?? "Hotel"}
              width={200}
              height={120}
              style={{ maxHeight: 120, width: "auto", height: "auto" }}
              unoptimized
            />
          ) : (
            <h1
              className="text-center font-extrabold tracking-tight leading-none text-white"
              style={{
                fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
                textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
                letterSpacing: "-0.02em",
              }}
            >
              {hotelName} - Hotel
            </h1>
          )}
        </Link>

        {/* Online badge */}
        <div
          className="flex items-center gap-3 px-6 py-3 rounded-full"
          style={{
            background: "rgba(255,255,255,0.08)",
            backdropFilter: "blur(16px)",
            WebkitBackdropFilter: "blur(16px)",
            border: "1px solid rgba(255,255,255,0.10)",
            boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
          }}
        >
          <span className="relative flex h-2.5 w-2.5">
            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
            <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
          </span>
          <span className="text-sm font-bold tracking-wide" style={{ color: "rgba(255,255,255,0.9)" }}>
            {t("online", { count: online, hotel: hotelName ?? "Atom" })}
          </span>
        </div>
      </div>
    </div>
  );
}