// ============================================================
// App root — view switcher + Tweaks
// ============================================================
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan",
  "animSpeed": 1,
  "gridDensity": 28,
  "pulseStyle": "dots",
  "bgTone": "dark",
  "showScanlines": false
}/*EDITMODE-END*/;

const ACCENTS = {
  cyan:    { accent: '#4fd1ff', dim: '#2a7fa0', glow: 'rgba(79,209,255,0.55)' },
  emerald: { accent: '#00d9a3', dim: '#0f8a68', glow: 'rgba(0,217,163,0.55)' },
  violet:  { accent: '#a88bff', dim: '#6b4fa8', glow: 'rgba(168,139,255,0.55)' },
  amber:   { accent: '#f5b454', dim: '#a6763a', glow: 'rgba(245,180,84,0.55)' },
  magenta: { accent: '#ff5fa8', dim: '#a63a74', glow: 'rgba(255,95,168,0.55)' },
};
const BG_TONES = {
  dark:  { b0: '#0e131c', b1: '#141a25', b2: '#1a2130' },
  ultra: { b0: '#080c14', b1: '#0e131c', b2: '#141a25' },
  navy:  { b0: '#12182a', b1: '#1a2238', b2: '#242e48' },
  slate: { b0: '#141821', b1: '#1c212c', b2: '#242a38' },
};

function App() {
  const [view, setView] = useStateA('floor');
  const [cfg, setCfg] = useStateA(() => loadLocal() || defaultConfig());
  const [selGroupId, setSelGroupId] = useStateA(null);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // live scan state — which rack is being scanned right now
  const [scanState, setScanState] = useStateA(null);
  useEffectA(() => {
    let raf;
    const tick = () => {
      const t = performance.now() / 1000 * tweaks.animSpeed;
      const robot = cfg.robots[0];
      if (!robot || robot.path.length === 0) {
        setScanState(null);
      } else {
        const m = robotMotion(robot.path, robot.speed, t);
        if (m.state === 'inspecting') {
          const wp = robot.path[m.wpIdx];
          if (wp?.inspect?.targetGroupId && wp?.inspect?.targetRackId) {
            setScanState(prev => {
              if (prev && prev.groupId === wp.inspect.targetGroupId && prev.rackId === wp.inspect.targetRackId) return prev;
              return { groupId: wp.inspect.targetGroupId, rackId: wp.inspect.targetRackId };
            });
          } else {
            setScanState(prev => prev ? null : prev);
          }
        } else {
          setScanState(prev => prev ? null : prev);
        }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [cfg.robots, tweaks.animSpeed]);

  // apply tweaks to CSS
  useEffectA(() => {
    const r = document.documentElement;
    const acc = ACCENTS[tweaks.accent] || ACCENTS.cyan;
    r.style.setProperty('--accent', acc.accent);
    r.style.setProperty('--accent-dim', acc.dim);
    r.style.setProperty('--pulse', acc.accent);
    r.style.setProperty('--anim-speed', String(tweaks.animSpeed));
    r.style.setProperty('--grid-size', `${tweaks.gridDensity}px`);
    const bg = BG_TONES[tweaks.bgTone] || BG_TONES.dark;
    r.style.setProperty('--bg-0', bg.b0);
    r.style.setProperty('--bg-1', bg.b1);
    r.style.setProperty('--bg-2', bg.b2);
    r.style.setProperty('--grid-minor',
      tweaks.accent === 'cyan' ? 'rgba(79,209,255,0.06)'
      : tweaks.accent === 'emerald' ? 'rgba(0,217,163,0.06)'
      : tweaks.accent === 'violet' ? 'rgba(168,139,255,0.06)'
      : tweaks.accent === 'amber' ? 'rgba(245,180,84,0.06)'
      : 'rgba(255,95,168,0.06)');
    r.style.setProperty('--grid-major',
      tweaks.accent === 'cyan' ? 'rgba(79,209,255,0.14)'
      : tweaks.accent === 'emerald' ? 'rgba(0,217,163,0.14)'
      : tweaks.accent === 'violet' ? 'rgba(168,139,255,0.14)'
      : tweaks.accent === 'amber' ? 'rgba(245,180,84,0.14)'
      : 'rgba(255,95,168,0.14)');
  }, [tweaks]);

  // autosave to localStorage
  useEffectA(() => {
    const id = setTimeout(() => saveLocal(cfg), 400);
    return () => clearTimeout(id);
  }, [cfg]);

  // poll server state every 20s and merge into cfg
  useEffectA(() => {
    let stop = false;
    const tick = async () => {
      const s = await fetchServerState();
      if (!stop && s) setCfg(prev => mergeServerStatus(prev, s));
    };
    tick();
    const id = setInterval(tick, 20_000);
    return () => { stop = true; clearInterval(id); };
  }, []);

  const pickGroup = (id) => { setSelGroupId(id); setView('rack'); };

  return (
    <div className="app" data-screen-label={`00 ${view}`}>
      <TopHUD cfg={cfg} view={view} />
      <LeftRail view={view} setView={setView} />
      <main className="main">
        {view === 'floor' && (
          <FloorPlan cfg={cfg} onPickGroup={pickGroup} speed={tweaks.animSpeed} />
        )}
        {view === 'rack' && (
          <RackDetail cfg={cfg} groupId={selGroupId || cfg.groups[0]?.id} setCfg={setCfg}
            onBack={() => setView('floor')} scanState={scanState} />
        )}
        {view === 'cfg' && (
          <ConfigView cfg={cfg} setCfg={setCfg}
            selGroupId={selGroupId || cfg.groups[0]?.id} setSelGroupId={setSelGroupId} />
        )}
        {tweaks.showScanlines && <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 50,
          background: 'repeating-linear-gradient(0deg, rgba(79,209,255,0.02) 0 1px, transparent 1px 3px)',
        }} />}
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent · 액센트 색" />
        <TweakRadio label="Color" value={tweaks.accent}
          options={[
            { value: 'cyan', label: 'Cyan' },
            { value: 'emerald', label: 'Emerald' },
            { value: 'violet', label: 'Violet' },
            { value: 'amber', label: 'Amber' },
            { value: 'magenta', label: 'Magenta' },
          ]}
          onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Background · 배경" />
        <TweakRadio label="Tone" value={tweaks.bgTone}
          options={[
            { value: 'dark', label: 'Dark' },
            { value: 'ultra', label: 'Ultra' },
            { value: 'navy', label: 'Navy' },
            { value: 'slate', label: 'Slate' },
          ]}
          onChange={(v) => setTweak('bgTone', v)} />

        <TweakSection label="Motion · 모션" />
        <TweakSlider label="Animation speed" value={tweaks.animSpeed} min={0.2} max={3} step={0.1} unit="x"
          onChange={(v) => setTweak('animSpeed', v)} />
        <TweakSlider label="Grid density" value={tweaks.gridDensity} min={16} max={64} step={2} unit="px"
          onChange={(v) => setTweak('gridDensity', v)} />

        <TweakSection label="Power Pulse · 전원 펄스" />
        <TweakRadio label="Style" value={tweaks.pulseStyle}
          options={[
            { value: 'dots', label: 'Dots' },
            { value: 'runner', label: 'Runner' },
            { value: 'soft', label: 'Soft' },
          ]}
          onChange={(v) => setTweak('pulseStyle', v)} />

        <TweakSection label="Extras" />
        <TweakToggle label="CRT scanlines" value={tweaks.showScanlines}
          onChange={(v) => setTweak('showScanlines', v)} />
      </TweaksPanel>
    </div>
  );
}

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