import React from 'react';
import { Box, Text } from 'ink';
import { MonitorState } from './types.js';
import { formatProgress } from './factory.js';

interface ActiveMissionProps {
    state: MonitorState;
}

export function ActiveMission({ state }: ActiveMissionProps) {
    const { activeTask, stats } = state;
    const pct = stats.total > 0 ? Math.round((stats.completed / stats.total) * 100) : 0;
    const bar = formatProgress(stats.completed, stats.total, 24);
    const desc = activeTask?.description;

    return (
        <Box flexDirection="column" borderStyle="round" borderColor="magenta" paddingX={1} paddingY={0}>
            <Text bold color="magenta">◈ ACTIVE MISSION</Text>

            {activeTask ? (
                <Box flexDirection="column" marginTop={1} gap={1}>
                    <Text bold color="white">
                        {`[T-${activeTask.step_number}] ${activeTask.title}`.substring(0, 52)}
                    </Text>
                    <Box gap={2}>
                        <Text color="cyan">{activeTask.status}</Text>
                        <Text dimColor>│</Text>
                        <Text color="yellow">{activeTask.severity}</Text>
                        <Text dimColor>│</Text>
                        <Text dimColor>{activeTask.category}</Text>
                    </Box>
                    {desc && <Text dimColor>{desc.substring(0, 60)}{desc.length > 60 ? '…' : ''}</Text>}
                    <Box flexDirection="column">
                        <Text dimColor>Progress <Text color="magenta" bold>{pct}%</Text></Text>
                        <Text color="cyan">{bar}</Text>
                    </Box>
                </Box>
            ) : (
                <Box marginTop={1} flexDirection="column" gap={1}>
                    <Text color="green">● Nominal. No active mission.</Text>
                    <Box flexDirection="column">
                        <Text dimColor>Velocity <Text color="magenta" bold>{pct}%</Text></Text>
                        <Text color="cyan">{bar}</Text>
                    </Box>
                </Box>
            )}
        </Box>
    );
}