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%',
  maxWidth: 800,
  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' },
  },
})

// URL List
export const UrlLeft = define('UrlLeft', {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  minWidth: 0,
})

export const UrlLink = define('UrlLink', {
  base: 'a',
  color: theme('colors-link'),
  textDecoration: 'none',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  selectors: {
    '&:hover': { textDecoration: 'underline' },
  },
})

export const UrlList = define('UrlList', {
  width: '100%',
  minWidth: 400,
  maxWidth: 800,
  display: 'flex',
  flexDirection: 'column',
  background: theme('colors-bgElement'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),
  overflow: 'hidden',
})

export const UrlPort = define('UrlPort', {
  fontFamily: theme('fonts-mono'),
  fontSize: 12,
  color: theme('colors-textFaint'),
  flexShrink: 0,
})

export const UrlRow = define('UrlRow', {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '10px 16px',
  fontFamily: theme('fonts-mono'),
  fontSize: 13,
  selectors: {
    '&:hover': {
      background: theme('colors-bgHover'),
    },
    '&:not(:last-child)': {
      borderBottom: `1px solid ${theme('colors-border')}`,
    },
  },
})