import { define } from '@because/forge'
import { theme } from '../themes'

// Vitals Section
export const VitalsSection = define('VitalsSection', {
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: 24,
  width: '100%',
  maxWidth: 800,
})

export const VitalCard = define('VitalCard', {
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  padding: 24,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: 16,
})

export const VitalLabel = define('VitalLabel', {
  fontSize: 12,
  fontWeight: 600,
  color: theme('colors-textFaint'),
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
})

// Arc Gauge (for CPU)
export const GaugeContainer = define('GaugeContainer', {
  position: 'relative',
  width: 120,
  height: 70,
})

export const GaugeSvg = define('GaugeSvg', {
  base: 'svg',
  width: '100%',
  height: '100%',
  overflow: 'visible',
})

export const GaugeValue = define('GaugeValue', {
  position: 'absolute',
  bottom: 0,
  left: '50%',
  transform: 'translateX(-50%)',
  fontSize: 24,
  fontWeight: 'bold',
  fontFamily: theme('fonts-mono'),
  color: theme('colors-text'),
})

// Bar Gauge (for RAM)
export const BarGaugeContainer = define('BarGaugeContainer', {
  width: '100%',
  maxWidth: 120,
})

export const BarGaugeTrack = define('BarGaugeTrack', {
  width: '100%',
  height: 12,
  background: theme('colors-border'),
  borderRadius: 6,
  overflow: 'hidden',
})

export const BarGaugeFill = define('BarGaugeFill', {
  height: '100%',
  background: theme('colors-textMuted'),
  borderRadius: 6,
  transition: 'width 0.3s ease',
})

export const BarGaugeLabel = define('BarGaugeLabel', {
  marginTop: 8,
  fontSize: 24,
  fontWeight: 'bold',
  fontFamily: theme('fonts-mono'),
  color: theme('colors-text'),
  textAlign: 'center',
})

// Circular Gauge (for Disk)
export const CircleGaugeContainer = define('CircleGaugeContainer', {
  position: 'relative',
  width: 80,
  height: 80,
})

export const CircleGaugeSvg = define('CircleGaugeSvg', {
  base: 'svg',
  width: '100%',
  height: '100%',
  transform: 'rotate(-90deg)',
})

export const CircleGaugeValue = define('CircleGaugeValue', {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  fontSize: 18,
  fontWeight: 'bold',
  fontFamily: theme('fonts-mono'),
  color: theme('colors-text'),
})

// Unified Logs Section
export const LogsSection = define('LogsSection', {
  width: '100%',
  maxWidth: 800,
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  overflow: 'hidden',
})

export const LogsHeader = define('LogsHeader', {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '12px 16px',
  borderBottom: `1px solid ${theme('colors-border')}`,
})

export const LogsTitle = define('LogsTitle', {
  fontSize: 12,
  fontWeight: 600,
  color: theme('colors-textFaint'),
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
})

export const LogsClearButton = define('LogsClearButton', {
  base: 'button',
  background: theme('colors-border'),
  border: 'none',
  borderRadius: 4,
  padding: '4px 10px',
  fontSize: 11,
  fontWeight: 600,
  color: theme('colors-textMuted'),
  cursor: 'pointer',
  textTransform: 'uppercase',
  letterSpacing: '0.03em',
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
      color: theme('colors-text'),
    },
  },
})

export const LogsBody = define('LogsBody', {
  height: 200,
  overflow: 'auto',
  fontFamily: theme('fonts-mono'),
  fontSize: 12,
  lineHeight: 1.5,
})

export const LogEntry = define('LogEntry', {
  display: 'flex',
  gap: 8,
  padding: '2px 16px',
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
    },
  },
})

export const LogTimestamp = define('LogTimestamp', {
  color: theme('colors-textFaint'),
  flexShrink: 0,
})

export const LogApp = define('LogApp', {
  color: theme('colors-textMuted'),
  flexShrink: 0,
  minWidth: 80,
})

export const LogText = define('LogText', {
  color: theme('colors-text'),
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-all',
})

export const LogStatus = define('LogStatus', {
  variants: {
    success: { color: '#22c55e' },
    error: { color: '#ef4444' },
    warning: { color: '#f59e0b' },
  },
})