import { Building2 } from "lucide-react";
import { getSettings } from "@/lib/settings";
import { api } from "../../../convex/_generated/api";
import { q } from "@/lib/convex-server";
import { Showroom, type ShowroomSlide } from "@/components/auth/showroom";

/**
 * Property Showroom login shell. The gallery is public presentation content
 * (apartment covers, names, cities); every business figure stays behind
 * authentication. Desktop: 60/40 split. Mobile: hero image on top, compact
 * authentication panel below.
 */
export default async function AuthLayout({ children }: { children: React.ReactNode }) {
  const settings = await getSettings();
  const slides: ShowroomSlide[] = (await q(api.media.showroom, {}).catch(() => [])) as ShowroomSlide[];

  return (
    <div className="min-h-dvh bg-bg lg:grid lg:grid-cols-[1.4fr_1fr]">
      {/* Desktop showroom panel */}
      <aside className="relative hidden lg:block">
        {slides.length ? (
          <Showroom slides={slides} businessName={settings.businessName} variant="panel" />
        ) : (
          <div className="flex h-full min-h-dvh flex-col justify-between bg-brand-900 p-12 text-brand-50">
            <span className="font-display text-xl">{settings.businessName}</span>
            <h1 className="max-w-md font-display text-4xl font-light leading-[1.15] tracking-tight">Every apartment, every guest, every dirham — under control.</h1>
            <p className="text-xs text-brand-300/60">Authorised personnel only · Activity is logged</p>
          </div>
        )}
        <div className="pointer-events-none absolute left-10 top-10 flex items-center gap-3 text-white lg:left-12 lg:top-12">
          <span className="flex size-10 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/20 backdrop-blur">
            <Building2 className="size-5" />
          </span>
          <span className="font-display text-xl font-medium tracking-tight">{settings.businessName}</span>
        </div>
      </aside>

      {/* Mobile hero */}
      <div className="lg:hidden">
        {slides.length ? (
          <div className="relative">
            <Showroom slides={slides.slice(0, 4)} businessName={settings.businessName} variant="hero" />
            <div className="pointer-events-none absolute left-5 top-5 flex items-center gap-2 text-white">
              <span className="flex size-8 items-center justify-center rounded-md bg-white/15 ring-1 ring-white/25 backdrop-blur">
                <Building2 className="size-4" />
              </span>
              <span className="font-display text-lg font-medium">{settings.businessName}</span>
            </div>
          </div>
        ) : null}
      </div>

      <main className="flex items-center justify-center px-6 py-8 sm:px-10 lg:min-h-dvh">
        <div className="w-full max-w-sm animate-slide-up">{children}</div>
      </main>
    </div>
  );
}