"use client";

import Link from "next/link";
import Image from "next/image";
import { useEffect, useMemo, useState } from "react";
import { apiFetch } from "@/lib/api";
import { BrandMark } from "@/components/ui/BrandMark";

export function PublicShell({ children }: { children: React.ReactNode }) {
  const [branding, setBranding] = useState<{ appName: string; logoUrl: string | null } | null>(null);
  const tenantSlug = useMemo(() => {
    if (typeof window === "undefined") return null;
    const u = new URL(window.location.href);
    return u.searchParams.get("tenantSlug");
  }, []);

  useEffect(() => {
    const run = async () => {
      try {
        const data = await apiFetch<{ branding: { appName: string; logoUrl: string | null } }>(
          `/public/branding${tenantSlug ? `?tenantSlug=${encodeURIComponent(tenantSlug)}` : ""}`
        );
        setBranding(data.branding);
      } catch {
        setBranding(null);
      }
    };
    void run();
  }, [tenantSlug]);

  const appName = branding?.appName ?? "EventSphere";
  return (
    <div className="min-h-screen bg-white text-ink">
      <header className="sticky top-0 z-30 border-b border-line/80 bg-white/90 backdrop-blur-xl">
        <div className="mx-auto flex min-h-20 max-w-[118rem] items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <Link href="/" className="flex min-w-0 items-center gap-3 text-ink" aria-label={`${appName} home`}>
            {branding?.logoUrl ? (
              <Image src={branding.logoUrl} alt={appName} width={46} height={46} className="h-11 w-11 rounded-lg object-cover" />
            ) : (
              <BrandMark size="md" />
            )}
            <span className="min-w-0">
              <span className="block truncate text-xl font-black tracking-tight sm:text-2xl">{appName}</span>
              <span className="hidden truncate text-xs font-medium text-slate-600 sm:block">Enterprise Event Management Platform</span>
            </span>
          </Link>
          <nav className="hidden items-center gap-8 text-sm font-semibold text-slate-600 lg:flex" aria-label="Public navigation">
            <a href="#features" className="hover:text-accent">Platform</a>
            <a href="#integrations" className="hover:text-accent">Integrations</a>
            <a href="#security" className="hover:text-accent">Security</a>
          </nav>
          <div className="flex items-center gap-2">
            <Link href="/login" className="hidden min-h-10 items-center rounded-md px-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 sm:inline-flex">
              Sign in
            </Link>
            <a
              href="#events"
              className="inline-flex min-h-10 items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold text-white shadow-[0_8px_18px_rgba(22,119,255,0.22)] transition hover:bg-blue-600"
            >
              Start Registration
            </a>
          </div>
        </div>
      </header>
      {children}
    </div>
  );
}