import { Popover, Progress, Typography, Space, Flex } from 'antd';
import type { ContainerResource } from '@/types/api';

const { Text } = Typography;

interface ContainerPopoverProps {
  resource?: ContainerResource;
  children: React.ReactNode;
}

export default function ContainerPopover({ resource, children }: ContainerPopoverProps) {
  if (!resource) return <>{children}</>;

  const memPct = resource.memoryLimitMB > 0
    ? Math.round((resource.memoryMB / resource.memoryLimitMB) * 100)
    : 0;

  const content = (
    <Space direction="vertical" size={4} style={{ width: 200 }}>
      <Flex justify="space-between">
        <Text type="secondary" style={{ fontSize: 12 }}>CPU</Text>
        <Text style={{ fontSize: 12 }}>{resource.cpuPercent.toFixed(1)}%</Text>
      </Flex>
      <Progress
        percent={Math.min(resource.cpuPercent, 100)}
        size="small"
        showInfo={false}
        strokeColor={resource.cpuPercent > 80 ? '#ff4d4f' : resource.cpuPercent > 50 ? '#faad14' : '#52c41a'}
      />
      <Flex justify="space-between">
        <Text type="secondary" style={{ fontSize: 12 }}>Memory</Text>
        <Text style={{ fontSize: 12 }}>{resource.memoryMB}MB{resource.memoryLimitMB > 0 ? ` / ${resource.memoryLimitMB}MB` : ''}</Text>
      </Flex>
      {resource.memoryLimitMB > 0 && (
        <Progress
          percent={memPct}
          size="small"
          showInfo={false}
          strokeColor={memPct > 80 ? '#ff4d4f' : memPct > 60 ? '#faad14' : '#52c41a'}
        />
      )}
      <Flex justify="space-between">
        <Text type="secondary" style={{ fontSize: 12 }}>Network Rx</Text>
        <Text style={{ fontSize: 12 }}>{resource.networkRxKBps.toFixed(1)} KB/s</Text>
      </Flex>
      <Flex justify="space-between">
        <Text type="secondary" style={{ fontSize: 12 }}>Network Tx</Text>
        <Text style={{ fontSize: 12 }}>{resource.networkTxKBps.toFixed(1)} KB/s</Text>
      </Flex>
    </Space>
  );

  return (
    <Popover content={content} title={resource.label} trigger="hover" placement="top">
      {children}
    </Popover>
  );
}
