import React from "react";
import { Stepper, Step, StepItem } from "./stepper";

const DEFAULT_VIDEO_SRC =
  "https://d1rndq5v7rs3ry.cloudfront.net/padua-landing-video.mp4";

// ---------------------------------------------------------------------------
// SignupVideoPanel
// ---------------------------------------------------------------------------

export interface SignupVideoPanelProps {
  /** Defaults to WealthX CDN landing video. */
  videoSrc?: string;
}

export function SignupVideoPanel({
  videoSrc = DEFAULT_VIDEO_SRC,
}: SignupVideoPanelProps) {
  return (
    <div className="hidden @md:block relative bg-neutral-900 overflow-hidden">
      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
      >
        <source src={videoSrc} type="video/mp4" />
      </video>
    </div>
  );
}

// ---------------------------------------------------------------------------
// SignupShell — backoffice signup wizard layout
// ---------------------------------------------------------------------------

export interface SignupShellProps {
  /** Ordered list of step labels used by the stepper and h2 heading. */
  steps: string[];
  /** 0-based active step index. When >= steps.length the success layout is shown. */
  step: number;
  children: React.ReactNode;
  /** Sticky footer content (Prev/Next buttons). Hidden in success state. */
  footer?: React.ReactNode;
  videoSrc?: string;
  /** Page heading above the stepper. Defaults to "Sign Up". */
  title?: string;
}

export function SignupShell({
  steps,
  step,
  children,
  footer,
  videoSrc,
  title = "Sign Up",
}: SignupShellProps) {
  const isSuccess = step >= steps.length;

  return (
    <div className="@md:grid @md:grid-cols-2 h-screen overflow-hidden">
      <SignupVideoPanel videoSrc={videoSrc} />
      <div className="flex flex-col h-full overflow-hidden">
        {isSuccess ? (
          <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
            {children}
          </div>
        ) : (
          <>
            <div className="flex-1 overflow-y-auto min-h-0">
              <div className="flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10">
                <div className="w-full max-w-[560px] flex flex-col gap-8">
                  <h1 className="text-3xl font-bold text-foreground text-center">
                    {title}
                  </h1>
                  <Stepper activeStep={step} className="w-full">
                    {steps.map((label) => (
                      <Step key={label}>
                        <StepItem label={label} />
                      </Step>
                    ))}
                  </Stepper>
                  <h2 className="text-2xl font-bold text-foreground">
                    {steps[step]}
                  </h2>
                  {children}
                </div>
              </div>
            </div>
            {footer && (
              <div className="shrink-0 border-t border-border bg-background">
                <div className="w-full max-w-[560px] mx-auto px-0 py-4 flex justify-between">
                  {footer}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// FrontendShell — client-facing signup wizard layout
// ---------------------------------------------------------------------------

export interface FrontendShellProps {
  /** Step labels for the stepper. Required when stepIndex is provided. */
  steps?: string[];
  /** 0-based active step. When undefined the stepper is hidden. */
  stepIndex?: number;
  children: React.ReactNode;
  footer?: React.ReactNode;
  /** When true renders a centered layout without stepper/title (success screen). */
  isSuccess?: boolean;
  videoSrc?: string;
  /** Page heading. Defaults to "Create Account". */
  title?: string;
}

export function FrontendShell({
  steps,
  stepIndex,
  children,
  footer,
  isSuccess = false,
  videoSrc,
  title = "Create Account",
}: FrontendShellProps) {
  const hasStepper = stepIndex !== undefined && steps !== undefined;

  return (
    <div className="@md:grid @md:grid-cols-2 h-screen overflow-hidden">
      <SignupVideoPanel videoSrc={videoSrc} />
      <div className="flex flex-col h-full overflow-hidden">
        {isSuccess ? (
          <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
            {children}
          </div>
        ) : (
          <>
            <div className="flex-1 overflow-y-auto min-h-0">
              <div className="flex min-h-full justify-center px-4 py-6 @sm:px-10 @sm:py-10">
                <div className="w-full max-w-[520px] flex flex-col gap-8">
                  <h1 className="text-3xl font-bold text-foreground text-center">
                    {title}
                  </h1>
                  {hasStepper && (
                    <Stepper activeStep={stepIndex} className="w-full">
                      {steps!.map((label) => (
                        <Step key={label}>
                          <StepItem label={label} />
                        </Step>
                      ))}
                    </Stepper>
                  )}
                  {hasStepper && (
                    <h2 className="text-2xl font-bold text-foreground">
                      {steps![stepIndex!]}
                    </h2>
                  )}
                  {children}
                </div>
              </div>
            </div>
            {footer && (
              <div className="shrink-0 border-t border-border bg-background">
                <div className="w-full max-w-[520px] mx-auto px-0 py-4 flex justify-between">
                  {footer}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}