import React from 'react';
import { ImageWithFallback } from '../../figma/ImageWithFallback';
import { LanguageSelector } from '../../brand/language-selector';
import { IsotypeTwist } from '../../brand/isotype';
import { cn } from '../../shared/utils';

export type AuthPageShellProps =
  | {
      /** Hero photo on the left (default). Requires `imageSrc`/`imageAlt`. */
      leftPanel?: 'image';
      imageSrc: string;
      imageAlt: string;
      /**
       * Background classes for the hero image overlay gradient. Defaults to the
       * shared `--gradient-diagonal` theme token; pass a Tailwind gradient to
       * override it for a specific auth page without affecting the others.
       */
      gradientClassName?: string;
      children: React.ReactNode;
    }
  | {
      /**
       * Brand isotype mark on a solid `bg-muted` panel — no photo, no
       * gradient. Pairs with a lighter `bg-card` form panel on the right,
       * the inverse of the `image` variant's `bg-muted` form panel.
       */
      leftPanel: 'isotype';
      children: React.ReactNode;
    };

/**
 * Shared two-column shell used by every auth page (Login, ForgotPassword,
 * ResetPassword, VerifyEmail): a left panel (hero image or brand isotype) and
 * a centered form panel with a language selector on the right.
 */
export function AuthPageShell(props: AuthPageShellProps) {
  const { children } = props;

  return (
    <div className="h-screen w-full flex overflow-y-auto">
      {props.leftPanel === 'isotype' ? (
        <div className="hidden lg:flex lg:flex-1 items-center justify-center bg-muted">
          <IsotypeTwist variant="magenta-blue" className="w-full max-w-sm" />
        </div>
      ) : (
        <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
          <ImageWithFallback
            src={props.imageSrc}
            alt={props.imageAlt}
            className="absolute inset-0 w-full h-full object-cover"
          />
          <div
            className={cn(
              'absolute inset-0 opacity-80',
              props.gradientClassName ?? 'bg-[image:var(--gradient-diagonal)]'
            )}
          />
        </div>
      )}

      <div
        className={cn(
          'flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative',
          props.leftPanel === 'isotype' ? 'bg-card' : 'bg-muted'
        )}
      >
        <div className="absolute top-4 right-4 z-20">
          <LanguageSelector variant="minimal" showIcon={false} />
        </div>
        {props.leftPanel !== 'isotype' && (
          <div
            className={cn(
              'absolute inset-0 lg:hidden opacity-10 dark:opacity-5',
              props.gradientClassName ?? 'bg-[image:var(--gradient-diagonal)]'
            )}
          />
        )}
        <div className="w-full max-w-sm space-y-6 relative z-10">{children}</div>
      </div>
    </div>
  );
}
