import { ChatBgVariants } from './types';

// tactical — a military tactical display / recon coordinate grid (MGRS-style).
//
// The motif is a fine grid nested inside bold sector squares, with a reticle
// crosshair (arms + ring) at every sector intersection, small stencil corner
// brackets inside each sector, and coordinate tick-marks along the sector edges
// — a convincing mil-spec map overlay rather than a plain dot grid.
//
// Layers (painted top-to-bottom):
//   1. SVG reticle/stencil tile (128px). Corner arms + quarter-ring arcs radiate
//      from each of the four tile corners, so four neighbouring tiles combine
//      into ONE full crosshair "+" with a full ring at every sector intersection.
//      The tile also carries L-shaped stencil brackets, edge coordinate ticks and
//      a micro centre reticle. Because every mark is anchored to the 128px tile
//      lattice, it stays phase-locked to the grids below — no seams, no drift.
//   2. Sector lines (heavier)                — 128px.
//   3. Fine recon grid (fainter)             — 16px  (128 = 8 × 16, so it nests
//      exactly inside every sector with no beat/moiré).
//   4. A soft scan vignette that keeps the CENTRE calm and clear for text while
//      letting the grid fall away slightly toward the edges — dimension without
//      contrast.
//
// All strokes sit at low alpha (~0.03–0.30 on 1px marks) so the display is felt,
// not read: crisp message text stays comfortably WCAG-AA legible in both themes.
// A single shared top-left (0 0) origin keeps the reticle tile, the 128px sector
// grid and the 16px fine grid all in phase.

const DARK_RETICLE =
  'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cg%20stroke%3D%22oklch%280.72%200.13%2085%20%2F%200.30%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H14%20M0%200%20V14%22%2F%3E%3Cpath%20d%3D%22M128%200%20H114%20M128%200%20V14%22%2F%3E%3Cpath%20d%3D%22M0%20128%20H14%20M0%20128%20V114%22%2F%3E%3Cpath%20d%3D%22M128%20128%20H114%20M128%20128%20V114%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%220%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22128%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.72%200.10%2095%20%2F%200.22%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%2020%20V10%20H20%22%2F%3E%3Cpath%20d%3D%22M118%2020%20V10%20H108%22%2F%3E%3Cpath%20d%3D%22M10%20108%20V118%20H20%22%2F%3E%3Cpath%20d%3D%22M118%20108%20V118%20H108%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.72%200.10%2095%20%2F%200.22%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M64%200%20V6%20M64%20128%20V122%20M0%2064%20H6%20M128%2064%20H122%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.72%200.13%2085%20%2F%200.30%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M64%2058%20V70%20M58%2064%20H70%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';

const LIGHT_RETICLE =
  'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%3E%3Cg%20stroke%3D%22oklch%280.45%200.07%20120%20%2F%200.40%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20H14%20M0%200%20V14%22%2F%3E%3Cpath%20d%3D%22M128%200%20H114%20M128%200%20V14%22%2F%3E%3Cpath%20d%3D%22M0%20128%20H14%20M0%20128%20V114%22%2F%3E%3Cpath%20d%3D%22M128%20128%20H114%20M128%20128%20V114%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%220%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22128%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22128%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.42%200.05%20130%20%2F%200.28%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%2020%20V10%20H20%22%2F%3E%3Cpath%20d%3D%22M118%2020%20V10%20H108%22%2F%3E%3Cpath%20d%3D%22M10%20108%20V118%20H20%22%2F%3E%3Cpath%20d%3D%22M118%20108%20V118%20H108%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.42%200.05%20130%20%2F%200.28%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M64%200%20V6%20M64%20128%20V122%20M0%2064%20H6%20M128%2064%20H122%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.45%200.07%20120%20%2F%200.40%29%22%20stroke-width%3D%221%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M64%2058%20V70%20M58%2064%20H70%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';

export const tactical: ChatBgVariants = {
  // Phosphor amber/olive lines glowing on a near-black recon display.
  dark: {
    backgroundColor: 'oklch(0.17 0.012 95)',
    backgroundImage: [
      // 1. reticles + stencil brackets + coordinate ticks
      DARK_RETICLE,
      // 4. scan vignette: keeps the centre calm, eases grid contrast at edges.
      'radial-gradient(135% 120% at 50% 46%, transparent 52%, oklch(0.11 0.01 100 / 0.55) 100%)',
      // a faint phosphor bloom drifting off the top so the black isn't dead flat.
      'radial-gradient(120% 90% at 50% 0%, oklch(0.24 0.03 90 / 0.45) 0%, transparent 60%)',
      // 2. sector lines (heavier)
      'linear-gradient(oklch(0.72 0.13 85 / 0.11) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.72 0.13 85 / 0.11) 1px, transparent 1px)',
      // 3. fine recon grid (fainter)
      'linear-gradient(oklch(0.72 0.11 90 / 0.045) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.72 0.11 90 / 0.045) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: [
      '128px 128px', // reticle tile
      '100% 100%', // vignette
      '100% 100%', // phosphor bloom
      '128px 128px', // sector V
      '128px 128px', // sector H
      '16px 16px', // fine V
      '16px 16px', // fine H
    ].join(','),
    // Shared top-left origin: reticle tile + 128px sector grid + 16px fine grid
    // (128 = 8 × 16) stay phase-locked, so corner arms land on sector crossings.
  },

  // Olive-graphite recon grid printed on cool tactical paper.
  light: {
    backgroundColor: 'oklch(0.95 0.008 120)',
    backgroundImage: [
      LIGHT_RETICLE,
      // scan vignette: gentle cool shading into the corners, calm centre.
      'radial-gradient(135% 120% at 50% 46%, transparent 56%, oklch(0.86 0.02 125 / 0.5) 100%)',
      // paper sheen toward the top so the surface reads like a printed sheet.
      'radial-gradient(120% 90% at 50% 0%, oklch(0.98 0.006 120 / 0.7) 0%, transparent 60%)',
      // sector lines (heavier)
      'linear-gradient(oklch(0.45 0.07 120 / 0.14) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.45 0.07 120 / 0.14) 1px, transparent 1px)',
      // fine recon grid (fainter)
      'linear-gradient(oklch(0.45 0.06 125 / 0.055) 1px, transparent 1px)',
      'linear-gradient(90deg, oklch(0.45 0.06 125 / 0.055) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: [
      '128px 128px',
      '100% 100%',
      '100% 100%',
      '128px 128px',
      '128px 128px',
      '16px 16px',
      '16px 16px',
    ].join(','),
    // Shared top-left origin keeps the reticle tile and both grids phase-locked.
  },
};
