Dia Gradient

"use client"

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

// Palette ramps captured verbatim from the source playground (arlan.me).
const PALETTES: Record<string, { offset: number; color: string }[]> = {"Dia":[{"offset":0,"color":"#330B06"},{"offset":0.0833,"color":"#263CA5"},{"offset":0.1667,"color":"#1054E9"},{"offset":0.25,"color":"#4081D6"},{"offset":0.3333,"color":"#97B9DC"},{"offset":0.4167,"color":"#DFEBF9"},{"offset":0.5,"color":"#EEE0B3"},{"offset":0.5833,"color":"#FCD52F"},{"offset":0.6667,"color":"#F96D2A"},{"offset":0.75,"color":"#F936B9"},{"offset":0.8333,"color":"#FB52F6D8"},{"offset":0.9167,"color":"#FC95F96C"},{"offset":1,"color":"#FEC2FD00"}],"Ocean":[{"offset":0,"color":"#0C122D"},{"offset":0.0833,"color":"#09389D"},{"offset":0.1667,"color":"#054DD9"},{"offset":0.25,"color":"#116DF2"},{"offset":0.3333,"color":"#2598E7"},{"offset":0.4167,"color":"#36BADD"},{"offset":0.5,"color":"#69D2D7"},{"offset":0.5833,"color":"#9CE6D9"},{"offset":0.6667,"color":"#A3D1E3"},{"offset":0.75,"color":"#9094F4"},{"offset":0.8333,"color":"#9080FFD5"},{"offset":0.9167,"color":"#ACBAFF6A"},{"offset":1,"color":"#C3E6FF00"}],"Sunset":[{"offset":0,"color":"#290B0B"},{"offset":0.0833,"color":"#4E1723"},{"offset":0.1667,"color":"#661F31"},{"offset":0.25,"color":"#802837"},{"offset":0.3333,"color":"#B73837"},{"offset":0.4167,"color":"#E14436"},{"offset":0.5,"color":"#F67835"},{"offset":0.5833,"color":"#FAB632"},{"offset":0.6667,"color":"#FBCA60"},{"offset":0.75,"color":"#FBA2AE"},{"offset":0.8333,"color":"#FB81DEEB"},{"offset":0.9167,"color":"#FCA5EE76"},{"offset":1,"color":"#FCC2FD00"}],"Aurora":[{"offset":0,"color":"#091017"},{"offset":0.0833,"color":"#124333"},{"offset":0.1667,"color":"#185E44"},{"offset":0.25,"color":"#207D58"},{"offset":0.3333,"color":"#2EA571"},{"offset":0.4167,"color":"#39C486"},{"offset":0.5,"color":"#67D99E"},{"offset":0.5833,"color":"#8DEAB5"},{"offset":0.6667,"color":"#9AF0C9"},{"offset":0.75,"color":"#80E0DA"},{"offset":0.8333,"color":"#70D6E8EC"},{"offset":0.9167,"color":"#A8E7ED76"},{"offset":1,"color":"#D1F8F300"}],"Candy":[{"offset":0,"color":"#F977B2"},{"offset":0.0833,"color":"#F985BB"},{"offset":0.1667,"color":"#F992C4"},{"offset":0.25,"color":"#F99ECD"},{"offset":0.3333,"color":"#EAA3DD"},{"offset":0.4167,"color":"#D8A7ED"},{"offset":0.5,"color":"#C5ABFB"},{"offset":0.5833,"color":"#B9C0FC"},{"offset":0.6667,"color":"#ACD2FD"},{"offset":0.75,"color":"#C4E1E9"},{"offset":0.8333,"color":"#EEEEC2FE"},{"offset":0.9167,"color":"#FBF7D596"},{"offset":1,"color":"#FDFFFE00"}],"Ember":[{"offset":0,"color":"#3C1B27"},{"offset":0.0833,"color":"#602029"},{"offset":0.1667,"color":"#79242B"},{"offset":0.25,"color":"#8E282D"},{"offset":0.3333,"color":"#B13530"},{"offset":0.4167,"color":"#D64434"},{"offset":0.5,"color":"#F65137"},{"offset":0.5833,"color":"#FC7239"},{"offset":0.6667,"color":"#FC913B"},{"offset":0.75,"color":"#FDB158"},{"offset":0.8333,"color":"#FED68D"},{"offset":0.9167,"color":"#FFECB9B0"},{"offset":1,"color":"#FFF6E200"}],"Mono":[{"offset":0,"color":"#0B1948"},{"offset":0.0833,"color":"#1C3189"},{"offset":0.1667,"color":"#2640B4"},{"offset":0.25,"color":"#2E4CD6"},{"offset":0.3333,"color":"#3757F4"},{"offset":0.4167,"color":"#4F6BF9"},{"offset":0.5,"color":"#647EF9"},{"offset":0.5833,"color":"#738FF9"},{"offset":0.6667,"color":"#8CA5F9"},{"offset":0.75,"color":"#A9BDFA"},{"offset":0.8333,"color":"#C2D3FBED"},{"offset":0.9167,"color":"#D7E2FC79"},{"offset":1,"color":"#E9F0FE00"}]}
const PALETTE_NAMES = Object.keys(PALETTES)

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>
    </>
  )
}

export default function Fold() {
  const [palette, setPalette] = useState("Aurora")
  const [fold, setFold] = useState(74)
  const [depth, setDepth] = useState(620)

  return (
    <>
      <style>{STYLE}</style>
      <div className="dgp">
        <div className="dgp-wrap">
          <div className="dgp-preview">
            <RiseLoop>
              <FoldGradient fold={fold} depth={depth} stops={PALETTES[palette]} riseMs={0} />
            </RiseLoop>
          </div>
          <div className="dgp-panel">
            <div className="dgp-row">
              <span className="lab">Palette</span>
              <Dropdown ariaLabel="3D fold palette" value={palette} options={PALETTE_NAMES} onChange={setPalette} />
            </div>
            <Slider label="Fold" value={fold} min={20} max={89} step={1} format={(v) => v + "\u00B0"} onChange={setFold} />
            <Slider label="Depth" value={depth} min={300} max={1400} step={10} format={(v) => String(v)} onChange={setDepth} />
          </div>
        </div>
      </div>
    </>
  )
}