import React from 'react';
import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import { MonitorState } from './types.js';

interface SystemStatusProps {
    state: MonitorState;
}

export function SystemStatus({ state }: SystemStatusProps) {
    const { loading, daemonOnline, stats, apiUrl } = state;

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

            <Box marginTop={1} flexDirection="column" gap={1}>
                <Box>
                    <Text dimColor>Daemon  </Text>
                    {loading
                        ? <Text color="yellow"><Spinner type="dots" /> SYNCING</Text>
                        : daemonOnline
                            ? <Text color="green">● ONLINE</Text>
                            : <Text color="red">○ OFFLINE</Text>
                    }
                </Box>

                <Box>
                    <Text dimColor>API     </Text>
                    <Text color="cyan" dimColor>{apiUrl.replace('https://', '').substring(0, 22)}</Text>
                </Box>

                <Box>
                    <Text dimColor>Tasks   </Text>
                    <Text color="green">{stats.completed}</Text>
                    <Text dimColor>/{stats.total} done</Text>
                </Box>

                <Box>
                    <Text dimColor>Active  </Text>
                    <Text color="yellow">{stats.active}</Text>
                    <Text dimColor>  Blocked </Text>
                    <Text color="red">{stats.blocked}</Text>
                </Box>

                <Box borderStyle="single" borderColor="cyan" paddingX={1} marginTop={1} flexDirection="column">
                    <Text color="cyan" bold italic>🧬 HIVE MIND</Text>
                    <Box gap={1}>
                        <Text dimColor>Antidotes </Text>
                        <Text color="green">{state.hiveStats?.total_antidotes || 0}</Text>
                    </Box>
                    <Box gap={1}>
                        <Text dimColor>Fortress  </Text>
                        <Text color="magenta">{state.hiveStats?.fortress_rules || 0}</Text>
                    </Box>
                    <Box gap={1}>
                        <Text dimColor>Trust     </Text>
                        <Text color="yellow">{(state.hiveStats?.average_trust_score || 0).toFixed(0)}</Text>
                    </Box>
                </Box>
            </Box>
        </Box>
    );
}