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,
  variants: {
    narrow: {
      gap: 12,
    },
  },
})

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,
  variants: {
    narrow: {
      padding: 12,
      gap: 8,
    },
  },
})

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

export const GaugeContainer = define('GaugeContainer', {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
})

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

export const GaugeValue = define('GaugeValue', {
  fontSize: 20,
  fontWeight: 'bold',
  fontFamily: theme('fonts-mono'),
  color: theme('colors-text'),
  marginTop: 20,
  marginLeft: 5,
})

// Unified Logs Section
export const LogsSection = define('LogsSection', {
  width: '100%',
  flex: 1,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column',
  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')}`,
  flexShrink: 0,
})

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 LogsTabs = define('LogsTabs', {
  display: 'flex',
  gap: 0,
})

export const LogsTab = define('LogsTab', {
  base: 'button',
  background: 'none',
  border: 'none',
  borderBottom: '2px solid transparent',
  padding: '0 8px 8px',
  fontSize: 11,
  fontWeight: 600,
  color: theme('colors-textFaint'),
  cursor: 'pointer',
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
  selectors: {
    '&:hover': {
      color: theme('colors-text'),
    },
  },
  variants: {
    active: {
      color: theme('colors-text'),
      borderBottomColor: theme('colors-text'),
    },
  },
})

export const LogsBody = define('LogsBody', {
  flex: 1,
  minHeight: 0,
  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'),
    },
  },
  variants: {
    narrow: {
      padding: '2px 8px',
    },
  },
})

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

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

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' },
  },
})

// App Tiles Grid
export const TileGrid = define('TileGrid', {
  width: '100%',
  maxWidth: 900,
  margin: '0 auto',
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
  gap: 20,
  variants: {
    narrow: { gridTemplateColumns: '1fr' },
  },
})

export const Tile = define('Tile', {
  base: 'a',
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  gap: 8,
  padding: '28px 20px 24px',
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  textDecoration: 'none',
  cursor: 'pointer',
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
      borderColor: theme('colors-textFaint'),
    },
  },
  variants: {
    narrow: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: '16px 20px',
      gap: 16,
    },
  },
})

export const TileIcon = define('TileIcon', {
  fontSize: 48,
  lineHeight: 1,
  userSelect: 'none',
})

export const TileName = define('TileName', {
  fontSize: 15,
  fontWeight: 600,
  color: theme('colors-text'),
  textAlign: 'center',
})

export const TilePort = define('TilePort', {
  fontFamily: theme('fonts-mono'),
  fontSize: 13,
  color: theme('colors-textFaint'),
})

export const TileStatus = define('TileStatus', {
  position: 'absolute',
  top: 8,
  right: 8,
  width: 2,
  height: 2,
  borderRadius: '50%',
  cursor: 'pointer',
  padding: 4,
  backgroundClip: 'content-box',
  variants: {
    state: {
      error: { background: theme('colors-statusInvalid') },
      invalid: { background: theme('colors-statusInvalid') },
      stopped: { background: theme('colors-statusStopped') },
      starting: { background: theme('colors-statusStarting') },
      running: { background: theme('colors-statusRunning') },
      stopping: { background: theme('colors-statusStarting') },
    },
  },
})