"use client";
import * as React from "react";
import { EarthBlaze } from "@/components/ui/earth-blaze";
const DEFAULT_CONTROLS = {
starCount: 1800,
galaxyBrightness: 1,
surfaceBrightness: 1,
illumination: 1,
auroraEnabled: true,
auroraPreview: false,
auroraColor: undefined as string | undefined,
backgroundColor: undefined as string | undefined,
};
export default function EarthBlazeDemo() {
const [values, setValues] = React.useState(DEFAULT_CONTROLS);
const panel = React.useRef<HTMLDetailsElement>(null);
React.useEffect(() => {
if (matchMedia("(max-width: 600px)").matches && panel.current) panel.current.open = false;
}, []);
return (
<section data-earth-blaze-demo="" style={{ position: "relative", width: "100%", height: "100dvh", minHeight: 360, background: "#000", color: "#edf0f6", fontFamily: "system-ui, sans-serif", colorScheme: "dark" }}>
<style>{`
[data-earth-blaze-demo] * { box-sizing: border-box; }
[data-earth-blaze-demo] .eb-panel { position: absolute; z-index: 2; right: 20px; top: 20px; width: 254px; max-width: calc(100% - 40px); border: 1px solid #ffffff29; border-radius: 12px; background: #090c13ed; box-shadow: 0 16px 60px #0005; backdrop-filter: blur(16px); font-size: 12px; }
[data-earth-blaze-demo] summary { padding: 16px; cursor: pointer; font-size: 13px; font-weight: 550; letter-spacing: .01em; }
[data-earth-blaze-demo] summary::marker { color: #7e8a9e; }
[data-earth-blaze-demo] .eb-controls { padding: 0 16px 16px; display: grid; gap: 17px; max-height: calc(100dvh - 110px); overflow-y: auto; }
[data-earth-blaze-demo] label { display: grid; gap: 7px; }
[data-earth-blaze-demo] .eb-color { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-earth-blaze-demo] .eb-color small { display: block; margin-top: 3px; color: #9aa5b8; font-size: 10px; }
[data-earth-blaze-demo] input[type=color] { width: 34px; height: 28px; padding: 2px; border: 1px solid #ffffff35; border-radius: 5px; background: none; cursor: pointer; }
[data-earth-blaze-demo] input[type=range] { width: 100%; margin: 0; accent-color: #bfd8f8; cursor: pointer; }
[data-earth-blaze-demo] output { float: right; color: #aebbd0; font-variant-numeric: tabular-nums; }
[data-earth-blaze-demo] button { min-height: 34px; border: 1px solid #ffffff29; border-radius: 6px; background: #ffffff0a; color: inherit; font: inherit; cursor: pointer; }
[data-earth-blaze-demo] button:hover { background: #ffffff15; }
[data-earth-blaze-demo] button[aria-pressed=true] { background: #c7e2ff; border-color: #c7e2ff; color: #101725; }
[data-earth-blaze-demo] :is(button,input,summary):focus-visible { outline: 2px solid #b7d7ff; outline-offset: 4px; }
@media (max-width:600px) { [data-earth-blaze-demo] .eb-panel { right: 12px; top: 12px; max-width: calc(100% - 24px); } }
`}</style>
<EarthBlaze {...values} style={{ height: "100%", aspectRatio: "auto" }} />
<details ref={panel} className="eb-panel" open>
<summary>Earth Blaze <span style={{ float: "right", color: "#9aa5b8", fontWeight: 400 }}>Customize</span></summary>
<div className="eb-controls">
{(["auroraColor", "backgroundColor"] as const).map(key => (
<label className="eb-color" key={key}>
<span>{key === "auroraColor" ? "Aurora color" : "Background color"}<small>{values[key]?.toUpperCase() ?? "Original palette"}</small></span>
<input type="color" aria-label={key === "auroraColor" ? "Aurora color" : "Background color"} value={values[key] ?? (key === "auroraColor" ? "#118a66" : "#634369")}
onChange={e => setValues(v => ({ ...v, [key]: e.target.value, ...(key === "auroraColor" ? { auroraPreview: true, auroraEnabled: true } : {}) }))} />
</label>
))}
<button type="button" aria-pressed={values.auroraPreview} onClick={() => setValues(v => ({ ...v, auroraPreview: !v.auroraPreview, auroraEnabled: true }))}>Preview aurora</button>
{(["illumination", "galaxyBrightness", "surfaceBrightness", "starCount"] as const).map(key => (
<label key={key}>
<span>{{ illumination: "Illumination", galaxyBrightness: "Background brightness", surfaceBrightness: "Earth detail", starCount: "Stars" }[key]}<output>{key === "starCount" ? values[key] : `${values[key].toFixed(2)}×`}</output></span>
<input aria-label={key} type="range" min={0} max={key === "starCount" ? 5400 : 3} step={key === "starCount" ? 100 : .05} value={values[key]} onChange={e => setValues(v => ({ ...v, [key]: Number(e.target.value) }))} />
</label>
))}
<label style={{ display: "flex", alignItems: "center", gap: 8 }}><input type="checkbox" checked={values.auroraEnabled} onChange={e => setValues(v => ({ ...v, auroraEnabled: e.target.checked, auroraPreview: false }))} /> Aurora on hold</label>
<p style={{ margin: 0, color: "#9aa5b8", lineHeight: 1.6 }}>Move to guide the light. Hold, then release.<br />Keyboard: arrows, Space, Enter, Escape.</p>
<button type="button" onClick={() => setValues(DEFAULT_CONTROLS)}>Reset settings</button>
</div>
</details>
</section>
);
}
