'use client';

import { useAuthBranding } from '@/components/shared/auth-branding-provider';

interface BrandedAuthShellProps {
  children: React.ReactNode;
  /** Per-port branding override. When omitted, the shell picks up
   *  branding from the surrounding `<AuthBrandingProvider>` (mounted at
   *  the route-group layout). When neither is present, falls back to
   *  neutral defaults (no logo, plain background). */
  branding?: {
    logoUrl?: string | null;
    backgroundUrl?: string | null;
    appName?: string | null;
  };
  /** Card width preset. Default (`'sm'`) caps at max-w-md to match the
   *  CRM/portal login surfaces; `'md'` opens to max-w-xl for forms that
   *  carry a dozen+ fields (supplemental info, EOI prefill). Wider
   *  variants also relax the fixed-viewport pin so long forms scroll
   *  naturally on mobile instead of getting clipped under the rubber-
   *  band cap. */
  width?: 'sm' | 'md';
}

/**
 * Branded shell shared by every auth/form surface - CRM login, portal login,
 * password set/reset/activate, forgot-password. Renders the background,
 * the port logo, and a centered white card that consumers populate with
 * their own form/content.
 *
 * Pages that know their portId at render time can pass `branding` as an
 * explicit prop; otherwise the surrounding `<AuthBrandingProvider>` is
 * the source of truth.
 */
export function BrandedAuthShell({ children, branding, width = 'sm' }: BrandedAuthShellProps) {
  const ctx = useAuthBranding();
  const logoUrl = branding?.logoUrl ?? ctx?.logoUrl ?? null;
  const backgroundUrl = branding?.backgroundUrl ?? ctx?.backgroundUrl ?? null;
  // When no port name is known, treat the logo as decorative - "Sign in"
  // as alt text was being read on every auth page even when the page
  // itself isn't a sign-in surface (e.g. password reset, set-password).
  const appName = branding?.appName ?? ctx?.appName ?? null;
  const altText = appName ?? '';

  const widthClass = width === 'md' ? 'max-w-xl' : 'max-w-md';
  // Wide variant uses a normal document scroll (`min-h-dvh`) instead of
  // the fixed-viewport pin so a 20+ field form scrolls instead of
  // getting clipped. The narrow login-grade variant keeps the original
  // fixed/centered behaviour to stop iOS rubber-banding on short forms.
  const layoutClass =
    width === 'md'
      ? 'relative min-h-dvh flex items-start sm:items-center justify-center px-4 py-8'
      : 'fixed inset-0 flex items-center justify-center px-4 py-8 overscroll-none';

  return (
    <div className={layoutClass}>
      <div
        aria-hidden
        className="fixed inset-0 -z-10"
        style={{
          backgroundImage: backgroundUrl ? `url('${backgroundUrl}')` : undefined,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          // Neutral slate fallback so we never leak any one port's brand
          // imagery when branding hasn't been configured.
          backgroundColor: '#f2f2f2',
        }}
      />
      <div className={`w-full ${widthClass}`}>
        <div className="bg-white rounded-lg shadow-lg p-8">
          {logoUrl ? (
            <div className="flex justify-center mb-6">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={logoUrl} alt={altText} className="w-24 h-auto" />
            </div>
          ) : null}
          {children}
        </div>
      </div>
    </div>
  );
}
