"use client";

import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";

import { Navigation } from "@/components/navigation";
import { ThemeToggle } from "@/components/theme-toggle";
import { apiFetch } from "@/lib/api";
import { VenueBookingSettings } from "@/lib/types";

const DEFAULT_VENUE_NAME = "Locale attivo";
const OPERATIONS_TITLE = "Operativita di sala";

export function SiteFrame({ children }: { children: React.ReactNode }) {
  const [venueName, setVenueName] = useState(DEFAULT_VENUE_NAME);
  const pathname = usePathname();
  const normalizedPathname = (pathname || "").replace(/\/+$/, "") || "/";
  const modulePath = normalizedPathname.startsWith("/prenotazioni")
    ? normalizedPathname.slice("/prenotazioni".length) || "/"
    : normalizedPathname;
  const isCompactHeroRoute =
    modulePath === "/" || modulePath === "/reservations";
  const isCenteredHeroRoute = modulePath === "/floor-plan";
  const isDesktopSidebarRoute = modulePath === "/reservations";

  useEffect(() => {
    let mounted = true;

    async function loadVenueName() {
      try {
        const settings = await apiFetch<VenueBookingSettings>("/booking-settings");
        const nextVenueName = settings.venue_name.trim();
        if (mounted && nextVenueName) {
          setVenueName(nextVenueName);
        }
      } catch {
        // Keep the neutral fallback when the module is opened standalone or before setup.
      }
    }

    void loadVenueName();

    return () => {
      mounted = false;
    };
  }, []);

  return (
    <div className="site-frame">
      <div className="site-shell mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <div className={isDesktopSidebarRoute ? "lg:grid lg:grid-cols-[260px,minmax(0,1fr)] lg:gap-8 lg:items-start" : undefined}>
          {isDesktopSidebarRoute ? (
            <aside className="hidden lg:block lg:sticky lg:top-6">
              <Navigation variant="sidebar" />
            </aside>
          ) : null}

          <div>
            <header className="site-hero mb-8">
              <div className="site-hero-grid">
                <div
                  className={
                    isCompactHeroRoute
                      ? "flex min-h-[180px] flex-col items-center justify-center gap-5"
                      : isCenteredHeroRoute
                        ? "flex flex-col items-center justify-center gap-6"
                      : "flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"
                  }
                >
                  <div
                    className={
                      isCompactHeroRoute || isCenteredHeroRoute
                        ? "site-hero-copy w-full max-w-3xl text-center"
                        : "site-hero-copy max-w-3xl"
                    }
                  >
                    <p className={isCompactHeroRoute || isCenteredHeroRoute ? "hero-chip mx-auto" : "hero-chip"}>
                      {venueName} · Operativita sala
                    </p>
                    <h1>{OPERATIONS_TITLE}</h1>
                    {!isCompactHeroRoute ? (
                      <>
                        <p className={isCenteredHeroRoute ? "mx-auto text-center" : undefined}>
                          Un&apos;interfaccia riallineata a un linguaggio premium e contemporaneo: piu chiarezza, piu contrasto,
                          piu controllo visivo su prenotazioni, piantina, unioni tavoli e flusso di servizio.
                        </p>

                        <div className={isCenteredHeroRoute ? "hero-proof-row justify-center" : "hero-proof-row"}>
                          <span className="hero-proof-pill">Dashboard live</span>
                          <span className="hero-proof-pill">Piantina operativa</span>
                          <span className="hero-proof-pill">WhatsApp pronto</span>
                        </div>
                      </>
                    ) : null}
                  </div>

                  {!isCompactHeroRoute && !isCenteredHeroRoute ? (
                    <div className="hero-meta-grid">
                      <div className="hero-meta-card">
                        <p>Modalita</p>
                        <p>Sala operativa</p>
                      </div>
                      <div className="hero-meta-card">
                        <p>Locale</p>
                        <p>{venueName}</p>
                      </div>
                      <div className="hero-meta-card">
                        <p>Target</p>
                        <p>Team di sala e manager</p>
                      </div>
                      <div className="hero-meta-card">
                        <p>Segnale</p>
                        <p>Piu premium, meno gestionale grezzo</p>
                      </div>
                    </div>
                  ) : null}
                </div>

                <div className={isDesktopSidebarRoute ? "lg:hidden" : undefined}>
                  <Navigation />
                </div>
              </div>

              <div className="pointer-events-none absolute inset-0 overflow-hidden">
                <div className="hero-orb -right-16 top-0 h-48 w-48 bg-white/10" />
                <div className="hero-orb bottom-0 left-1/3 h-32 w-56 bg-copper/25" />
                <div className="absolute right-20 top-16 h-24 w-24 rounded-full border border-white/10" />
                <div className="absolute bottom-8 left-12 h-16 w-40 rounded-full border border-white/10" />
              </div>
            </header>

            <div className="page-stack">{children}</div>
          </div>
        </div>
      </div>
      <ThemeToggle />
    </div>
  );
}