import { globalStyle, keyframes, style } from '@vanilla-extract/css';

const glitch1 = keyframes({
  '0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
  '92%':  { clipPath: 'inset(15% 0 72% 0)', transform: 'skewX(-4deg)' },
  '94%':  { clipPath: 'inset(54% 0 22% 0)', transform: 'skewX(3deg)' },
  '96%':  { clipPath: 'inset(30% 0 48% 0)', transform: 'skewX(-2deg)' },
});

const glitch2 = keyframes({
  '0%, 90%, 100%': { clipPath: 'inset(0)', transform: 'skewX(0)' },
  '92%':  { clipPath: 'inset(60% 0 8%  0)', transform: 'skewX(3deg)' },
  '94%':  { clipPath: 'inset(8%  0 68% 0)', transform: 'skewX(-3deg)' },
  '96%':  { clipPath: 'inset(42% 0 38% 0)', transform: 'skewX(1deg)' },
});

export const lotusTerminalBodyClass = style({
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
  letterSpacing: '0.02em',
  // Dot-grid background — TDS exact (on body since we're scoped to body class)
  backgroundColor: '#030508',
  backgroundImage: 'radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px)',
  backgroundSize: '28px 28px',
  vars: {
    // Backgrounds
    '--lt-bg-primary':   '#030508',
    '--lt-bg-secondary': '#060c14',
    '--lt-bg-tertiary':  '#0d1520',
    '--lt-bg-card':      '#07101a',
    '--lt-bg-terminal':  '#010304',
    // Accent — Orange
    '--lt-accent-orange':        '#FF6B00',
    '--lt-accent-orange-bright': '#FF8C2B',
    '--lt-accent-orange-dim':    'rgba(255,107,0,0.12)',
    '--lt-accent-orange-border': 'rgba(255,107,0,0.35)',
    // Accent — Amber
    '--lt-accent-amber':     '#FFB300',
    '--lt-accent-amber-dim': 'rgba(255,179,0,0.10)',
    // Accent — Cyan
    '--lt-accent-cyan':        '#00D4FF',
    '--lt-accent-cyan-bright': '#33DFFF',
    '--lt-accent-cyan-dim':    'rgba(0,212,255,0.10)',
    '--lt-accent-cyan-border': 'rgba(0,212,255,0.22)',
    // Accent — Green
    '--lt-accent-green':        '#00FF88',
    '--lt-accent-green-bright': '#33FFAA',
    '--lt-accent-green-dim':    'rgba(0,255,136,0.10)',
    '--lt-accent-green-border': 'rgba(0,255,136,0.22)',
    // Accent — Red
    '--lt-accent-red':     '#FF2D55',
    '--lt-accent-red-dim': 'rgba(255,45,85,0.12)',
    // Accent — Gold
    '--lt-accent-gold':     '#FFD700',
    '--lt-accent-gold-dim': 'rgba(255,215,0,0.10)',
    // Accent — Purple
    '--lt-accent-purple':     '#BF5FFF',
    '--lt-accent-purple-dim': 'rgba(191,95,255,0.10)',
    // Text
    '--lt-text-primary':   '#c4d9ee',
    '--lt-text-secondary': '#7fa3bf',
    '--lt-text-muted':     '#3e607a',
    '--lt-text-dim':       '#1e3347',
    // Borders
    '--lt-border-color':     'rgba(0,212,255,0.16)',
    '--lt-border-color-hi':  '#00D4FF',
    '--lt-border-color-dim': 'rgba(0,212,255,0.07)',
    // Glows — text
    '--lt-glow-orange':        '0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55)',
    '--lt-glow-orange-intense':'0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45)',
    '--lt-glow-cyan':          '0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45)',
    '--lt-glow-cyan-intense':  '0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35)',
    '--lt-glow-green':         '0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45)',
    '--lt-glow-green-intense': '0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35)',
    '--lt-glow-amber':         '0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40)',
    '--lt-glow-amber-intense': '0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45)',
    '--lt-glow-red':           '0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45)',
    // Glows — box
    '--lt-box-glow-orange': '0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08)',
    '--lt-box-glow-cyan':   '0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06)',
    '--lt-box-glow-green':  '0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06)',
    '--lt-box-glow-red':    '0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08)',
    '--lt-box-glow-amber':  '0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06)',
    // Fonts
    '--lt-font-mono':    "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
    '--lt-font-display': "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
    '--lt-font-crt':     "'VT323', 'Courier New', monospace",
  } as any,
});

// Font on all descendants
globalStyle(`body.${lotusTerminalBodyClass} *`, {
  fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace",
});

// Scanlines — EXACT from TDS body::before
globalStyle(`body.${lotusTerminalBodyClass}::before`, {
  content: "''",
  position: 'fixed',
  inset: 0,
  background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 3px)',
  pointerEvents: 'none',
  zIndex: 9999,
});

// Vignette — EXACT from TDS body::after
globalStyle(`body.${lotusTerminalBodyClass}::after`, {
  content: "''",
  position: 'fixed',
  inset: 0,
  background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.60) 100%)',
  pointerEvents: 'none',
  zIndex: 9998,
});

// Orange caret
globalStyle(`body.${lotusTerminalBodyClass} input, body.${lotusTerminalBodyClass} textarea`, {
  caretColor: '#FF6B00',
});

// Glitch class support
globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch`, { position: 'relative' });

globalStyle(
  `body.${lotusTerminalBodyClass} .lt-glitch::before, body.${lotusTerminalBodyClass} .lt-glitch::after`,
  {
    content: 'attr(data-text)' as any,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    overflow: 'hidden',
  }
);

globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::before`, {
  color: '#00D4FF',
  opacity: 0.65,
  animationName: glitch1,
  animationDuration: '4s',
  animationIterationCount: 'infinite',
});

globalStyle(`body.${lotusTerminalBodyClass} .lt-glitch::after`, {
  color: '#FF6B00',
  animationName: glitch2,
  animationDuration: '4s',
  animationIterationCount: 'infinite',
});

// Scrollbar styling — matching TDS
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar`, { width: '6px', height: '6px' });
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, { background: '#030508' });
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
  background: 'rgba(0,212,255,0.25)',
  borderRadius: '3px',
});
globalStyle(`body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`, {
  background: 'rgba(0,212,255,0.50)',
});