/* global React, window, Icon, Sidebar, TopBar, Dashboard, MarketCharts, LiveStudio, Leads, REGIONS, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle, TweakRadio, NAV */
/* ============================================================
   Root app — shell, routing, tweaks
   ============================================================ */
const { useState: useA, useEffect: useAe } = React;

const ACCENTS = {
  green: { a: '#64BC64', p: '#4FA84F' },
  teal:  { a: '#2FA39B', p: '#23837C' },
  blue:  { a: '#2F6FB5', p: '#255C99' },
};

function Placeholder({ id }) {
  const meta = (NAV.find((n) => n.id === id)) || { label: id, icon: 'sparkles' };
  const notes = {
    insights: ['Market Summary', 'Client Explanation', 'Social Content (小红书 / 朋友圈 / LinkedIn)', 'Q&A library'],
    reports: ['Report Builder (3-column)', 'Market / Seller / Buyer / Investor / Live templates', 'PDF · PNG pack · private link · email'],
    cma: ['Subject Property → Comparable Sold', 'Active Competition', 'Pricing Range (conservative / market / aggressive)', 'Seller Presentation export'],
    admin: ['Data Import & field mapping', 'Data Cleaning & Quality (red/yellow/green)', 'Region Taxonomy · Metric Definitions', 'Brand & Template Manager'],
  };
  return (
    <div className="fade-up" style={{ display: 'grid', placeItems: 'center', height: '100%', minHeight: 400 }}>
      <div className="card" style={{ padding: 40, maxWidth: 520, textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: 14, background: 'rgba(100,188,100,0.14)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}>
          <Icon name={meta.icon} size={26} color="var(--accent)" />
        </div>
        <h2 style={{ margin: '0 0 8px', fontSize: 22, fontWeight: 700 }}>{meta.label}</h2>
        <p style={{ fontSize: 13.5, color: 'var(--ink-2)', margin: '0 0 18px' }}>This module is specced in the doc and slotted for the next build phase. Planned surface:</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, textAlign: 'left' }}>
          {(notes[id] || []).map((t, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, background: 'var(--panel-2)', border: '1px solid var(--line)', borderRadius: 7, padding: '10px 13px' }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />{t}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "dark": false,
  "density": "comfy",
  "collapsed": false,
  "audience": "client"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useA('dashboard');
  const [region, setRegion] = useA('york');
  const [lang, setLang] = useA('Bi');
  const [audience, setAudience] = useA(t.audience || 'client');

  // sync audience tweak → state
  useAe(() => { setAudience(t.audience); }, [t.audience]);

  // apply accent vars
  useAe(() => {
    const ac = ACCENTS[t.accent] || ACCENTS.green;
    document.documentElement.style.setProperty('--accent', ac.a);
    document.documentElement.style.setProperty('--accent-press', ac.p);
  }, [t.accent]);

  useAe(() => { window.scrollTo(0, 0); }, [view]);

  const screens = {
    dashboard: <Dashboard region={region} setView={setView} lang={lang} />,
    charts: <MarketCharts audience={audience} setAudience={(a) => { setAudience(a); setTweak('audience', a); }} setView={setView} />,
    compare: <Compare setView={setView} />,
    live: <LiveStudio setView={setView} />,
    leads: <Leads />,
  };

  return (
    <div className="app" data-collapsed={t.collapsed} data-mode={t.dark ? 'dark' : 'light'} data-density={t.density === 'compact' ? 'compact' : 'comfy'}>
      <Sidebar view={view} setView={setView} collapsed={t.collapsed} />
      <TopBar onToggle={() => setTweak('collapsed', !t.collapsed)} region={region} setRegion={setRegion}
        lang={lang} setLang={setLang} exportN={2} regions={REGIONS} />
      <main className="scroll" style={{ gridArea: 'main', overflowY: 'auto', padding: 'clamp(16px, 2.4vw, 28px)' }}>
        {screens[view] || <Placeholder id={view} />}
      </main>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent === 'green' ? '#64BC64' : t.accent === 'teal' ? '#2FA39B' : '#2F6FB5'}
          options={['#64BC64', '#2FA39B', '#2F6FB5']}
          onChange={(hex) => setTweak('accent', hex === '#64BC64' ? 'green' : hex === '#2FA39B' ? 'teal' : 'blue')} />
        <TweakToggle label="Dark workspace" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density === 'compact' ? 'compact' : 'comfy'} options={['comfy', 'compact']} onChange={(v) => setTweak('density', v)} />
        <TweakToggle label="Collapse sidebar" value={t.collapsed} onChange={(v) => setTweak('collapsed', v)} />
        <TweakSection label="AI Insights" />
        <TweakRadio label="Audience" value={t.audience} options={['client', 'agent', 'live']} onChange={(v) => setTweak('audience', v)} />
      </TweaksPanel>
    </div>
  );
}

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