import { CSSProperties } from 'react';
import { ChatBgVariants } from './types';

// crosshatch — fine pen-and-ink engraving, like a banknote guilloché.
// Three hatch directions (right-leaning, left-leaning, near-horizontal cross)
// are layered at low opacity so the eye reads a woven ink texture rather than
// discrete stripes. Each direction uses a slightly different pitch so the
// combined pattern never lines up into a coarse moire, and a barely-there
// diagonal tonal gradient lends etched depth.
//
// Seamless tiling: each hatch is a `repeating-linear-gradient`, which repeats
// infinitely by definition, so the layers are left at `backgroundSize: auto`
// and tile with no visible seam at any element size (constraining a diagonal
// repeat to a small square would clip it mid-period and create a seam). The
// tonal wash is a single non-repeating gradient stretched to `cover`.
//
// Opacities are kept in the 0.02–0.05 range so the texture is felt, not read —
// crisp message text sits comfortably above it in both themes (WCAG-AA safe).

const dark: CSSProperties = {
  // near-black base with a whisper of cool blue so silver ink reads as engraving
  backgroundColor: 'oklch(0.16 0.01 255)',
  backgroundImage: [
    // faint tonal gradient — top-left slightly lifted for etched depth
    'linear-gradient(135deg, oklch(0.20 0.012 255 / 0.5) 0%, oklch(0.15 0.01 255 / 0) 55%, oklch(0.14 0.008 260 / 0.45) 100%)',
    // primary hatch, right-leaning fine lines (cool silver ink), ~9px pitch
    'repeating-linear-gradient(45deg, oklch(0.75 0.02 250 / 0.05) 0, oklch(0.75 0.02 250 / 0.05) 0.75px, transparent 0.75px, transparent 9px)',
    // secondary hatch, left-leaning — the cross of the crosshatch
    'repeating-linear-gradient(135deg, oklch(0.75 0.02 250 / 0.045) 0, oklch(0.75 0.02 250 / 0.045) 0.75px, transparent 0.75px, transparent 9px)',
    // tertiary hatch, right-leaning at a denser pitch for engraved richness
    'repeating-linear-gradient(45deg, oklch(0.78 0.018 250 / 0.02) 0, oklch(0.78 0.018 250 / 0.02) 0.5px, transparent 0.5px, transparent 4.5px)',
    // quaternary near-horizontal fill line, very faint, weaves the mesh together
    'repeating-linear-gradient(20deg, oklch(0.72 0.015 255 / 0.018) 0, oklch(0.72 0.015 255 / 0.018) 0.5px, transparent 0.5px, transparent 13px)',
  ].join(','),
  backgroundSize: 'cover, auto, auto, auto, auto',
};

const light: CSSProperties = {
  // warm paper base — graphite ink on cream stock
  backgroundColor: 'oklch(0.975 0.006 85)',
  backgroundImage: [
    // faint tonal wash — soft warm depth for aged-paper feel
    'linear-gradient(135deg, oklch(0.94 0.008 85 / 0.55) 0%, oklch(0.98 0.005 85 / 0) 55%, oklch(0.93 0.01 80 / 0.5) 100%)',
    // primary hatch, right-leaning graphite lines, ~9px pitch
    'repeating-linear-gradient(45deg, oklch(0.42 0.01 265 / 0.055) 0, oklch(0.42 0.01 265 / 0.055) 0.75px, transparent 0.75px, transparent 9px)',
    // secondary hatch, left-leaning — the cross
    'repeating-linear-gradient(135deg, oklch(0.42 0.01 265 / 0.05) 0, oklch(0.42 0.01 265 / 0.05) 0.75px, transparent 0.75px, transparent 9px)',
    // tertiary denser right-leaning hatch for engraved fineness
    'repeating-linear-gradient(45deg, oklch(0.40 0.012 265 / 0.025) 0, oklch(0.40 0.012 265 / 0.025) 0.5px, transparent 0.5px, transparent 4.5px)',
    // quaternary near-horizontal weave line, barely-there
    'repeating-linear-gradient(20deg, oklch(0.45 0.01 260 / 0.022) 0, oklch(0.45 0.01 260 / 0.022) 0.5px, transparent 0.5px, transparent 13px)',
  ].join(','),
  backgroundSize: 'cover, auto, auto, auto, auto',
};

export const crosshatch: ChatBgVariants = { dark, light };