import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import CircularProgressbar, {
  CircularProgressbarProps,
} from "../CircularProgressbar/CircularProgressbar";
import { useEffect, useId, useState } from "react";
import { cn } from "@/lib/utils";
import { CheckIcon } from "lucide-react";
import styles from "./CircularProgressbarsList.module.css";

const getItemProgress = (index: number, progress: number) => {
  const integerDivision = Math.floor(progress / 100);
  if (integerDivision > index) {
    return 100;
  }
  if (integerDivision === index) {
    return progress % 100;
  }
  return 0;
};

interface ProgressbarItem {
  circularProgressbarProps?: Omit<
    CircularProgressbarProps,
    "maxValue" | "minValue" | "value" | "size"
  >;
  processing?: {
    title?: TypographyProps<"p">;
    text?: TypographyProps<"span">;
  };
  completed?: {
    title?: TypographyProps<"p">;
    text?: TypographyProps<"span">;
  };
}

export interface CircularProgressbarsListProps
  extends React.ComponentProps<"div"> {
  progressbarItems: ProgressbarItem[];
  transitionDurationItem?: number; // in milliseconds
  animationDurationDivider?: number; // in milliseconds
  onAnimationEnd?: () => void;
  showDividers?: boolean; // Показывать разделительные линии или нет
}

export default function CircularProgressbarsList({
  progressbarItems,
  transitionDurationItem = 5_000,
  animationDurationDivider = 1000,
  onAnimationEnd,
  showDividers = true, // По умолчанию показываем разделители
  ...props
}: CircularProgressbarsListProps) {
  const id = useId();
  const progressbarItemId = `${id}-progressbar-item`;
  const [progress, setProgress] = useState(0);

  // 🎯 Вычисляем адаптивные размеры
  const itemCount = progressbarItems.length;
  
  // Динамический размер прогрессбаров в зависимости от количества
  const getProgressbarSize = () => {
    if (itemCount <= 2) return 80; // Большие для 1-2 элементов
    if (itemCount === 3) return 60; // Средние для 3 элементов  
    return 50; // Маленькие для 4+ элементов
  };

  // Определяем нужен ли вертикальный layout
  const shouldUseVerticalLayout = itemCount > 3;
  
  const progressbarSize = getProgressbarSize();

  useEffect(() => {
    let delay = transitionDurationItem / 100;
    if (progress && progress % 100 === 0) {
      delay = animationDurationDivider;
    }
    const timeout = setTimeout(() => {
      if (progress < progressbarItems.length * 100) {
        setProgress((prev) => prev + 1);
      } else {
        onAnimationEnd?.();
      }
    }, delay);
    return () => clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [progress]);

  return (
    <div
      {...props}
      className={cn(
        "w-full flex items-center justify-center",
        shouldUseVerticalLayout 
          ? "flex-col gap-4" 
          : "flex-row gap-2 flex-wrap justify-center",
        props.className
      )}
      style={shouldUseVerticalLayout ? {} : {
        maxWidth: `${Math.min(itemCount * (progressbarSize + 40), 320)}px`, // Адаптивная максимальная ширина
      }}
    >
      {Array.from({ length: progressbarItems.length * 2 - 1 }).map(
        (_, index) => {
          if (index % 2 === 0) {
            const progressbarItem = progressbarItems[index / 2];
            const itemProgress = getItemProgress(index / 2, progress);
            const isItemCompleted = itemProgress >= 100;
            const itemState = isItemCompleted ? "completed" : "processing";

            return (
              <div
                key={`${progressbarItemId}-${index}`}
                className={cn(
                  "flex items-center",
                  shouldUseVerticalLayout 
                    ? "flex-row gap-4 w-full max-w-[280px]" // Горизонтальный в вертикальном режиме
                    : "flex-col gap-2" // Вертикальный в горизонтальном режиме
                )}
              >
                <CircularProgressbar
                  {...progressbarItem.circularProgressbarProps}
                  transitionDuration={`${transitionDurationItem / 100}ms`}
                  value={itemProgress}
                  size={progressbarSize}
                  // ✅ ПОКАЗЫВАЕМ ПРОЦЕНТЫ (раскомментировано)
                  text={{
                    children: `${itemProgress}%`,
                  }}
                >
                  {isItemCompleted && (
                    <CheckIcon 
                      className="size-4" 
                      color="var(--primary)"
                      style={{ 
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        zIndex: 10
                      }}
                    />
                  )}
                </CircularProgressbar>
                <div
                  className={cn(
                    "flex flex-col items-center gap-1",
                    shouldUseVerticalLayout 
                      ? "flex-1 items-start" // В вертикальном режиме текст слева
                      : `w-[${Math.max(progressbarSize + 10, 80)}px] mt-2` // В горизонтальном - под кругом
                  )}
                >
                  {progressbarItem[itemState]?.title && (
                    <Typography
                      as="p"
                      weight="semiBold"
                      size={shouldUseVerticalLayout ? "md" : "sm"}
                      align={shouldUseVerticalLayout ? "left" : "center"}
                      {...progressbarItem[itemState]?.title}
                    />
                  )}
                  {progressbarItem[itemState]?.text && (
                    <Typography
                      size="xs"
                      color="muted"
                      align={shouldUseVerticalLayout ? "left" : "center"}
                      {...progressbarItem[itemState]?.text}
                      className={cn(
                        shouldUseVerticalLayout ? "mt-1" : "mt-[-4px]",
                        progressbarItem[itemState]?.text.className
                      )}
                    />
                  )}
                </div>
              </div>
            );
          }

          // 🎯 В вертикальном режиме или если showDividers = false, пропускаем разделители
          if (shouldUseVerticalLayout || !showDividers) {
            return null;
          }

          return (
            <div
              key={`${progressbarItemId}-divider-${index}`}
              className={cn(
                "h-[2px] flex-shrink-0",
                `w-[${Math.min(40, progressbarSize)}px]`,
                `mt-[${progressbarSize / 2 + 1}px]`,
                styles.divider
              )}
              style={{
                animationDuration: `${animationDurationDivider}ms`,
                animationDelay: `${
                  ((transitionDurationItem + animationDurationDivider) *
                    (index + 1)) /
                    2 -
                  animationDurationDivider
                }ms`,
              }}
            />
          );
        }
      )}
    </div>
  );
}
