import { ChatBgVariants } from './types';

// blueprint — an engineering / architectural drafting sheet.
//
// Layers (painted top-to-bottom):
//   1. SVG draftsman tick-marks + a centred crosshair accent (96px tile — lands
//      exactly on the major grid; corner quarter-arms tile into a full "+" on
//      every major intersection).
//   2. Major grid lines (heavier) — 96px.
//   3. Minor grid lines (fine, fainter) — 16px  (96 = 6 × 16, so it nests
//      seamlessly inside the major grid with no beat/moiré).
//   4. A soft radial vignette + a gentle sheet-glow so the surface reads like a
//      real drafting sheet with subtle dimension rather than a flat tile.
//
// Everything is kept at low alpha (~0.03–0.16) so the motif is felt, not read:
// crisp message text sits comfortably above it in both themes (WCAG-AA safe).

const DARK_TICKS =
  'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cg%20stroke%3D%22oklch%280.72%200.11%20230%20%2F%200.32%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200%20H7%20M0%200%20V7%22%2F%3E%3Cpath%20d%3D%22M96%200%20H89%20M96%200%20V7%22%2F%3E%3Cpath%20d%3D%22M0%2096%20H7%20M0%2096%20V89%22%2F%3E%3Cpath%20d%3D%22M96%2096%20H89%20M96%2096%20V89%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.72%200.11%20230%20%2F%200.18%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M48%2044%20V52%20M44%2048%20H52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';

const LIGHT_TICKS =
  'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cg%20stroke%3D%22oklch%280.48%200.13%20250%20%2F%200.38%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200%20H7%20M0%200%20V7%22%2F%3E%3Cpath%20d%3D%22M96%200%20H89%20M96%200%20V7%22%2F%3E%3Cpath%20d%3D%22M0%2096%20H7%20M0%2096%20V89%22%2F%3E%3Cpath%20d%3D%22M96%2096%20H89%20M96%2096%20V89%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.48%200.13%20250%20%2F%200.22%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M48%2044%20V52%20M44%2048%20H52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';

export const blueprint: ChatBgVariants = {
  // Cyan-blue lines on a deep navy sheet.
  dark: {
    backgroundColor: 'oklch(0.22 0.05 250)',
    backgroundImage: [
      // 1. draftsman ticks + centre crosshair
      DARK_TICKS,
      // 4a. sheet-glow: a faint cooler highlight drifting off the top-left,
      //     giving the flat navy some dimension.
      'radial-gradient(120% 120% at 18% 8%, oklch(0.30 0.06 245 / 0.55) 0%, transparent 55%)',
      // 4b. vignette: gently darkens the corners like a drafting sheet edge.
      'radial-gradient(140% 140% at 50% 42%, transparent 58%, oklch(0.14 0.04 255 / 0.5) 100%)',
      // 2. major grid (heavier)
      'linear-gradient(oklch(0.72 0.12 230 / 0.13) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.72 0.12 230 / 0.13) 1px, transparent 1px)',
      // 3. minor grid (fine, fainter)
      'linear-gradient(oklch(0.72 0.12 230 / 0.05) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.72 0.12 230 / 0.05) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: [
      '96px 96px', // ticks
      '100% 100%', // sheet-glow
      '100% 100%', // vignette
      '96px 96px', // major V
      '96px 96px', // major H
      '16px 16px', // minor V
      '16px 16px', // minor H
    ].join(','),
    // All layers share the default top-left (0 0) origin so the tick tile, the
    // 96px major grid and the 16px minor grid stay phase-locked (96 = 6 × 16) —
    // no drift, no visible seams. (A per-layer `center` would let the differently
    // sized tiles center independently and fall out of alignment.)
  },

  // Blue lines on a cool paper-white sheet.
  light: {
    backgroundColor: 'oklch(0.97 0.01 240)',
    backgroundImage: [
      LIGHT_TICKS,
      // sheet-glow: a hint of brighter paper toward the top-left.
      'radial-gradient(120% 120% at 18% 8%, oklch(0.99 0.008 240 / 0.7) 0%, transparent 55%)',
      // vignette: soft cool shading into the corners.
      'radial-gradient(140% 140% at 50% 42%, transparent 60%, oklch(0.90 0.02 245 / 0.55) 100%)',
      // major grid (heavier)
      'linear-gradient(oklch(0.48 0.13 250 / 0.15) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.48 0.13 250 / 0.15) 1px, transparent 1px)',
      // minor grid (fine, fainter)
      'linear-gradient(oklch(0.48 0.13 250 / 0.06) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.48 0.13 250 / 0.06) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: [
      '96px 96px',
      '100% 100%',
      '100% 100%',
      '96px 96px',
      '96px 96px',
      '16px 16px',
      '16px 16px',
    ].join(','),
    // Shared top-left origin keeps the tick tile and both grids phase-locked.
  },
};