/* global React, ReactDOM, DesignCanvas, DCSection, DCArtboard, VariantA, VariantB, VariantC, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakToggle, TweakColor, useTweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B8602A",
  "rotateSeconds": 18,
  "showTicker": true,
  "showPings": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent override at root level
  React.useEffect(() => {
    if (!t.accent) return;
    document.documentElement.style.setProperty('--color-accent', t.accent);
    const rgb = hexToRgb(t.accent);
    if (rgb) {
      document.documentElement.style.setProperty('--color-accent-soft', `rgba(${rgb}, 0.10)`);
      document.documentElement.style.setProperty('--color-accent-ring', `rgba(${rgb}, 0.45)`);
      document.documentElement.style.setProperty('--color-accent-glow', `rgba(${rgb}, 0.30)`);
      document.documentElement.style.setProperty('--ba-accent', t.accent);
      document.documentElement.style.setProperty('--ba-accent-soft', `rgba(${rgb}, 0.10)`);
    }
  }, [t.accent]);

  return (
    <>
      <DesignCanvas>
        <DCSection
          id="cc-variants"
          title="Command Center · Office wall dashboard"
          subtitle="Three layouts for an always-on display. Light cream / burnt orange / espresso theme. Click an artboard's expand icon to view it fullscreen — best for previewing wall-mounted output."
        >
          <DCArtboard id="rotating" label="A · Rotating wall display" width={1920} height={1080}>
            <VariantA rotateMs={t.rotateSeconds * 1000} />
          </DCArtboard>

          <DCArtboard id="mosaic" label="B · Mosaic terminal" width={1920} height={1080}>
            <VariantB />
          </DCArtboard>

          <DCArtboard id="spotlight" label="C · Hero spotlight" width={1920} height={1080}>
            <VariantC rotateMs={Math.round(t.rotateSeconds * 1000 / 2.5)} />
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Rotation">
          <TweakSlider
            label="Rotate every"
            value={t.rotateSeconds}
            onChange={(v) => setTweak('rotateSeconds', v)}
            min={5} max={60} step={1}
            unit="s"
          />
        </TweakSection>

        <TweakSection label="Accent color">
          <TweakColor
            label="Accent"
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#B8602A', '#A83A28', '#5E7A3A', '#5C4A7A', '#1F3A5F']}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function hexToRgb(hex) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!m) return null;
  return `${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}`;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);