// Root App, router, tweaks panel, toast

const App = () => {
  const [route, setRoute] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('dsc-route')) || { page: 'home' }; }
    catch { return { page: 'home' }; }
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS);
  const [toast, setToast] = React.useState(null);

  const nav = (r) => {
    setRoute(r);
    try { localStorage.setItem('dsc-route', JSON.stringify(r)); } catch {}
    window.scrollTo({ top: 0 });
  };

  // Toast API
  React.useEffect(() => {
    window.__toast = (msg) => {
      setToast(msg);
      setTimeout(() => setToast(null), 2600);
    };
  }, []);

  // Apply tweaks to DOM
  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', tweaks.theme);
    root.setAttribute('data-density', tweaks.density);
    const hue = tweaks.accentHue;
    root.style.setProperty('--accent', `oklch(62% 0.17 ${hue})`);
    root.style.setProperty('--accent-ink', `oklch(28% 0.10 ${hue})`);
    root.style.setProperty('--accent-bg', `oklch(${tweaks.theme === 'dark' ? 32 : 94}% 0.04 ${hue})`);
  }, [tweaks]);

  // Tweaks message protocol
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const updateTweak = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  let page;
  switch (route.page) {
    case 'home': page = <Home nav={nav} />; break;
    case 'directory': page = <Directory nav={nav} route={route} />; break;
    case 'directory-mf': page = <ManufacturersDirectory nav={nav} />; break;
    case 'directory-ds': page = <DesignersDirectory nav={nav} />; break;
    case 'operator': page = <OperatorProfile nav={nav} route={route} />; break;
    case 'rfp': page = <RFP nav={nav} />; break;
    case 'admin': page = <Admin nav={nav} />; break;
    case 'pricing': page = <Pricing nav={nav} />; break;
    case 'blog': page = <Blog nav={nav} />; break;
    case 'blog-post': page = <BlogPost nav={nav} route={route} />; break;
    case 'tools': page = <Tools nav={nav} route={route} />; break;
    case 'operator-login': page = <ComingSoon nav={nav} title="Operator login" subtitle="Self-service operator dashboards are on the way." />; break;
    default: page = <Home nav={nav} />;
  }

  return (
    <>
      <Nav route={route} nav={nav} />
      {page}
      {route.page !== 'admin' && <Footer nav={nav} />}

      <div className={`toast ${toast ? 'show' : ''}`}>
        <span className="ok" /> {toast}
      </div>

      <div className={`tweaks ${tweaksOpen ? 'show' : ''}`}>
        <h4>Tweaks <button onClick={() => setTweaksOpen(false)} style={{ fontSize: 16, color: 'var(--ink-3)' }}>×</button></h4>
        <div className="tweak-row">
          <label>Theme</label>
          <div className="opts">
            {['light', 'dark'].map(v => (
              <button key={v} className={tweaks.theme === v ? 'sel' : ''} onClick={() => updateTweak('theme', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Density</label>
          <div className="opts">
            {['comfortable', 'compact'].map(v => (
              <button key={v} className={tweaks.density === v ? 'sel' : ''} onClick={() => updateTweak('density', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Directory layout</label>
          <div className="opts">
            {['grid', 'list', 'map'].map(v => (
              <button key={v} className={tweaks.directoryLayout === v ? 'sel' : ''} onClick={() => updateTweak('directoryLayout', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>Accent hue</label>
          <div className="sw">
            {[250, 75, 25, 350, 150].map(h => (
              <button key={h} className={tweaks.accentHue === h ? 'sel' : ''}
                style={{ background: `oklch(62% 0.17 ${h})` }}
                onClick={() => updateTweak('accentHue', h)} />
            ))}
          </div>
        </div>
        <div style={{ fontSize: 10, color: 'var(--ink-4)', fontFamily: 'var(--ff-mono)', marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line)' }}>
          Use the toolbar toggle to hide these controls.
        </div>
      </div>
    </>
  );
};

// Shell that waits for API data (window.__DSC_DATA_READY) before mounting the real App.
const AppShell = () => {
  const [state, setState] = React.useState({ status: 'loading', error: null });
  React.useEffect(() => {
    if (!window.__DSC_DATA_READY) { setState({ status: 'ready', error: null }); return; }
    window.__DSC_DATA_READY
      .then(() => setState({ status: 'ready', error: null }))
      .catch((err) => setState({ status: 'error', error: err.message || 'Failed to load data' }));
  }, []);

  if (state.status === 'loading') {
    return (
      <div style={{ display: 'grid', placeItems: 'center', height: '100vh', color: 'var(--ink-3)', fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
        Loading directory…
      </div>
    );
  }
  if (state.status === 'error') {
    return (
      <div style={{ display: 'grid', placeItems: 'center', height: '100vh', padding: 24, textAlign: 'center' }}>
        <div>
          <div className="mono muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Directory unavailable</div>
          <div style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 16 }}>Couldn't load data from the API. {state.error}</div>
          <button className="btn" onClick={() => location.reload()}>Retry</button>
        </div>
      </div>
    );
  }
  return <App />;
};

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<AppShell />);