/* global React, ReactDOM */
/* JXM Brand Standards — App entry */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "kermit",
  "theme": "light",
  "pairing": "sans"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  kermit:    { accent: '#49E385', hover: '#2EB36A', ink: '#221F32' },
  compassed: { accent: '#FF6464', hover: '#2EB36A', ink: '#FFFFFF' },
  fly:       { accent: '#BDDEED', hover: '#9DC4D6', ink: '#221F32' },
  blurple:   { accent: '#5E4FF5', hover: '#4639D0', ink: '#FFFFFF' },
};

function applyTheme(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.theme || 'light');
  root.setAttribute('data-pairing', t.pairing || 'sans');
  const a = ACCENT_MAP[t.accent] || ACCENT_MAP.kermit;
  root.style.setProperty('--accent', a.accent);
  root.style.setProperty('--accent-hover', a.hover);
  root.style.setProperty('--accent-ink', a.ink);
}

function App() {
  const [route, go] = window.useHashRoute();
  const [cpOpen, setCpOpen] = React.useState(false);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTheme(t); }, [t]);

  // Tag the document with the current route so per-page styles can target it
  React.useEffect(() => {
    document.documentElement.setAttribute('data-page', route);
  }, [route]);

  // Cmd/Ctrl-K to open palette
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        setCpOpen(o => !o);
      } else if (e.key === '/' && document.activeElement?.tagName !== 'INPUT' && document.activeElement?.tagName !== 'TEXTAREA') {
        e.preventDefault();
        setCpOpen(true);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const renderPage = () => {
    const nav = (id) => go(id);
    switch (route) {
      case 'overview':  return <window.OverviewPage onNav={nav} />;
      case 'audiences': return <window.AudiencesPage onNav={nav} />;
      case 'logo':      return <window.LogoPage />;
      case 'pattern':   return <window.PatternPage />;
      case 'color':     return <window.ColorPage />;
      case 'type':      return <window.TypePage />;
      case 'spacing':   return <window.SpacingPage />;
      case 'motion':    return <window.MotionPage />;
      case 'photography': return <window.PhotographyPage />;
      case 'moodboard':   return <window.MoodboardPage />;
      case 'video':       return <window.VideoPage />;
      case 'voice':     return <window.VoicePage />;
      case 'snippets':  return <window.SnippetsPage />;
      case 'buttons':   return <window.ButtonsPage />;
      case 'forms':     return <window.FormsPage />;
      case 'cards':     return <window.CardsPage />;
      case 'email-sig': return <window.EmailSigPage />;
      case 'ai':        return <window.AIPage />;
      case 'ai-claude': return <window.PromptPage tool="claude" />;
      case 'ai-gpt':    return <window.PromptPage tool="chatgpt" />;
      case 'ai-mj':     return <window.PromptPage tool="mj" />;
      case 'ai-stitch': return <window.PromptPage tool="stitch" />;
      case 'press':     return <window.PressPage />;
      case 'downloads': return <window.DownloadsPage />;
      case 'request':   return <window.RequestPage />;
      default:          return <window.OverviewPage onNav={nav} />;
    }
  };

  const {
    TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect,
  } = window;

  return (
    <>
      <div className="app">
        <window.Sidebar route={route} onNav={go} onOpenSearch={() => setCpOpen(true)} />
        <div className="content">
          <window.Topbar route={route} />
          {renderPage()}
          <footer className="foot">
            <div className="foot-mark"><window.JxmLogo color="currentColor" height={56} /></div>
            <div className="foot-meta">
              Brand Standards v2.6<br/>
              May 2026<br/>
              <a href="https://getjxm.com" target="_blank" rel="noopener">getjxm.com</a><br/>
              <a href="mailto:hi@getjxm.com">hi@getjxm.com</a>
            </div>
          </footer>
        </div>
      </div>

      <window.CommandPalette open={cpOpen} onClose={() => setCpOpen(false)} onNav={go} />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Theme" />
          <TweakRadio label="Mode" value={t.theme} options={['light', 'dark']} onChange={(v) => setTweak('theme', v)} />
          <TweakSection label="Accent" />
          <TweakColor
            label="Signal color"
            value={ACCENT_MAP[t.accent].accent}
            options={[ACCENT_MAP.kermit.accent, ACCENT_MAP.compassed.accent, ACCENT_MAP.fly.accent, ACCENT_MAP.blurple.accent]}
            onChange={(hex) => {
              const key = Object.keys(ACCENT_MAP).find(k => ACCENT_MAP[k].accent === hex) || 'kermit';
              setTweak('accent', key);
            }}
          />
          <div style={{ fontSize: 10.5, color: 'rgba(41,38,27,.55)', lineHeight: 1.5, padding: '2px 0 4px' }}>
            <strong style={{ color: 'rgba(41,38,27,.78)' }}>Note:</strong> Fly & Blurple require Matt's approval before shipping. Preview only.
          </div>
          <TweakSection label="Typography" />
          <TweakRadio label="Display pairing" value={t.pairing} options={['sans', 'serif']} onChange={(v) => setTweak('pairing', v)} />
        </TweaksPanel>
      )}
    </>
  );
}

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