import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import { ALL_CATEGORIES, CATEGORY_LABELS, type CategoryStatus } from '../audit-state';
import type { Theme } from '../theme';

interface Props {
  progress: Record<string, CategoryStatus>;
  theme: Theme;
}

/**
 * Right-padded label so all the verdict icons line up vertically
 * regardless of category-name length. 21 = longest label
 * ("Unconfigured modules") + a couple of cells of cushion.
 */
const LABEL_WIDTH = 22;

function StatusRow({ category, status }: { category: string; status: CategoryStatus }) {
  const label = CATEGORY_LABELS[category as keyof typeof CATEGORY_LABELS] ?? category;
  const padded = label.padEnd(LABEL_WIDTH, ' ');

  if (status === 'pending') {
    return <Text dimColor>· {padded} pending</Text>;
  }
  if (status === 'running') {
    return (
      <Text>
        <Spinner type="dots" />
        <Text> </Text>
        <Text>{padded}</Text>
        <Text dimColor>checking…</Text>
      </Text>
    );
  }
  // done
  if (status.verdict === 'clean') {
    return <Text color="green">✓ {padded}clean</Text>;
  }
  if (status.verdict === 'unmeasured') {
    return <Text color="yellow">? {padded}unmeasured</Text>;
  }
  if (status.verdict === 'drift') {
    return <Text color="yellow">▲ {padded}drift</Text>;
  }
  return <Text color="red">× {padded}blocked</Text>;
}

/**
 * Pops at the start of every audit run — one fuel-gauge per
 * category. Auto-dismisses (via the reducer) when every category
 * reports done. Non-interactive: nothing for the user to do here
 * besides wait. Ctrl-C / q still quit at the AuditTui level.
 */
export function AnalyzingModal({ progress, theme }: Props) {
  return (
    <Box
      borderStyle="round"
      borderColor="cyan"
      backgroundColor={theme.dialogBg}
      flexDirection="column"
      paddingX={3}
      paddingY={1}
      width={56}
    >
      <Text color={theme.dialogFg} bold>
        Analyzing system…
      </Text>
      <Box marginTop={1} flexDirection="column">
        {ALL_CATEGORIES.map((c) => (
          <StatusRow key={c} category={c} status={progress[c] ?? 'pending'} />
        ))}
      </Box>
      <Box marginTop={1}>
        <Text dimColor>q to quit</Text>
      </Box>
    </Box>
  );
}