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

// polka — a grown-up polka dot: embossed leather / fine letterpress stationery,
// not childish spots. Each dot is not a flat circle but a soft radial "bump":
// an off-centre highlight fading into a faint recessed shadow, so it reads as a
// gently raised (or debossed) node catching a single top-left light. Two subtly
// different dot sizes are staggered on a half-tile offset for a refined,
// hand-set rhythm, and a large single vignette gradient adds quiet depth toward
// the edges.
//
// SEAMLESS TILING: both dot layers repeat on the SAME 44px cell (backgroundSize
// 44px 44px). The larger "primary" dots sit at 0 0; the smaller "secondary"
// dots are shifted by exactly half a tile (22px 22px) so they fall in the gaps
// of the primary lattice — a true staggered brick layout that wraps with no
// seam. Each radial gradient's highlight/shadow rings are fully enclosed well
// inside its cell, so nothing is clipped at a tile boundary. The vignette is a
// single non-repeating gradient covering the whole element ('cover').
//
// SUBTLETY: dot opacities live in the 0.03–0.10 range and every dot fades to
// transparent over a soft edge (no hard rim), so the surface is felt as tactile
// grain rather than read as dots. Crisp message text sits comfortably above it
// in both themes (WCAG-AA safe).

const dark: CSSProperties = {
  // deep espresso base — warm, near-black brown
  backgroundColor: 'oklch(0.19 0.018 65)',
  backgroundImage: [
    // vignette — corners settle darker so the field feels like supple leather
    'radial-gradient(120% 120% at 50% 40%, oklch(0.22 0.02 65 / 0.5) 0%, oklch(0.19 0.018 65 / 0) 55%, oklch(0.15 0.015 60 / 0.55) 100%)',
    // PRIMARY dot — larger raised pearl. Top-left warm highlight, then the body,
    // then a whisper of shadow at the lower-right rim for embossed dimension.
    'radial-gradient(circle at 42% 40%, oklch(0.82 0.02 80 / 0.10) 0%, oklch(0.80 0.02 80 / 0.075) 22%, oklch(0.55 0.02 70 / 0.045) 44%, oklch(0.12 0.01 60 / 0.05) 62%, transparent 72%)',
    // SECONDARY dot — smaller, staggered into the gaps, fainter for depth layering
    'radial-gradient(circle at 42% 40%, oklch(0.82 0.02 80 / 0.075) 0%, oklch(0.78 0.02 80 / 0.05) 26%, oklch(0.50 0.02 70 / 0.03) 52%, oklch(0.12 0.01 60 / 0.04) 70%, transparent 82%)',
  ].join(','),
  // primary dots ~9px, secondary ~6px, both on the same 44px lattice
  backgroundSize: 'cover, 44px 44px, 44px 44px',
  // secondary offset by half a tile => staggered brick lattice
  backgroundPosition: 'center, 0 0, 22px 22px',
};

const light: CSSProperties = {
  // cream stationery base — warm off-white paper stock
  backgroundColor: 'oklch(0.975 0.008 85)',
  backgroundImage: [
    // vignette — a gentle warm settling toward the edges, like heavy cotton paper
    'radial-gradient(120% 120% at 50% 40%, oklch(0.99 0.006 85 / 0.5) 0%, oklch(0.975 0.008 85 / 0) 55%, oklch(0.945 0.012 80 / 0.55) 100%)',
    // PRIMARY dot — soft taupe deboss. Faint paper highlight at top-left, taupe
    // body, then a soft shadow lower-right so each dot reads pressed into the sheet.
    'radial-gradient(circle at 42% 40%, oklch(0.99 0.004 85 / 0.35) 0%, oklch(0.72 0.02 70 / 0.075) 30%, oklch(0.60 0.025 65 / 0.09) 50%, oklch(0.55 0.025 60 / 0.05) 66%, transparent 76%)',
    // SECONDARY dot — smaller, staggered, lighter for a two-tier hand-set rhythm
    'radial-gradient(circle at 42% 40%, oklch(0.99 0.004 85 / 0.28) 0%, oklch(0.74 0.02 70 / 0.05) 34%, oklch(0.62 0.025 65 / 0.06) 56%, oklch(0.56 0.025 60 / 0.035) 72%, transparent 84%)',
  ].join(','),
  backgroundSize: 'cover, 44px 44px, 44px 44px',
  backgroundPosition: 'center, 0 0, 22px 22px',
};

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