// main.jsx — password gate + AlphaSuite mount

const GATE_PASSWORD = 'alpha-pack-2026';

function PasswordGate({ onUnlock }) {
  const [val, setVal] = React.useState('');
  const [err, setErr] = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => { inputRef.current?.focus(); }, []);

  const check = () => {
    if (val === GATE_PASSWORD) {
      sessionStorage.setItem('alpha_unlocked', '1');
      onUnlock();
    } else {
      setErr(true);
      setVal('');
      setTimeout(() => setErr(false), 1200);
    }
  };

  return (
    <div style={{
      width: '100vw', height: '100vh',
      background: 'var(--canvas)', display: 'flex',
      alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{ width: 340, textAlign: 'center' }}>
        <img src="logo.svg" alt="AlphaSuite" style={{ width: '100%', display: 'block', marginBottom: 32 }} />
        <input
          ref={inputRef}
          type="password"
          placeholder="Access code"
          value={val}
          onChange={e => setVal(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && check()}
          style={{
            width: '100%', boxSizing: 'border-box',
            background: 'var(--surface)', border: err ? '1px solid var(--red)' : '1px solid var(--elev-3)',
            color: 'var(--ink)', fontFamily: 'var(--mono)', fontSize: 13,
            padding: '12px 14px', outline: 'none',
            transition: 'border-color 120ms',
          }}
        />
        <button
          onClick={check}
          style={{
            marginTop: 12, width: '100%',
            background: 'var(--accent-deep)', color: '#fff',
            border: 'none', cursor: 'pointer',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em',
            textTransform: 'uppercase', padding: '12px 0',
          }}>
          Enter
        </button>
        {err && (
          <div style={{ marginTop: 10, fontFamily: 'var(--mono)', fontSize: 10,
            color: 'var(--red)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            Incorrect access code
          </div>
        )}
      </div>
    </div>
  );
}

function Root() {
  const [unlocked, setUnlocked] = React.useState(
    () => sessionStorage.getItem('alpha_unlocked') === '1'
  );
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < 1024);
  const [theme, setTheme] = React.useState(() => localStorage.getItem('alpha-theme') || 'dark');

  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 1024);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('alpha-theme', theme);
  }, [theme]);

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  if (!unlocked) return <PasswordGate onUnlock={() => setUnlocked(true)} />;
  if (isMobile) return <MobileApp toggleTheme={toggleTheme} theme={theme} />;
  return <AlphaSuiteApp toggleTheme={toggleTheme} theme={theme} />;
}

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

// ── Breakpoint-aware picker ────────────────────────────────────────────────
// The picker writes --m-* tokens to :root inline style, which overrides any
// @media rule regardless of specificity. We intercept those writes and route
// them into <style> blocks with the correct @media wrapper per breakpoint.
// Saves to localStorage so values survive reload.
// Capturing starts only after the user opens the picker (so the picker's own
// applySaved load doesn't pollute the stored values).
(function setupPickerBreakpoints() {
  var PREFIX = '--m-';
  var BPLIST = [
    { name: 'base',   label: '375',   query: null },
    { name: '480up',  label: '480+',  query: 'min-width: 480px' },
    { name: '640up',  label: '640+',  query: 'min-width: 640px' },
    { name: '1024up', label: '1024+', query: 'min-width: 1024px' },
  ];
  var STORAGE_KEY = 'alpha-bp-tokens';
  var capturing = false;
  var editBp = 'base';
  var rebuildTimer = null;

  var stores = { base: {}, '480up': {}, '640up': {}, '1024up': {} };
  try {
    var saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
    ['base', '480up', '640up', '1024up'].forEach(function(k) { if (saved[k]) stores[k] = saved[k]; });
  } catch(e) {}

  var styleEls = {};
  BPLIST.forEach(function(bp) {
    var el = document.createElement('style');
    el.id = 'alpha-bp-' + bp.name;
    document.head.appendChild(el);
    styleEls[bp.name] = el;
    buildStyle(bp.name);
  });

  function buildStyle(bpName) {
    var bp = BPLIST.find(function(b) { return b.name === bpName; });
    if (!bp || !bp.query) return; // base handled by picker's own inline mechanism
    var rules = Object.keys(stores[bpName]).map(function(k) {
      return '  ' + k + ': ' + stores[bpName][k] + ' !important;';
    }).join('\n');
    styleEls[bpName].textContent = rules
      ? '@media (' + bp.query + ') {\n:root {\n' + rules + '\n}\n}'
      : '';
  }

  function scheduleRebuild(bpName) {
    clearTimeout(rebuildTimer);
    rebuildTimer = setTimeout(function() {
      buildStyle(bpName);
      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(stores)); } catch(e) {}
    }, 16);
  }

  // Intercept setProperty: only for --m-* tokens when picker is open
  var _orig = CSSStyleDeclaration.prototype.setProperty;
  CSSStyleDeclaration.prototype.setProperty = function(name, value, priority) {
    // For non-base breakpoints: store + rebuild @media block, do NOT set inline style.
    // Inline style always wins over @media !important regardless of specificity, so we
    // must let the @media block alone handle live preview at the correct viewport width.
    if (capturing && editBp !== 'base' && this === document.documentElement.style && name.startsWith(PREFIX)) {
      stores[editBp][name] = value;
      buildStyle(editBp); // synchronous so preview is instant
      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(stores)); } catch(e) {}
      return; // skip inline style — @media block handles it
    }
    return _orig.call(this, name, value, priority);
  };

  // Expose for the screen/title injector below
  window.__alphaPickerBp = {
    bpList: BPLIST,
    editBp: function() { return editBp; },
    setEditBp: function(name) {
      editBp = name;
      document.querySelectorAll('.alpha-bp-btn').forEach(function(btn) {
        var active = btn.dataset.bp === name;
        btn.style.color = active ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.35)';
        btn.style.background = active ? 'rgba(255,255,255,0.14)' : 'transparent';
      });
    },
  };

  // Start capturing once the picker panel first appears (user opened it)
  new MutationObserver(function(_, obs) {
    if (document.querySelector('#sp-panel')) {
      capturing = true;
      obs.disconnect();
    }
  }).observe(document.body, { childList: true, subtree: true });
})();

// ── Per-screen picker ──────────────────────────────────────────────────────
// Filters tabs to current screen, injects screen title + breakpoint buttons.
(function setupPickerPerScreen() {
  var SCREEN_TAB   = { portfolio: 'Portfolio', score: 'Score', chat: 'Chat', notebook: 'Chat' };
  var SCREEN_LABEL = { portfolio: 'Portfolio', score: 'Score', chat: 'Ask α', notebook: 'Notebook' };
  var SCREEN_TABS  = ['Portfolio', 'Score', 'Chat', 'Navigation'];

  function applyFilter(screen) {
    var panel = document.querySelector('#sp-panel');
    if (!panel) return;

    // ── Screen title bar ──
    var title = panel.querySelector('#sp-screen-title');
    if (!title) {
      title = document.createElement('div');
      title.id = 'sp-screen-title';
      Object.assign(title.style, {
        padding: '8px 14px 7px', fontFamily: 'var(--mono, monospace)',
        fontSize: '9px', letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.35)', borderBottom: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', alignItems: 'center', gap: '8px',
      });
      var dot = document.createElement('span');
      dot.style.cssText = 'width:6px;height:6px;border-radius:50%;background:var(--accent,#D4FF3A);flex-shrink:0;';
      title.appendChild(dot);
      var lbl = document.createElement('span'); lbl.id = 'sp-screen-label';
      title.appendChild(lbl);
      var spContent = panel.querySelector('#sp-tabs') || panel.firstChild;
      if (spContent) panel.insertBefore(title, spContent);

      // ── Breakpoint buttons (injected once, below the title) ──
      var bpBar = document.createElement('div');
      bpBar.id = 'sp-alpha-bpbar';
      Object.assign(bpBar.style, {
        display: 'flex', gap: '4px', padding: '6px 14px 8px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      });
      var bpKicker = document.createElement('span');
      Object.assign(bpKicker.style, {
        fontFamily: 'var(--mono,monospace)', fontSize: '9px', letterSpacing: '0.2em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,0.2)',
        display: 'flex', alignItems: 'center', marginRight: '6px',
      });
      bpKicker.textContent = 'BP';
      bpBar.appendChild(bpKicker);
      var bpCtrl = window.__alphaPickerBp;
      (bpCtrl ? bpCtrl.bpList : []).forEach(function(bp) {
        var btn = document.createElement('button');
        btn.className = 'alpha-bp-btn';
        btn.dataset.bp = bp.name;
        btn.textContent = bp.label;
        Object.assign(btn.style, {
          background: bp.name === 'base' ? 'rgba(255,255,255,0.14)' : 'transparent',
          border: 'none', cursor: 'pointer',
          fontFamily: 'var(--mono,monospace)', fontSize: '9px', letterSpacing: '0.14em',
          color: bp.name === 'base' ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.35)',
          padding: '3px 8px', borderRadius: '2px',
        });
        btn.onclick = function() { if (bpCtrl) bpCtrl.setEditBp(bp.name); };
        bpBar.appendChild(btn);
      });
      title.after(bpBar);

      // ── Section theme bar (injected once, below bp bar) ──
      var themeBar = document.createElement('div');
      themeBar.id = 'sp-alpha-themebar';
      Object.assign(themeBar.style, {
        display: 'flex', alignItems: 'center', gap: '4px', padding: '6px 14px 8px',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      });
      var themeKicker = document.createElement('span');
      Object.assign(themeKicker.style, {
        fontFamily: 'var(--mono,monospace)', fontSize: '9px', letterSpacing: '0.2em',
        textTransform: 'uppercase', color: 'rgba(255,255,255,0.2)',
        marginRight: '6px',
      });
      themeKicker.textContent = 'SECTION';
      themeBar.appendChild(themeKicker);

      var THEME_STORAGE = 'alpha-section-themes';
      function getSectionThemes() {
        try { return JSON.parse(localStorage.getItem(THEME_STORAGE) || '{}'); } catch(e) { return {}; }
      }
      function setSectionTheme(scr, val) {
        var el = document.querySelector('[data-screen="' + scr + '"]');
        if (!el) return;
        if (val) { el.setAttribute('data-section-theme', val); }
        else { el.removeAttribute('data-section-theme'); }
        var map = getSectionThemes();
        if (val) { map[scr] = val; } else { delete map[scr]; }
        try { localStorage.setItem(THEME_STORAGE, JSON.stringify(map)); } catch(e) {}
      }
      // Apply saved on load
      (function() {
        var map = getSectionThemes();
        Object.keys(map).forEach(function(s) { setSectionTheme(s, map[s]); });
      })();

      ['dark', 'light'].forEach(function(val) {
        var btn = document.createElement('button');
        btn.className = 'alpha-theme-btn';
        btn.dataset.theme = val;
        btn.textContent = val === 'dark' ? '◑ Dark' : '○ Light';
        Object.assign(btn.style, {
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'var(--mono,monospace)', fontSize: '9px', letterSpacing: '0.14em',
          color: 'rgba(255,255,255,0.35)', padding: '3px 8px', borderRadius: '2px',
        });
        btn.onclick = function() {
          var scr = document.documentElement.getAttribute('data-active-screen') || 'portfolio';
          var current = getSectionThemes()[scr];
          var next = current === val ? null : val;
          setSectionTheme(scr, next);
          updateThemeBtns(scr);
        };
        themeBar.appendChild(btn);
      });

      // Reset button
      var resetBtn = document.createElement('button');
      resetBtn.id = 'sp-theme-reset';
      resetBtn.textContent = '↺';
      Object.assign(resetBtn.style, {
        background: 'transparent', border: 'none', cursor: 'pointer', marginLeft: 'auto',
        fontFamily: 'var(--mono,monospace)', fontSize: '11px',
        color: 'rgba(255,255,255,0.2)', padding: '3px 6px',
      });
      resetBtn.onclick = function() {
        var scr = document.documentElement.getAttribute('data-active-screen') || 'portfolio';
        setSectionTheme(scr, null);
        updateThemeBtns(scr);
      };
      themeBar.appendChild(resetBtn);
      bpBar.after(themeBar);
    }

    // Update button active states for current screen
    function updateThemeBtns(screen) {
      var bar = document.querySelector('#sp-alpha-themebar');
      if (!bar) return;
      var current = (function() { try { return JSON.parse(localStorage.getItem('alpha-section-themes') || '{}')[screen]; } catch(e) { return null; } })();
      bar.querySelectorAll('.alpha-theme-btn').forEach(function(btn) {
        var active = btn.dataset.theme === current;
        btn.style.background = active ? 'rgba(255,255,255,0.14)' : 'transparent';
        btn.style.color = active ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.35)';
      });
    }

    var labelEl = panel.querySelector('#sp-screen-label');
    if (labelEl) labelEl.textContent = 'Editing · ' + (SCREEN_LABEL[screen] || screen).toUpperCase();
    updateThemeBtns(screen);

    // ── Tab filter ──
    var targetTab = SCREEN_TAB[screen] || '';
    panel.querySelectorAll('#sp-tabs .sp-tab').forEach(function(tab) {
      var name = tab.getAttribute('data-tab') || '';
      if (SCREEN_TABS.indexOf(name) === -1) return;
      var isTarget = (name === targetTab);
      var isNav    = (name === 'Navigation' && screen !== 'portfolio');
      tab.style.display = (isTarget || isNav) ? '' : 'none';
    });
  }

  var bodyObs = new MutationObserver(function() {
    var panel = document.querySelector('#sp-panel');
    if (!panel) return;
    bodyObs.disconnect();
    var screen = document.documentElement.getAttribute('data-active-screen') || 'portfolio';
    applyFilter(screen);
    new MutationObserver(function() {
      applyFilter(document.documentElement.getAttribute('data-active-screen') || 'portfolio');
    }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-active-screen'] });
    new MutationObserver(function() {
      applyFilter(document.documentElement.getAttribute('data-active-screen') || 'portfolio');
    }).observe(panel, { childList: true, subtree: true });
  });
  bodyObs.observe(document.body, { childList: true, subtree: true });
})();