"use client";

import type { ReactNode } from "react";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import {
  StepHeader,
  StepActions,
  StepContent,
  deriveStatus,
  type StepValidation,
  type CardVariant,
} from "./configuration-step";

export type { StepValidation };

export interface ConfigurationStepProps {
  stepNumber: number;
  title: string;
  description?: string;
  isActive?: boolean;
  isCompleted?: boolean;
  isDisabled?: boolean;
  validation?: StepValidation;
  children: ReactNode;
  helpText?: string;
  infoText?: string;
  onNext?: () => void;
  onPrevious?: () => void;
  onSkip?: () => void;
  nextLabel?: string;
  previousLabel?: string;
  skipLabel?: string;
  showActions?: boolean;
  variant?: CardVariant;
  showStepIndicator?: boolean;
  loading?: boolean;
  disabled?: boolean;
  headerContent?: ReactNode;
  footerContent?: ReactNode;
}

function getCardVariant(
  variant: CardVariant,
  isDisabled: boolean
): "highlighted" | "static" | "default" {
  if (variant === "highlighted") return "highlighted";
  if (isDisabled) return "static";
  return "default";
}

export function ConfigurationStep({
  stepNumber,
  title,
  description,
  isActive = true,
  isCompleted = false,
  isDisabled = false,
  validation,
  children,
  helpText,
  infoText,
  onNext,
  onPrevious,
  onSkip,
  nextLabel,
  previousLabel,
  skipLabel,
  showActions = true,
  variant = "default",
  showStepIndicator = true,
  loading = false,
  disabled = false,
  headerContent,
  footerContent,
}: ConfigurationStepProps) {
  const status = deriveStatus({ isActive, isCompleted, isDisabled });
  const hasErrors = validation?.errors && validation.errors.length > 0;
  const showStepActions = showActions && !isDisabled;

  return (
    <AnimatedCard
      variant={getCardVariant(variant, isDisabled)}
      className={`p-6 ${isDisabled ? "opacity-60" : ""}`}
    >
      <StepHeader
        stepNumber={stepNumber}
        title={title}
        description={description}
        status={status}
        validation={validation}
        showStepIndicator={showStepIndicator}
        headerContent={headerContent}
      />

      <StepContent helpText={helpText} infoText={infoText} isDisabled={isDisabled}>
        {children}
      </StepContent>

      {showStepActions && (
        <StepActions
          onNext={onNext}
          onPrevious={onPrevious}
          onSkip={onSkip}
          nextLabel={nextLabel}
          previousLabel={previousLabel}
          skipLabel={skipLabel}
          loading={loading}
          disabled={disabled}
          hasErrors={hasErrors}
        />
      )}

      {footerContent && <div className="mt-6 pt-4 border-t border-gray-200">{footerContent}</div>}
    </AnimatedCard>
  );
}
