import React from "react";
import { Box, Text } from "ink";

interface ProgressBarProps {
  label: string;
  current: number;
  total: number;
  width?: number;
}

/**
 * Render a progress bar with label and percentage
 */
export function ProgressBar({ label, current, total, width = 20 }: ProgressBarProps) {
  const percent = total > 0 ? Math.round((current / total) * 100) : 0;
  const filled = Math.max(0, Math.min(width, Math.round((percent / 100) * width)));
  const empty = width - filled;

  const bar = "█".repeat(filled) + "░".repeat(empty);

  return (
    <Box gap={1}>
      <Text color="yellow">{label}</Text>
      <Text color="cyan">[{bar}]</Text>
      <Text dimColor>
        {current}/{total} ({percent}%)
      </Text>
    </Box>
  );
}

/**
 * Simple spinner for indeterminate progress
 */
export function Spinner({ label }: { label: string }) {
  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
  const [frameIndex, setFrameIndex] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setFrameIndex((prev) => (prev + 1) % frames.length);
    }, 80);

    return () => clearInterval(timer);
  }, []);

  return (
    <Box gap={1}>
      <Text color="yellow">{frames[frameIndex]}</Text>
      <Text color="yellow">{label}</Text>
    </Box>
  );
}