import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import type { AuditTuiState } from '../audit-state';
import { VERDICT_VISUALS } from '../icons';

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

function formatTimestamp(iso: string): string {
  // Local-time HH:MM:SS — full ISO is dense and the UTC component is
  // rarely useful for an interactive operator at the keyboard.
  try {
    return new Date(iso).toLocaleTimeString();
  } catch {
    return iso;
  }
}

export function SummaryPane({ state, focused }: Props) {
  const { report, auditing, progressMessage } = state;
  const verdict = VERDICT_VISUALS[report.verdict];
  const blockedCount = report.findings.filter((f) => f.severity === 'blocked').length;
  const driftCount = report.findings.filter((f) => f.severity === 'drift').length;

  return (
    <Box
      borderStyle="round"
      borderColor={focused ? 'cyan' : 'gray'}
      flexDirection="column"
      paddingX={1}
      width="100%"
      height="100%"
      overflow="hidden"
    >
      <Text dimColor>1 Summary</Text>
      <Box marginTop={1}>
        {auditing ? (
          <Text>
            <Spinner type="dots" />
            <Text> auditing…</Text>
          </Text>
        ) : (
          <Text color={verdict.color} bold>
            {verdict.icon} {verdict.label}
          </Text>
        )}
      </Box>
      {auditing ? (
        <Text dimColor wrap="truncate-end">
          {progressMessage ?? 'starting…'}
        </Text>
      ) : (
        <>
          <Text>
            {blockedCount} blocked, {driftCount} drift
          </Text>
          <Text dimColor>at {formatTimestamp(report.generatedAt)}</Text>
        </>
      )}
    </Box>
  );
}