"use client";

import { ReactNode } from "react";
import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/outline";
import { AnimatedCard } from "@/components/molecules/AnimatedCard/AnimatedCard";
import { Button } from "@/components/atoms/button";

export interface StepValidation {
  isValid: boolean;
  errors?: string[];
  warnings?: string[];
}

export interface ConfigurationStepProps {
  // Step identification
  stepNumber: number;
  title: string;
  description?: string;

  // Step state
  isActive?: boolean;
  isCompleted?: boolean;
  isDisabled?: boolean;
  validation?: StepValidation;

  // Content
  children: ReactNode;
  helpText?: string;
  infoText?: string;

  // Actions
  onNext?: () => void;
  onPrevious?: () => void;
  onSkip?: () => void;
  nextLabel?: string;
  previousLabel?: string;
  skipLabel?: string;
  showActions?: boolean;

  // Styling
  variant?: "default" | "highlighted" | "compact";
  showStepIndicator?: boolean;

  // State
  loading?: boolean;
  disabled?: boolean;

  // Custom content
  headerContent?: ReactNode;
  footerContent?: ReactNode;
}

export function ConfigurationStep({
  stepNumber,
  title,
  description,
  isActive = true,
  isCompleted = false,
  isDisabled = false,
  validation,
  children,
  helpText,
  infoText,
  onNext,
  onPrevious,
  onSkip,
  nextLabel = "Continue",
  previousLabel = "Back",
  skipLabel = "Skip",
  showActions = true,
  variant = "default",
  showStepIndicator = true,
  loading = false,
  disabled = false,
  headerContent,
  footerContent,
}: ConfigurationStepProps) {
  const getStepIndicatorClasses = () => {
    if (isCompleted) {
      return "bg-green-500 border-green-500 text-white";
    }
    if (isActive && !isDisabled) {
      return "border-blue-500 text-blue-500 bg-blue-50";
    }
    if (isDisabled) {
      return "border-gray-300 text-gray-400 bg-gray-50";
    }
    return "border-gray-300 text-gray-500 bg-white";
  };

  const getCardVariant = () => {
    if (variant === "highlighted") return "highlighted";
    if (isDisabled) return "static";
    return "default";
  };

  const hasErrors = validation?.errors && validation.errors.length > 0;
  const hasWarnings = validation?.warnings && validation.warnings.length > 0;
  const isValid = validation?.isValid !== false;

  return (
    <AnimatedCard variant={getCardVariant()} className={`p-6 ${isDisabled ? "opacity-60" : ""}`}>
      {/* Step Header */}
      <div className="mb-6">
        <div className="flex items-start gap-4">
          {/* Step Indicator */}
          {showStepIndicator && (
            <div
              className={`flex-shrink-0 w-10 h-10 rounded-full border-2 flex items-center justify-center font-bold transition-all duration-300 ${getStepIndicatorClasses()}`}
            >
              {isCompleted ? <CheckCircleIcon className="w-6 h-6" /> : <span>{stepNumber}</span>}
            </div>
          )}

          {/* Step Title and Description */}
          <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 Status */}
            {validation && (
              <div className="mt-3">
                {hasErrors && (
                  <div className="flex items-start gap-2 text-red-600">
                    <ExclamationTriangleIcon className="h-4 w-4 flex-shrink-0 mt-0.5" />
                    <div className="text-sm">
                      {validation.errors!.map((error, index) => (
                        <div key={index}>{error}</div>
                      ))}
                    </div>
                  </div>
                )}

                {hasWarnings && !hasErrors && (
                  <div className="flex items-start gap-2 text-amber-600">
                    <ExclamationTriangleIcon className="h-4 w-4 flex-shrink-0 mt-0.5" />
                    <div className="text-sm">
                      {validation.warnings!.map((warning, index) => (
                        <div key={index}>{warning}</div>
                      ))}
                    </div>
                  </div>
                )}

                {isValid && !hasWarnings && isCompleted && (
                  <div className="flex items-center gap-2 text-green-600">
                    <CheckCircleIcon className="h-4 w-4" />
                    <span className="text-sm font-medium">Configuration complete</span>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>

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

      {/* Step Content */}
      {!isDisabled && <div className="mb-6">{children}</div>}

      {/* Help Text */}
      {helpText && !isDisabled && (
        <div className="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
          <div className="flex items-start gap-2">
            <InformationCircleIcon className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-blue-700">{helpText}</p>
          </div>
        </div>
      )}

      {/* Info Text */}
      {infoText && !isDisabled && (
        <div className="mb-6 p-3 bg-gray-50 rounded-lg border border-gray-200">
          <p className="text-sm text-gray-600">{infoText}</p>
        </div>
      )}

      {/* Actions */}
      {showActions && !isDisabled && (
        <div className="flex flex-col sm:flex-row gap-3">
          <div className="flex gap-3 flex-1">
            {onPrevious && (
              <Button
                onClick={onPrevious}
                variant="outline"
                className="flex-1 sm:flex-none"
                disabled={disabled || loading}
              >
                {previousLabel}
              </Button>
            )}

            {onSkip && (
              <Button
                onClick={onSkip}
                variant="outline"
                className="flex-1 sm:flex-none"
                disabled={disabled || loading}
              >
                {skipLabel}
              </Button>
            )}
          </div>

          {onNext && (
            <Button
              onClick={onNext}
              className="flex-1 sm:flex-none sm:min-w-[120px]"
              disabled={disabled || loading || hasErrors}
            >
              {loading ? (
                <span className="flex items-center justify-center">
                  <svg
                    className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  Processing...
                </span>
              ) : (
                nextLabel
              )}
            </Button>
          )}
        </div>
      )}

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