import React from "react";
import { LogOut } from "lucide-react";
import { Button } from "./button";
import { Stepper, Step, StepItem, StepIndicator, StepLabel } from "./stepper";
import { cn } from "../../lib/utils";

// ─── Types ────────────────────────────────────────────────────────────────────

export type OnboardingStep = {
  id: string;
  title: string;
  description?: string;
  isOptional?: boolean;
  isLocked?: boolean;
};

export type OnboardingLayoutProps = {
  steps: OnboardingStep[];
  currentStepIndex: number;
  /** Label for the primary action button. Defaults to "Next" / "Finish". */
  nextLabel?: string;
  /** Disable the Next button (e.g. required fields not filled). */
  canProceed?: boolean;
  onBack: () => void;
  onNext: () => void;
  /** Skip is only shown when provided and the step is not locked. */
  onSkip?: () => void;
  /** Called when the user clicks "Upgrade Plan" on a locked step. */
  onUpgrade?: () => void;
  className?: string;
  children: React.ReactNode;
};

// ─── OnboardingLayout ─────────────────────────────────────────────────────────

// ─── OnboardingPanelLayoutProps ───────────────────────────────────────────────

export type OnboardingPanelLayoutProps = {
  title: string;
  subtitle?: string;
  steps: OnboardingStep[];
  currentStepIndex: number;
  canProceed?: boolean;
  onBack?: () => void;
  onNext?: () => void;
  onSkip?: () => void;
  /** Override the label on the last-step primary button. Defaults to "Finish Setup". */
  finishLabel?: string;
  /** Show a logout button pinned to the bottom of the step list. */
  showLogout?: boolean;
  /** Called when the logout button is clicked. */
  onLogout?: () => void;
  /** Override the logout button label. Defaults to "Log out". */
  logoutLabel?: string;
  className?: string;
  children: React.ReactNode;
};

// ─── OnboardingPanelLayout ────────────────────────────────────────────────────

export function OnboardingPanelLayout({
  title,
  subtitle,
  steps,
  currentStepIndex,
  canProceed = true,
  onBack,
  onNext,
  onSkip,
  finishLabel = "Finish Setup",
  showLogout = false,
  onLogout,
  logoutLabel = "Log out",
  className,
  children,
}: OnboardingPanelLayoutProps) {
  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === steps.length - 1;
  const showFooter =
    onNext !== undefined || onBack !== undefined || onSkip !== undefined;

  return (
    <div className={cn("flex h-screen bg-background font-sans", className)}>
      {/* ── Left panel — vertical stepper ── */}
      <div className="flex min-h-0 w-72 shrink-0 flex-col border-r border-border bg-muted/20 p-8">
        <div className="flex flex-col gap-1 mb-8">
          <span className="text-h1">{title}</span>
          {subtitle && (
            <span className="text-body-medium text-muted-foreground">
              {subtitle}
            </span>
          )}
        </div>
        {steps.length > 1 && (
          <div className="min-h-0 flex-1 overflow-y-auto">
            <Stepper
              activeStep={currentStepIndex}
              orientation="vertical"
              className="min-h-full"
            >
              {steps.map((step) => (
                <Step key={step.id} className="flex-1">
                  <StepIndicator />
                  <div className="flex flex-1 flex-col">
                    <StepLabel
                      description={
                        step.isLocked ? "Upgrade to unlock" : step.description
                      }
                    >
                      {step.title}
                    </StepLabel>
                  </div>
                </Step>
              ))}
            </Stepper>
          </div>
        )}
        {showLogout && (
          <div className="shrink-0 border-t border-border pt-4 -mb-4">
            <Button
              variant="ghost"
              size="sm"
              onClick={onLogout}
              className="w-full justify-start gap-2"
            >
              <LogOut className="size-4" />
              {logoutLabel}
            </Button>
          </div>
        )}
      </div>

      {/* ── Right panel — content + footer ── */}
      <div className="flex min-h-0 flex-1 flex-col">
        <div className="flex-1 overflow-y-auto px-10 py-8">
          <div className="max-w-2xl">{children}</div>
        </div>
        {showFooter && (
          <div className="flex items-center gap-2 border-t border-border px-10 py-4">
            {onNext && (
              <Button
                variant="outline-primary"
                size="sm"
                onClick={onNext}
                disabled={!canProceed}
              >
                {isLastStep ? finishLabel : "Next"}
              </Button>
            )}
            {!isFirstStep && onBack && (
              <Button variant="outline-secondary" size="sm" onClick={onBack}>
                Back
              </Button>
            )}
            {onSkip && (
              <Button variant="ghost" size="sm" onClick={onSkip}>
                Skip for now
              </Button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── OnboardingLayout ─────────────────────────────────────────────────────────

export function OnboardingLayout({
  steps,
  currentStepIndex,
  nextLabel,
  canProceed = true,
  onBack,
  onNext,
  onSkip,
  onUpgrade,
  className,
  children,
}: OnboardingLayoutProps) {
  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === steps.length - 1;
  const currentStep = steps[currentStepIndex];
  const isLocked = currentStep?.isLocked ?? false;

  const primaryLabel = isLocked
    ? "Upgrade Plan"
    : isLastStep
      ? "Finish Setup"
      : (nextLabel ?? "Next");

  return (
    <div
      className={cn("flex h-full flex-col bg-background font-sans", className)}
    >
      <div className="px-8 pt-5 pb-3">
        <Stepper activeStep={currentStepIndex}>
          {steps.map((step) => (
            <Step key={step.id}>
              <StepItem
                label={step.title}
                description={
                  step.isLocked
                    ? "Upgrade to unlock"
                    : step.isOptional
                      ? "Optional"
                      : undefined
                }
              />
            </Step>
          ))}
        </Stepper>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto px-8 pt-4 pb-6">
        {children}
      </div>

      <div className="flex items-center justify-between border-t border-border px-8 py-4">
        <div>
          {onSkip && (
            <Button variant="ghost" size="sm" onClick={onSkip}>
              Skip for now
            </Button>
          )}
        </div>
        <div className="flex gap-2">
          {!isFirstStep && (
            <Button variant="outline-secondary" size="sm" onClick={onBack}>
              Back
            </Button>
          )}
          <Button
            size="sm"
            onClick={isLocked ? onUpgrade : onNext}
            disabled={!isLocked && !canProceed}
          >
            {primaryLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}