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

// topographic — an elegant contour / elevation map.
//
// The motif is a delicate cartographic contour survey: nested rings suggest two
// gentle "peaks" and a shallow "valley", drawn with occasional heavier "index
// contour" lines for authenticity, all floating over a soft tonal wash. It is
// tuned to be *felt, not read* — line opacities sit well under legibility
// thresholds so crisp message text stays comfortably WCAG-AA in both themes.
//
// SEAMLESS TILING
// Each contour system is a `repeating-radial-gradient` whose ring period P is a
// clean divisor of its `backgroundSize` tile. A repeating-radial-gradient tiles
// seamlessly only when the tile edge falls on a whole number of ring periods, so
// every layer below uses tile = N * P. Peak A's fine (32px) and index (128px)
// layers share one 256px tile (256 = 8*32 = 2*128) AND one center, so the heavy
// index lines land exactly on every 4th fine ring — a true index contour, never
// drifting out of register. Peak B tiles 288 = 12*24; the valley tiles 384 =
// 8*48. The tonal washes/vignette are single non-repeating gradients sized to
// the same tiles, so nothing shows a visible seam.

const dark: CSSProperties = {
  backgroundColor: 'oklch(0.205 0.018 235)',
  backgroundImage: [
    // Peak A — fine contour lines (soft teal), 32px period.
    'repeating-radial-gradient(circle at 27% 34%, transparent 0, transparent 26px,' +
      ' oklch(0.62 0.055 190 / 0.09) 27px, oklch(0.62 0.055 190 / 0.09) 28px, transparent 29px, transparent 32px)',
    // Peak A — index (heavier) contour every 4th ring, 128px period.
    'repeating-radial-gradient(circle at 27% 34%, transparent 0, transparent 122px,' +
      ' oklch(0.66 0.06 190 / 0.10) 123px, oklch(0.66 0.06 190 / 0.10) 125px, transparent 126px, transparent 128px)',
    // Peak B — fine contour lines (cooler sage-teal), 24px period.
    'repeating-radial-gradient(circle at 78% 72%, transparent 0, transparent 19px,' +
      ' oklch(0.60 0.05 200 / 0.07) 20px, oklch(0.60 0.05 200 / 0.07) 21px, transparent 22px, transparent 24px)',
    // Valley — broad shallow rings (very faint), 48px period.
    'repeating-radial-gradient(circle at 52% 8%, transparent 0, transparent 42px,' +
      ' oklch(0.58 0.045 195 / 0.05) 43px, oklch(0.58 0.045 195 / 0.05) 44px, transparent 45px, transparent 48px)',
    // Tonal wash — lifts the "peaks", sinks the corners for depth.
    'radial-gradient(circle at 27% 34%, oklch(0.26 0.03 200 / 0.55) 0%, transparent 46%)',
    'radial-gradient(circle at 78% 72%, oklch(0.24 0.028 205 / 0.45) 0%, transparent 44%)',
    // Vignette — soft edge darkening keeps the field calm behind text.
    'radial-gradient(ellipse 120% 130% at 50% 42%, transparent 58%, oklch(0.15 0.02 235 / 0.55) 100%)',
  ].join(','),
  backgroundSize:
    '256px 256px, 256px 256px, 288px 288px, 384px 384px, 100% 100%, 100% 100%, 100% 100%',
};

const light: CSSProperties = {
  backgroundColor: 'oklch(0.965 0.008 85)',
  backgroundImage: [
    // Peak A — fine contour lines (warm graphite/sand), 32px period.
    'repeating-radial-gradient(circle at 27% 34%, transparent 0, transparent 26px,' +
      ' oklch(0.45 0.03 70 / 0.08) 27px, oklch(0.45 0.03 70 / 0.08) 28px, transparent 29px, transparent 32px)',
    // Peak A — index (heavier) contour every 4th ring, 128px period.
    'repeating-radial-gradient(circle at 27% 34%, transparent 0, transparent 122px,' +
      ' oklch(0.40 0.035 68 / 0.10) 123px, oklch(0.40 0.035 68 / 0.10) 125px, transparent 126px, transparent 128px)',
    // Peak B — fine contour lines (soft sage-graphite), 24px period.
    'repeating-radial-gradient(circle at 78% 72%, transparent 0, transparent 19px,' +
      ' oklch(0.47 0.028 120 / 0.06) 20px, oklch(0.47 0.028 120 / 0.06) 21px, transparent 22px, transparent 24px)',
    // Valley — broad shallow rings (very faint), 48px period.
    'repeating-radial-gradient(circle at 52% 8%, transparent 0, transparent 42px,' +
      ' oklch(0.46 0.025 75 / 0.045) 43px, oklch(0.46 0.025 75 / 0.045) 44px, transparent 45px, transparent 48px)',
    // Tonal wash — warm paper highlights over the "peaks".
    'radial-gradient(circle at 27% 34%, oklch(0.985 0.012 85 / 0.60) 0%, transparent 46%)',
    'radial-gradient(circle at 78% 72%, oklch(0.945 0.014 95 / 0.45) 0%, transparent 44%)',
    // Vignette — feather the edges to a slightly deeper sand for depth.
    'radial-gradient(ellipse 120% 130% at 50% 42%, transparent 58%, oklch(0.90 0.016 80 / 0.45) 100%)',
  ].join(','),
  backgroundSize:
    '256px 256px, 256px 256px, 288px 288px, 384px 384px, 100% 100%, 100% 100%, 100% 100%',
};

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