cinny/src/app/features/lotus/chatBackground.ts

import { CSSProperties } from 'react';
import { ChatBackground } from '../../state/settings';

export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [
  { value: 'none', label: 'None' },
  { value: 'blueprint', label: 'Blueprint' },
  { value: 'carbon', label: 'Carbon' },
  { value: 'stars', label: 'Stars' },
  { value: 'topographic', label: 'Topographic' },
  { value: 'herringbone', label: 'Herringbone' },
  { value: 'crosshatch', label: 'Crosshatch' },
  { value: 'chevron', label: 'Chevron' },
  { value: 'polka', label: 'Polka' },
  { value: 'triangles', label: 'Triangles' },
  { value: 'plaid', label: 'Plaid' },
];

const DARK: Record<ChatBackground, CSSProperties> = {
  none: {},

  blueprint: {
    backgroundColor: '#0a1628',
    backgroundImage: [
      'linear-gradient(rgba(100,149,237,0.14) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(100,149,237,0.14) 1px, transparent 1px)',
      'linear-gradient(rgba(100,149,237,0.05) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(100,149,237,0.05) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
  },

  carbon: {
    backgroundColor: '#0e0e0e',
    backgroundImage: [
      'repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 2px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '8px 8px',
  },

  stars: {
    backgroundColor: '#050510',
    backgroundImage: [
      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
    backgroundPosition: '0 0, 65px 32px, 32px 97px',
  },

  topographic: {
    backgroundColor: '#0f0f17',
    backgroundImage: [
      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(152,0,0,0.07) 31px, transparent 32px)',
      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(100,100,200,0.06) 26px, transparent 27px)',
      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(152,0,0,0.04) 46px, transparent 47px)',
    ].join(','),
  },

  herringbone: {
    backgroundColor: '#111118',
    backgroundImage: [
      'repeating-linear-gradient(60deg, rgba(180,160,210,0.08) 0, rgba(180,160,210,0.08) 1px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(120deg, rgba(180,160,210,0.08) 0, rgba(180,160,210,0.08) 1px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '20px 36px',
  },

  crosshatch: {
    backgroundColor: '#0f0f0f',
    backgroundImage: [
      'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
      'linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
  },

  // Interlocking zigzag stripes
  chevron: {
    backgroundColor: '#0f0f17',
    backgroundImage: [
      'linear-gradient(135deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
      'linear-gradient(225deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
      'linear-gradient(315deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
      'linear-gradient(45deg, rgba(180,160,210,0.1) 25%, transparent 25%)',
    ].join(','),
    backgroundSize: '20px 20px',
  },

  // Even dot grid
  polka: {
    backgroundColor: '#0e0e14',
    backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px)',
    backgroundSize: '28px 28px',
  },

  // Isometric triangle grid
  triangles: {
    backgroundColor: '#111118',
    backgroundImage: [
      'linear-gradient(60deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)',
      'linear-gradient(120deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)',
    ].join(','),
    backgroundSize: '40px 70px',
    backgroundPosition: '0 0, 20px 35px',
  },

  // Tartan-inspired crossing lines with accent colour
  plaid: {
    backgroundColor: '#0a1020',
    backgroundImage: [
      'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)',
      'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)',
      'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)',
      'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)',
    ].join(','),
  },
};

const LIGHT: Record<ChatBackground, CSSProperties> = {
  none: {},

  blueprint: {
    backgroundColor: '#eef3ff',
    backgroundImage: [
      'linear-gradient(rgba(50,100,220,0.16) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(50,100,220,0.16) 1px, transparent 1px)',
      'linear-gradient(rgba(50,100,220,0.06) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(50,100,220,0.06) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
  },

  carbon: {
    backgroundColor: '#efefef',
    backgroundImage: [
      'repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 2px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 2px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '8px 8px',
  },

  // Stars is intentionally always dark — it's a night-sky theme
  stars: {
    backgroundColor: '#050510',
    backgroundImage: [
      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
    backgroundPosition: '0 0, 65px 32px, 32px 97px',
  },

  topographic: {
    backgroundColor: '#faf8f5',
    backgroundImage: [
      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(100,60,60,0.09) 31px, transparent 32px)',
      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(60,60,130,0.07) 26px, transparent 27px)',
      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(100,60,60,0.05) 46px, transparent 47px)',
    ].join(','),
  },

  herringbone: {
    backgroundColor: '#f9f9f9',
    backgroundImage: [
      'repeating-linear-gradient(60deg, rgba(80,70,110,0.09) 0, rgba(80,70,110,0.09) 1px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(120deg, rgba(80,70,110,0.09) 0, rgba(80,70,110,0.09) 1px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '20px 36px',
  },

  crosshatch: {
    backgroundColor: '#ffffff',
    backgroundImage: [
      'linear-gradient(rgba(0,0,0,0.07) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(0,0,0,0.07) 1px, transparent 1px)',
      'linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
  },

  chevron: {
    backgroundColor: '#f9f8ff',
    backgroundImage: [
      'linear-gradient(135deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
      'linear-gradient(225deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
      'linear-gradient(315deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
      'linear-gradient(45deg, rgba(80,60,130,0.1) 25%, transparent 25%)',
    ].join(','),
    backgroundSize: '20px 20px',
  },

  polka: {
    backgroundColor: '#fafafa',
    backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.18) 2px, transparent 2px)',
    backgroundSize: '28px 28px',
  },

  triangles: {
    backgroundColor: '#f4f7ff',
    backgroundImage: [
      'linear-gradient(60deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)',
      'linear-gradient(120deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)',
    ].join(','),
    backgroundSize: '40px 70px',
    backgroundPosition: '0 0, 20px 35px',
  },

  plaid: {
    backgroundColor: '#f5f0ff',
    backgroundImage: [
      'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)',
      'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)',
      'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)',
      'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)',
    ].join(','),
  },
};

export const getChatBg = (bg: ChatBackground, isDark: boolean): CSSProperties =>
  isDark ? DARK[bg] : LIGHT[bg];