;; @client — send all define forms to browser for client-side use.
;; CSSX — computed CSS from s-expressions.
;;
;; Tailwind-style utility component using spread + collect primitives.
;; Use as a child of any element — injects classes onto the parent:
;;
;;   (div (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold")
;;     "content")
;;
;;   (button (~cssx/tw "hover:bg-rose-500 md:text-xl")
;;     "click me")
;;
;; Each token becomes a deterministic class + JIT CSS rule.
;; Rules are collected into the "cssx" bucket, flushed once by ~cssx/flush.
;; No wrapper elements, no per-element <style> tags.
;;
;; Reusable style variables:
;;   (define fancy (~cssx/tw "font-bold text-violet-700 text-4xl"))
;;   (div fancy "styled content")
;;
;; This is one instance of the CSSX component pattern — other styling
;; components are possible with different vocabulary.

;; =========================================================================
;; Colour data — hue/saturation bases + shade-to-lightness curve
;; =========================================================================

(define colour-bases
  {"violet"  {"h" 263 "s" 70}
   "purple"  {"h" 271 "s" 81}
   "indigo"  {"h" 239 "s" 84}
   "blue"    {"h" 217 "s" 91}
   "sky"     {"h" 199 "s" 89}
   "cyan"    {"h" 188 "s" 94}
   "teal"    {"h" 173 "s" 80}
   "emerald" {"h" 160 "s" 84}
   "green"   {"h" 142 "s" 71}
   "lime"    {"h" 84  "s" 78}
   "yellow"  {"h" 48  "s" 96}
   "amber"   {"h" 38  "s" 92}
   "orange"  {"h" 25  "s" 95}
   "red"     {"h" 0   "s" 72}
   "rose"    {"h" 350 "s" 89}
   "pink"    {"h" 330 "s" 81}
   "stone"   {"h" 25  "s" 6}
   "slate"   {"h" 215 "s" 16}
   "gray"    {"h" 220 "s" 9}
   "zinc"    {"h" 240 "s" 5}
   "neutral" {"h" 0   "s" 0}
   "white"   {"h" 0   "s" 0}
   "black"   {"h" 0   "s" 0}})

(define lerp (fn (a b t) (+ a (* t (- b a)))))

(define shade-to-lightness
  (fn (shade)
    (cond
      (<= shade 50)  (lerp 100 97 (/ shade 50))
      (<= shade 100) (lerp 97 93 (/ (- shade 50) 50))
      (<= shade 200) (lerp 93 87 (/ (- shade 100) 100))
      (<= shade 300) (lerp 87 77 (/ (- shade 200) 100))
      (<= shade 400) (lerp 77 64 (/ (- shade 300) 100))
      (<= shade 500) (lerp 64 53 (/ (- shade 400) 100))
      (<= shade 600) (lerp 53 45 (/ (- shade 500) 100))
      (<= shade 700) (lerp 45 38 (/ (- shade 600) 100))
      (<= shade 800) (lerp 38 30 (/ (- shade 700) 100))
      (<= shade 900) (lerp 30 21 (/ (- shade 800) 100))
      (<= shade 950) (lerp 21 13 (/ (- shade 900) 50))
      true 13)))

(define colour
  (fn (name shade)
    (let ((base (get colour-bases name)))
      (if (nil? base)
        name
        (let ((h (get base "h"))
              (s (get base "s"))
              (l (shade-to-lightness shade)))
          (str "hsl(" h "," s "%," (round l) "%)"))))))

;; =========================================================================
;; Lookup tables — all the value vocabularies
;; =========================================================================

;; Colour property shorthands → CSS property name
(define cssx-colour-props
  {"bg"     "background-color"
   "text"   "color"
   "border" "border-color"})

;; Spacing property shorthands → CSS declaration template ({v} = computed value)
(define cssx-spacing-props
  {"p"  "padding:{v}"
   "px" "padding-left:{v};padding-right:{v}"
   "py" "padding-top:{v};padding-bottom:{v}"
   "pt" "padding-top:{v}"
   "pb" "padding-bottom:{v}"
   "pl" "padding-left:{v}"
   "pr" "padding-right:{v}"
   "m"  "margin:{v}"
   "mx" "margin-left:{v};margin-right:{v}"
   "my" "margin-top:{v};margin-bottom:{v}"
   "mt" "margin-top:{v}"
   "mb" "margin-bottom:{v}"
   "ml" "margin-left:{v}"
   "mr" "margin-right:{v}"})

;; Named font sizes (Tailwind v3 scale)
(define cssx-sizes
  {"xs"   "font-size:0.75rem;line-height:1rem"
   "sm"   "font-size:0.875rem;line-height:1.25rem"
   "base" "font-size:1rem;line-height:1.5rem"
   "lg"   "font-size:1.125rem;line-height:1.75rem"
   "xl"   "font-size:1.25rem;line-height:1.75rem"
   "2xl"  "font-size:1.5rem;line-height:2rem"
   "3xl"  "font-size:1.875rem;line-height:2.25rem"
   "4xl"  "font-size:2.25rem;line-height:2.5rem"
   "5xl"  "font-size:3rem;line-height:1"
   "6xl"  "font-size:3.75rem;line-height:1"
   "7xl"  "font-size:4.5rem;line-height:1"
   "8xl"  "font-size:6rem;line-height:1"
   "9xl"  "font-size:8rem;line-height:1"})

;; Named font weights
(define cssx-weights
  {"thin"       "100"
   "extralight" "200"
   "light"      "300"
   "normal"     "400"
   "medium"     "500"
   "semibold"   "600"
   "bold"       "700"
   "extrabold"  "800"
   "black"      "900"})

;; Named font families
(define cssx-families
  {"sans"  "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif"
   "serif" "ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif"
   "mono"  "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"})

;; Text alignment keywords
(define cssx-alignments
  {"left" true "center" true "right" true "justify" true})

;; Display keywords → CSS value
(define cssx-displays
  {"block"       "block"
   "inline"      "inline"
   "inline-block" "inline-block"
   "flex"        "flex"
   "inline-flex" "inline-flex"
   "grid"        "grid"
   "hidden"      "none"})

;; Named max-widths (Tailwind scale)
(define cssx-max-widths
  {"xs"   "20rem"   "sm"  "24rem"   "md"  "28rem"
   "lg"   "32rem"   "xl"  "36rem"   "2xl" "42rem"
   "3xl"  "48rem"   "4xl" "56rem"   "5xl" "64rem"
   "6xl"  "72rem"   "7xl" "80rem"
   "full" "100%"    "none" "none"
   "prose" "65ch"   "screen" "100vw"})

;; Responsive breakpoints (mobile-first min-width)
(define cssx-breakpoints
  {"sm"  "640px"
   "md"  "768px"
   "lg"  "1024px"
   "xl"  "1280px"
   "2xl" "1536px"})

;; Pseudo-class states
(define cssx-states
  {"hover"         ":hover"
   "focus"         ":focus"
   "active"        ":active"
   "focus-within"  ":focus-within"
   "focus-visible" ":focus-visible"
   "first"         ":first-child"
   "last"          ":last-child"})

;; =========================================================================
;; Utility resolver — token string → CSS declarations
;; =========================================================================

;; Spacing value: number → rem, "auto" → "auto", "px" → "1px"
(define cssx-spacing-value
  (fn (v)
    (cond
      (= v "auto") "auto"
      (= v "px")   "1px"
      (= v "0")    "0px"
      true (let ((n (parse-int v nil)))
             (if (nil? n) nil
               (str (* n 0.25) "rem"))))))

;; Replace {v} in a template string with a value
(define cssx-template
  (fn (tmpl v)
    (let ((i (index-of tmpl "{v}")))
      (if (< i 0) tmpl
        (let ((result (str (substring tmpl 0 i) v (substring tmpl (+ i 3) (len tmpl)))))
          ;; Handle templates with multiple {v} (e.g. padding-left:{v};padding-right:{v})
          (let ((j (index-of result "{v}")))
            (if (< j 0) result
              (str (substring result 0 j) v (substring result (+ j 3) (len result))))))))))

;; Resolve a base utility token (no state/bp prefix) → CSS declaration string or nil.
;; Tries matchers in order: colour, text-size, text-align, font, spacing, display, max-w, rounded, opacity.
(define cssx-resolve
  (fn (token)
    (let ((parts (split token "-")))
      (if (empty? parts) nil
        (let ((head (first parts))
              (rest (slice parts 1)))
          (cond
            ;; ---------------------------------------------------------
            ;; Colour utilities: bg-{colour}-{shade}, text-{colour}-{shade}, border-{colour}-{shade}
            ;; ---------------------------------------------------------
            (and (get cssx-colour-props head)
                 (>= (len rest) 2)
                 (not (nil? (parse-int (last rest) nil)))
                 (not (nil? (get colour-bases (join "-" (slice rest 0 (- (len rest) 1)))))))
            (let ((css-prop (get cssx-colour-props head))
                  (cname (join "-" (slice rest 0 (- (len rest) 1))))
                  (shade (parse-int (last rest) 0)))
              (str css-prop ":" (colour cname shade)))

            ;; ---------------------------------------------------------
            ;; Text size: text-{size-name} (e.g. text-xl, text-2xl)
            ;; ---------------------------------------------------------
            (and (= head "text")
                 (= (len rest) 1)
                 (not (nil? (get cssx-sizes (first rest)))))
            (get cssx-sizes (first rest))

            ;; Also handle text-2xl etc where rest might be ("2xl") — covered above
            ;; But also "text-sm" etc — covered above since rest is ("sm")

            ;; ---------------------------------------------------------
            ;; Text alignment: text-left, text-center, text-right, text-justify
            ;; ---------------------------------------------------------
            (and (= head "text")
                 (= (len rest) 1)
                 (get cssx-alignments (first rest)))
            (str "text-align:" (first rest))

            ;; ---------------------------------------------------------
            ;; Font weight: font-bold, font-semibold, etc.
            ;; ---------------------------------------------------------
            (and (= head "font")
                 (= (len rest) 1)
                 (not (nil? (get cssx-weights (first rest)))))
            (str "font-weight:" (get cssx-weights (first rest)))

            ;; ---------------------------------------------------------
            ;; Font family: font-sans, font-serif, font-mono
            ;; ---------------------------------------------------------
            (and (= head "font")
                 (= (len rest) 1)
                 (not (nil? (get cssx-families (first rest)))))
            (str "font-family:" (get cssx-families (first rest)))

            ;; ---------------------------------------------------------
            ;; Spacing: p-4, px-2, mt-8, mx-auto, etc.
            ;; ---------------------------------------------------------
            (and (get cssx-spacing-props head)
                 (= (len rest) 1))
            (let ((tmpl (get cssx-spacing-props head))
                  (v (cssx-spacing-value (first rest))))
              (if (nil? v) nil (cssx-template tmpl v)))

            ;; ---------------------------------------------------------
            ;; Display: block, flex, grid, hidden, inline, inline-block
            ;; ---------------------------------------------------------
            (and (= (len parts) 1)
                 (not (nil? (get cssx-displays head))))
            (str "display:" (get cssx-displays head))

            ;; Inline-block, inline-flex (multi-word)
            (and (= (len parts) 2)
                 (not (nil? (get cssx-displays token))))
            (str "display:" (get cssx-displays token))

            ;; ---------------------------------------------------------
            ;; Max-width: max-w-xl, max-w-3xl, max-w-prose
            ;; ---------------------------------------------------------
            (and (= head "max")
                 (>= (len rest) 2)
                 (= (first rest) "w"))
            (let ((val-name (join "-" (slice rest 1)))
                  (val (get cssx-max-widths val-name)))
              (if (nil? val) nil (str "max-width:" val)))

            ;; ---------------------------------------------------------
            ;; Rounded: rounded, rounded-lg, rounded-full, etc.
            ;; ---------------------------------------------------------
            (= head "rounded")
            (cond
              (empty? rest) "border-radius:0.25rem"
              (= (first rest) "none") "border-radius:0"
              (= (first rest) "sm")   "border-radius:0.125rem"
              (= (first rest) "md")   "border-radius:0.375rem"
              (= (first rest) "lg")   "border-radius:0.5rem"
              (= (first rest) "xl")   "border-radius:0.75rem"
              (= (first rest) "2xl")  "border-radius:1rem"
              (= (first rest) "3xl")  "border-radius:1.5rem"
              (= (first rest) "full") "border-radius:9999px"
              true nil)

            ;; ---------------------------------------------------------
            ;; Opacity: opacity-{n} (0-100)
            ;; ---------------------------------------------------------
            (and (= head "opacity")
                 (= (len rest) 1))
            (let ((n (parse-int (first rest) nil)))
              (if (nil? n) nil (str "opacity:" (/ n 100))))

            ;; ---------------------------------------------------------
            ;; Width/height: w-{n}, h-{n}, w-full, h-full, h-screen
            ;; ---------------------------------------------------------
            (and (or (= head "w") (= head "h"))
                 (= (len rest) 1))
            (let ((prop (if (= head "w") "width" "height"))
                  (val (first rest)))
              (cond
                (= val "full")   (str prop ":100%")
                (= val "screen") (str prop (if (= head "w") ":100vw" ":100vh"))
                (= val "auto")   (str prop ":auto")
                (= val "min")    (str prop ":min-content")
                (= val "max")    (str prop ":max-content")
                (= val "fit")    (str prop ":fit-content")
                true (let ((n (parse-int val nil)))
                       (if (nil? n) nil
                         (str prop ":" (* n 0.25) "rem")))))

            ;; ---------------------------------------------------------
            ;; Gap: gap-{n}
            ;; ---------------------------------------------------------
            (and (= head "gap")
                 (= (len rest) 1))
            (let ((v (cssx-spacing-value (first rest))))
              (if (nil? v) nil (str "gap:" v)))

            ;; ---------------------------------------------------------
            ;; Text decoration: underline, no-underline, line-through
            ;; ---------------------------------------------------------
            (and (= (len parts) 1)
                 (or (= head "underline") (= head "overline") (= head "line-through")))
            (str "text-decoration-line:" head)

            (and (= (len parts) 2) (= head "no") (= (first rest) "underline"))
            "text-decoration-line:none"

            ;; ---------------------------------------------------------
            ;; Cursor: cursor-pointer, cursor-default, etc.
            ;; ---------------------------------------------------------
            (and (= head "cursor") (= (len rest) 1))
            (str "cursor:" (first rest))

            ;; ---------------------------------------------------------
            ;; Overflow: overflow-hidden, overflow-auto, etc.
            ;; ---------------------------------------------------------
            (and (= head "overflow") (= (len rest) 1))
            (str "overflow:" (first rest))

            ;; ---------------------------------------------------------
            ;; Transition: transition, transition-colors, etc.
            ;; ---------------------------------------------------------
            (and (= head "transition") (empty? rest))
            "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms"

            (and (= head "transition") (= (first rest) "colors"))
            "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms"

            ;; ---------------------------------------------------------
            ;; Fallback: unrecognised → nil (skip)
            ;; ---------------------------------------------------------
            true nil))))))

;; =========================================================================
;; Token processor — full token with optional state/bp prefixes
;; =========================================================================

;; Process one token string → {:cls "sx-..." :rule ".sx-...{...}"} or nil
;; Token format: [bp:]?[state:]?utility
;; Examples: "bg-yellow-199", "hover:bg-rose-500", "md:hover:text-xl"
(define cssx-process-token
  (fn (token)
    (let ((colon-parts (split token ":"))
          (n (len colon-parts)))
      ;; Extract state, bp, and base utility from colon-separated parts
      (let ((bp nil) (state nil) (base nil))
        ;; 1 part: just utility
        ;; 2 parts: modifier:utility (could be bp or state)
        ;; 3 parts: bp:state:utility
        (cond
          (= n 1)
          (do (set! base (first colon-parts)))
          (= n 2)
          (let ((prefix (first colon-parts)))
            (set! base (last colon-parts))
            (if (not (nil? (get cssx-breakpoints prefix)))
              (set! bp prefix)
              (set! state prefix)))
          (>= n 3)
          (do
            (set! bp (first colon-parts))
            (set! state (nth colon-parts 1))
            (set! base (last colon-parts))))

        ;; Resolve the base utility to CSS declarations
        (let ((css (cssx-resolve base)))
          (if (nil? css) nil
            (let ((cls (str "sx-" (join "-" (split token ":"))))
                  (pseudo (if (nil? state) ""
                            (or (get cssx-states state) (str ":" state))))
                  (decl (str "." cls pseudo "{" css "}")))
              (if (nil? bp)
                {"cls" cls "rule" decl}
                (let ((min-w (or (get cssx-breakpoints bp) bp)))
                  {"cls" cls
                   "rule" (str "@media(min-width:" min-w "){" decl "}")})))))))))

;; =========================================================================
;; tw — Tailwind-style inline style string from utility tokens
;;
;; Same token format as ~cssx/tw, returns a CSS declaration string for :style.
;; Cannot do hover/responsive (use ~cssx/tw for those).
;;
;; Usage:
;;   (div :style (tw "bg-yellow-199 text-violet-700 p-4 font-bold")
;;     "content")
;; =========================================================================

(define tw
  (fn (tokens-str)
    (let ((tokens (split (or tokens-str "") " "))
          (parts (list)))
      (for-each (fn (tok)
        (when (not (= tok ""))
          (let ((css (cssx-resolve tok)))
            (when (not (nil? css))
              (append! parts (str css ";"))))))
        tokens)
      (join "" parts))))

;; =========================================================================
;; ~cssx/tw — spread component that injects JIT classes onto parent element
;;
;; Usage — as a child of any element:
;;   (div (~cssx/tw "bg-yellow-199 text-violet-700 p-4 font-bold")
;;     (h1 "styled content"))
;;
;;   (button (~cssx/tw "hover:bg-rose-500 focus:border-blue-400")
;;     "interactive")
;;
;; Returns a spread value that merges :class and :data-tw onto the parent
;; element. Collects CSS rules into the "cssx" bucket for a single global
;; <style> flush. No wrapper element, no per-element <style> tags.
;;
;; Reusable as variables:
;;   (define important (~cssx/tw "font-bold text-4xl"))
;;   (div important "the queen is dead")
;;
;; Multiple spreads merge naturally:
;;   (div (~cssx/tw "bg-red-500") (~cssx/tw "p-4") "content")
;; =========================================================================

(defcomp ~cssx/tw (tokens)
  (let ((token-list (filter (fn (t) (not (= t "")))
                      (split (or tokens "") " ")))
        (results (map cssx-process-token token-list))
        (valid (filter (fn (r) (not (nil? r))) results))
        (classes (map (fn (r) (get r "cls")) valid))
        (rules (map (fn (r) (get r "rule")) valid))
        (_ (for-each (fn (rule) (collect! "cssx" rule)) rules)))
    ;; Return spread: injects class + data-tw onto parent element
    (if (empty? classes)
      nil
      (make-spread {"class" (join " " classes)
                    "data-tw" (or tokens "")}))))


;; =========================================================================
;; ~cssx/flush — emit collected CSS rules as a single <style> tag
;;
;; Place once in the page (typically in the layout, before </body>).
;; Emits all accumulated CSSX rules and clears the bucket.
;;
;; Usage:
;;   (~cssx/flush)
;; =========================================================================

(defcomp ~cssx/flush ()
  (let ((rules (collected "cssx")))
    (clear-collected! "cssx")
    (when (not (empty? rules))
      (raw! (str "<style data-cssx>" (join "" rules) "</style>")))))