"use client";

import { StepIndicator } from "./StepIndicator";
import { ValidationStatus } from "./ValidationStatus";
import type { StepHeaderProps, StepStatus } from "./types";

function deriveStatus(props: {
  isActive?: boolean;
  isCompleted?: boolean;
  isDisabled?: boolean;
}): StepStatus {
  if (props.isCompleted) return "completed";
  if (props.isDisabled) return "disabled";
  if (props.isActive) return "active";
  return "pending";
}

export function StepHeader({
  stepNumber,
  title,
  description,
  status,
  validation,
  showStepIndicator = true,
  headerContent,
}: StepHeaderProps) {
  const isDisabled = status === "disabled";
  const isCompleted = status === "completed";
  const isValid = validation?.isValid !== false;
  const hasWarnings = validation?.warnings && validation.warnings.length > 0;

  return (
    <div className="mb-6">
      <div className="flex items-start gap-4">
        {showStepIndicator && <StepIndicator stepNumber={stepNumber} status={status} />}

        <div className="flex-1">
          <h3
            className={`text-xl font-bold mb-2 ${isDisabled ? "text-gray-500" : "text-gray-900"}`}
          >
            {title}
          </h3>
          {description && (
            <p
              className={`text-sm leading-relaxed ${isDisabled ? "text-gray-400" : "text-gray-600"}`}
            >
              {description}
            </p>
          )}

          {validation && (
            <div className="mt-3">
              <ValidationStatus
                errors={validation.errors}
                warnings={validation.warnings}
                showSuccess={isValid && !hasWarnings && isCompleted}
              />
            </div>
          )}
        </div>
      </div>

      {headerContent && <div className="mt-4">{headerContent}</div>}
    </div>
  );
}

export { deriveStatus };
