import { Box, Text } from 'ink';
import type { AuditTuiState } from '../audit-state';
import { InboxZeroCelebration } from '../celebration';
import { SEVERITY_VISUALS } from '../icons';

interface Props {
  state: AuditTuiState;
  focused: boolean;
}

export function CategoriesPane({ state, focused }: Props) {
  const { groups, selectedCategory } = state;

  return (
    <Box
      borderStyle="round"
      borderColor={focused ? 'cyan' : 'gray'}
      flexDirection="column"
      paddingX={1}
      width="100%"
      height="100%"
      overflow="hidden"
    >
      <Text dimColor>2 Categories</Text>
      <Box flexDirection="column" marginTop={1}>
        {groups.length === 0 ? (
          // Don't celebrate while the audit is still running — the
          // empty report is a placeholder, not a verdict.
          state.auditing ? (
            <Text dimColor>(checking…)</Text>
          ) : (
            <InboxZeroCelebration compact />
          )
        ) : (
          groups.map((g) => {
            const v = SEVERITY_VISUALS[g.severity];
            const isSelected = focused && g.category === selectedCategory;
            // When selected, render the whole row as a single inverse
            // Text — nested <Text color> children override the parent's
            // inverse styling in Ink's renderer, so we flatten.
            if (isSelected) {
              return (
                <Text key={g.category} inverse wrap="truncate-end">
                  {`▸ ${v.icon} ${v.label} · ${g.category} (${g.findings.length})`}
                </Text>
              );
            }
            return (
              <Text key={g.category} wrap="truncate-end">
                {'  '}
                <Text color={v.color}>
                  {v.icon} {v.label}
                </Text>
                {` · ${g.category} (${g.findings.length})`}
              </Text>
            );
          })
        )}
      </Box>
    </Box>
  );
}