/* ===== App root + router ===== */

const SCREENS = ['signin', 'address', 'analysis', 'conditions', 'survey', 'design', 'tiers', 'checkout'];

const App = () => {
  const [screen, setScreen] = React.useState(() => localStorage.getItem('blossom.screen') || 'signin');
  const [unlocked, setUnlocked] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('blossom.unlocked')) || ['address']; }
    catch { return ['address']; }
  });
  const [tier, setTier] = React.useState('bud');
  const [site, setSite] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('blossom.site')) || null; }
    catch { return null; }
  });
  React.useEffect(() => {
    if (site) localStorage.setItem('blossom.site', JSON.stringify(site));
  }, [site]);
  const [density, setDensity] = React.useState(() => {
    const t = window.BLOSSOM_TWEAKS || {};
    return localStorage.getItem('blossom.density') || t.density || 'spacious';
  });
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // Persist
  React.useEffect(() => { localStorage.setItem('blossom.screen', screen); }, [screen]);
  React.useEffect(() => { localStorage.setItem('blossom.unlocked', JSON.stringify(unlocked)); }, [unlocked]);
  React.useEffect(() => { localStorage.setItem('blossom.density', density); }, [density]);

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

  // Persist density to tweak block
  React.useEffect(() => {
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { density } }, '*');
  }, [density]);

  const goto = (s) => {
    setScreen(s);
    setUnlocked(prev => Array.from(new Set([...prev, s])));
  };

  const reset = () => {
    localStorage.removeItem('blossom.screen');
    localStorage.removeItem('blossom.unlocked');
    localStorage.removeItem('blossom.site');
    setScreen('signin');
    setUnlocked(['address']);
    setSite(null);
  };

  // Render shell for in-flow screens (not signin)
  const inFlow = screen !== 'signin';

  return (
    <div className={`app app--density-${density}`}>
      {inFlow && (
        <Sidebar current={screen} unlocked={unlocked} onJump={goto} compact={density === 'compact'} />
      )}
      <main className="stage">
        {screen === 'signin' && <SignIn onContinue={() => goto('address')} />}
        {inFlow && (
          <Topbar
            crumbs={[
              'Emily',
              site?.shortLabel || 'Your property',
              SCREENS.indexOf(screen) >= 0 ? (FLOW_STEPS.find(s => s.id === screen)?.label || '') : ''
            ]}
            actions={
              <>
                <button className="btn btn--text btn--sm" onClick={reset}><Icon name="rotate-ccw" size={14} /> Restart demo</button>
                <button className="btn btn--ghost btn--sm"><Icon name="save" size={14} /> Saved · just now</button>
                <button className="btn btn--ghost btn--sm"><Icon name="share-2" size={14} /></button>
              </>
            }
          />
        )}
        <div className="stage-inner">
          {screen === 'address' && (
            <AddressEntry
              initialSite={site}
              onContinue={(s) => { if (s) setSite(s); goto('analysis'); }}
            />
          )}
          {screen === 'analysis' && <SiteAnalysis site={site} onContinue={() => goto('conditions')} />}
          {screen === 'conditions' && <ConditionsReport onContinue={() => goto('survey')} onBack={() => goto('analysis')} />}
          {screen === 'survey' && <Survey onContinue={() => goto('design')} />}
          {screen === 'design' && <DesignReveal onContinue={() => goto('tiers')} />}
          {screen === 'tiers' && <Tiers onContinue={() => goto('checkout')} selected={tier} setSelected={setTier} />}
          {screen === 'checkout' && <Checkout tierId={tier} onComplete={() => {}} />}
        </div>
      </main>
      {tweaksOpen && <Tweaks density={density} setDensity={setDensity} onClose={() => setTweaksOpen(false)} />}
    </div>
  );
};

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