// Mount points + Tweaks panel + accent color theming
const { useEffect } = React;

const ACCENTS = {
  orange: { '--accent':'#f97316', '--accent-h':'#fb923c', '--accent-d':'#ea580c',
            '--accent-dim':'rgba(249,115,22,.08)', '--accent-bd':'rgba(249,115,22,.22)',
            '--accent-glow':'rgba(249,115,22,.35)' },
  lime:   { '--accent':'#a3e635', '--accent-h':'#bef264', '--accent-d':'#84cc16',
            '--accent-dim':'rgba(163,230,53,.08)', '--accent-bd':'rgba(163,230,53,.22)',
            '--accent-glow':'rgba(163,230,53,.35)' },
  cyan:   { '--accent':'#22d3ee', '--accent-h':'#67e8f9', '--accent-d':'#06b6d4',
            '--accent-dim':'rgba(34,211,238,.08)', '--accent-bd':'rgba(34,211,238,.22)',
            '--accent-glow':'rgba(34,211,238,.35)' },
  violet: { '--accent':'#a78bfa', '--accent-h':'#c4b5fd', '--accent-d':'#8b5cf6',
            '--accent-dim':'rgba(167,139,250,.08)', '--accent-bd':'rgba(167,139,250,.22)',
            '--accent-glow':'rgba(167,139,250,.35)' },
  rose:   { '--accent':'#fb7185', '--accent-h':'#fda4af', '--accent-d':'#f43f5e',
            '--accent-dim':'rgba(251,113,133,.08)', '--accent-bd':'rgba(251,113,133,.22)',
            '--accent-glow':'rgba(251,113,133,.35)' },
  amber:  { '--accent':'#fbbf24', '--accent-h':'#fcd34d', '--accent-d':'#f59e0b',
            '--accent-dim':'rgba(251,191,36,.08)', '--accent-bd':'rgba(251,191,36,.22)',
            '--accent-glow':'rgba(251,191,36,.35)' },
};

function applyAccent(name) {
  const map = ACCENTS[name] || ACCENTS.orange;
  const root = document.documentElement;
  Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v));
}

function Tweaks() {
  const defaults = window.__TWEAKS || { accent: 'orange' };
  const [tweaks, setTweak] = window.useTweaks(defaults);
  useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);
  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakSelect = window.TweakSelect;
  return (
    <TweaksPanel>
      <TweakSection label="Accent color">
        <TweakSelect
          label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak('accent', v)}
          options={['orange', 'lime', 'cyan', 'violet', 'rose', 'amber']}
        />
      </TweakSection>
      <div style={{
        fontFamily:'var(--mono)', fontSize:10.5, color:'var(--text-3)',
        lineHeight:1.55, padding:'8px 2px', letterSpacing:'.04em',
      }}>
        Tip: try <strong style={{color:'var(--accent)'}}>cyan</strong> for a more
        "monitoring / engineering" feel, or <strong style={{color:'var(--accent)'}}>amber</strong>
        {' '}for a warmer industrial look.
      </div>
    </TweaksPanel>
  );
}

// Apply accent immediately on load (before tweaks panel mounts)
applyAccent((window.__TWEAKS && window.__TWEAKS.accent) || 'orange');

// Mount Hopper live preview
const liveRoot = document.getElementById('hopper-live');
if (liveRoot) ReactDOM.createRoot(liveRoot).render(<window.Hopper />);

// Mount Korsys live preview (sister widget — dual-chat section).
const korsysRoot = document.getElementById('korsys-live');
if (korsysRoot && window.Korsys) ReactDOM.createRoot(korsysRoot).render(<window.Korsys />);

// Mount screenshot placeholders
[
  ['shot-tickets', window.ShotTickets],
  ['shot-scorecard', window.ShotScorecard],
  ['shot-photo', window.ShotPhoto],
  ['shot-sow', window.ShotSOW],
  ['shot-twin', window.ShotTwin],
].forEach(([id, Cmp]) => {
  const el = document.getElementById(id);
  if (el && Cmp) ReactDOM.createRoot(el).render(<Cmp />);
});

// Mount tweaks panel
const tweaksMount = document.createElement('div');
document.body.appendChild(tweaksMount);
ReactDOM.createRoot(tweaksMount).render(<Tweaks />);