Dia Gradient

"use client"

import { useEffect, useRef, useState, type ReactNode } from "react"
import { PeakedGradient } from "@/components/ui/dia-gradient"

const STYLE = `
.dgp { --page:#f4f4f5; --surface:#fff; --line:rgba(0,0,0,0.09); --ring:rgba(0,0,0,0.22);
  --t1:#1b1b1b; --t2:#6b6b6b; --sel:#fcfcfc;
  display:flex; min-height:100vh; width:100%; align-items:center; justify-content:center;
  background:var(--page); color:var(--t1); padding:36px 24px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",system-ui,sans-serif; }
.dgp-wrap { width:100%; max-width:680px; }
.dgp-preview { border:1px solid var(--line); border-radius:16px 16px 0 0; background:var(--surface);
  height:340px; overflow:hidden; position:relative; }
.dgp-panel { border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; background:var(--surface);
  padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.dgp-row { display:flex; align-items:center; gap:14px; }
.dgp-row > .lab { color:var(--t2); font-size:13px; width:84px; flex:0 0 auto; }
.dgp-slider { position:relative; margin-left:auto; flex:1; height:34px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface); display:flex; align-items:center; }
.dgp-slider input { -webkit-appearance:none; appearance:none; width:100%; height:34px; margin:0; background:transparent; cursor:pointer; }
.dgp-slider input::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:3px; height:16px; border-radius:2px; background:var(--t1); opacity:.5; }
.dgp-slider input::-moz-range-thumb { width:3px; height:16px; border:0; border-radius:2px; background:var(--t1); opacity:.5; }
.dgp-slider .cap { position:absolute; left:12px; font-size:13px; color:var(--t2); pointer-events:none; }
.dgp-slider .val { position:absolute; right:12px; font-size:13px; color:var(--t2); font-variant-numeric:tabular-nums; pointer-events:none; }
.dgp-dd { position:relative; margin-left:auto; }
.dgp-dd-btn { display:flex; align-items:center; justify-content:space-between; gap:6px; height:34px; min-width:118px;
  padding:0 10px 0 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--t1);
  font:inherit; font-size:13px; font-weight:500; cursor:pointer; outline:none; transition:border-color .15s ease; }
.dgp-dd-btn:hover { border-color:var(--ring); }
.dgp-dd-btn svg { color:var(--t2); transition:transform .18s ease; }
.dgp-dd-btn[data-open="true"] svg { transform:rotate(180deg); }
.dgp-dd-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:168px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px;
  box-shadow:0 1px 2px rgba(17,24,39,0.06), 0 8px 24px rgba(17,24,39,0.08); display:flex; flex-direction:column; gap:2px; }
.dgp-dd-opt { display:flex; align-items:center; width:100%; text-align:left; padding:8px 10px; border:0; border-radius:6px;
  background:transparent; color:var(--t2); font:inherit; font-size:13px; cursor:pointer; transition:background .12s ease,color .12s ease; }
.dgp-dd-opt:hover { background:rgba(0,0,0,0.04); color:var(--t1); }
.dgp-dd-opt[data-selected="true"] { background:var(--sel); color:var(--t1); font-weight:500; }
`

function Chevron() {
  return (<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9" /></svg>)
}

function Dropdown({ value, options, onChange, ariaLabel }: {
  value: string; options: string[]; onChange: (v: string) => void; ariaLabel: string
}) {
  const [open, setOpen] = useState(false)
  const root = useRef<HTMLDivElement>(null)
  useEffect(() => {
    if (!open) return
    const onDown = (e: MouseEvent) => { if (root.current && !root.current.contains(e.target as Node)) setOpen(false) }
    document.addEventListener("mousedown", onDown)
    return () => document.removeEventListener("mousedown", onDown)
  }, [open])
  return (
    <div className="dgp-dd" ref={root}>
      <button type="button" className="dgp-dd-btn" data-open={open ? "true" : "false"} aria-label={ariaLabel}
        aria-expanded={open} role="combobox" onClick={() => setOpen((o) => !o)}>
        <span>{value}</span>
        <Chevron />
      </button>
      {open && (
        <div className="dgp-dd-menu" role="listbox">
          {options.map((o) => (
            <button key={o} type="button" className="dgp-dd-opt" role="option" aria-selected={o === value}
              data-selected={o === value ? "true" : "false"} onClick={() => { onChange(o); setOpen(false) }}>
              {o}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

function Slider({ label, value, min, max, step, format, onChange }: {
  label: string; value: number; min: number; max: number; step: number
  format: (v: number) => string; onChange: (v: number) => void
}) {
  return (
    <div className="dgp-row">
      <span className="lab">{label}</span>
      <div className="dgp-slider">
        <input type="range" min={min} max={max} step={step} value={value} aria-label={label}
          onChange={(e) => onChange(Number(e.target.value))} />
        <span className="val">{format(value)}</span>
      </div>
    </div>
  )
}

function RiseLoop({ children }: { children: ReactNode }) {
  // loop the aurora rise so the effect is always visible on the card
  const [up, setUp] = useState(false)
  useEffect(() => {
    const id = setInterval(() => setUp((u) => !u), 2100)
    const t = setTimeout(() => setUp(true), 120)
    return () => { clearInterval(id); clearTimeout(t) }
  }, [])
  return (
    <>
      <span data-ghost-open={up ? "true" : "false"} style={{ display: "none" }} />
      <div style={{ position: "absolute", inset: 0, transformOrigin: "bottom",
        transform: up ? "scaleY(1)" : "scaleY(0)",
        transition: "transform 1100ms cubic-bezier(0.16, 1, 0.3, 1)" }}>
        {children}
      </div>
    </>
  )
}

// Dark-first ordering (front layer = the dark peak, light skirt behind) — the
// way the source playground drives it.
const COLORS = ["#340B05", "#0358F7", "#FD02F5", "#FA3D1D", "#FFD400", "#E1ECFE"]

export default function Peaked() {
  const [pointiness, setPointiness] = useState(0.5)
  const [peak, setPeak] = useState(0.92)
  const [blur, setBlur] = useState(26)

  return (
    <>
      <style>{STYLE}</style>
      <div className="dgp">
        <div className="dgp-wrap">
          <div className="dgp-preview">
            <RiseLoop>
              <PeakedGradient colors={COLORS} pointiness={pointiness} peak={peak} blur={blur} reveal="none" style={{ height: "100%", width: "100%" }} />
            </RiseLoop>
          </div>
          <div className="dgp-panel">
            <Slider label="Pointiness" value={pointiness} min={0} max={1} step={0.01} format={(v) => Math.round(v * 100) + "%"} onChange={setPointiness} />
            <Slider label="Peak" value={peak} min={0.4} max={1} step={0.01} format={(v) => Math.round(v * 100) + "%"} onChange={setPeak} />
            <Slider label="Blur" value={blur} min={4} max={50} step={1} format={(v) => String(v)} onChange={setBlur} />
          </div>
        </div>
      </div>
    </>
  )
}