const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function titleFor(section, lang) {
  const t = (k) => window.__t(k, lang);
  const dash = t('crumb.dashboard') + ' / ';
  const titles = {
    overview: { title: t('title.overview'),   em: t('title.overview.em'),  crumb: dash + t('nav.overview') },
    chat:     { title: t('title.chat'),       em: t('title.chat.em'),      crumb: dash + t('nav.chat') },
    leads:    { title: t('title.leads'),      em: t('title.leads.em'),     crumb: dash + t('nav.leads') },
    analytics:{ title: t('title.analytics'),  em: '',                       crumb: dash + t('nav.analytics') },
    swot:     { title: t('title.swot'),       em: t('title.swot.em'),      crumb: dash + t('nav.swot') },
    settings: { title: t('title.settings'),   em: '',                       crumb: dash + t('nav.settings') },
  };
  const c = titles[section] || titles.overview;
  // Render as "<prefix> <em>" — or just title if no em
  if (c.em && c.title.includes(c.em)) {
    const parts = c.title.split(c.em);
    return { title: <>{parts[0]}<em>{c.em}</em>{parts[1]}</>, crumb: c.crumb };
  }
  return { title: <em>{c.title}</em>, crumb: c.crumb };
}

const TweaksPanel = ({ open, onClose, theme, setTheme }) => {
  if (!open) return null;
  return (
    <div className="tweaks-panel open">
      <div className="head">
        <h4>Tweaks</h4>
        <button className="close" onClick={onClose}>×</button>
      </div>
      <div className="body">
        <div className="tweak-row">
          <span className="lab">Theme</span>
          <div className="pill-tabs">
            <button className={theme === 'light' ? 'active' : ''} onClick={() => setTheme('light')}>Day</button>
            <button className={theme === 'dark' ? 'active' : ''} onClick={() => setTheme('dark')}>Night</button>
          </div>
        </div>
      </div>
    </div>
  );
};

// Sections available in Easy mode. Advanced mode unlocks everything.
const EASY_SECTIONS = ['overview', 'chat', 'leads'];

// Separate "seen" flags per tutorial so Easy and Advanced each get their own walkthrough once.
const onboardingKey = (userId, mode) => `fnre-onboarded-${mode}-` + (userId || 'anon');
const seenOnboarding = (userId, mode) => {
  try { return !!localStorage.getItem(onboardingKey(userId, mode)); } catch (e) { return true; }
};

const Dashboard = ({ session, theme, setTheme, lang, setLang }) => {
  const uid = session?.user?.id;
  // Mode always starts on Easy each session (not persisted by design).
  const [mode, setMode] = useStateApp('easy');

  const saved = (typeof localStorage !== 'undefined' && localStorage.getItem('almanara-section')) || 'overview';
  // On first paint we're in Easy mode, so never restore into an Advanced-only section.
  const [section, setSection] = useStateApp(EASY_SECTIONS.includes(saved) ? saved : 'overview');
  const [tweaksOpen, setTweaksOpen] = useStateApp(false);
  const [mobileNavOpen, setMobileNavOpen] = useStateApp(false);

  const handleNav = (key) => { setSection(key); setMobileNavOpen(false); };

  // Which tutorial is currently showing: 'easy', 'advanced', or null.
  // First-ever visit lands in Easy mode → play the Easy tour if it hasn't been seen.
  const [onbMode, setOnbMode] = useStateApp(() => (seenOnboarding(uid, 'easy') ? null : 'easy'));

  // Switch Easy ⇆ Advanced. Trigger that mode's tutorial the first time it's opened,
  // and bounce out of any section the new mode can't show.
  const changeMode = (next) => {
    if (next === mode) return;
    setMode(next);
    setMobileNavOpen(false);
    if (next === 'easy' && !EASY_SECTIONS.includes(section)) setSection('overview');
    if (!seenOnboarding(uid, next)) setOnbMode(next);
  };

  // Tutorial popup nav bridge
  useEffectApp(() => {
    const onNav = (e) => { if (typeof e.detail === 'string') setSection(e.detail); };
    window.addEventListener('nav-to-section', onNav);
    return () => window.removeEventListener('nav-to-section', onNav);
  }, []);

  const finishOnboarding = () => {
    if (onbMode) { try { localStorage.setItem(onboardingKey(uid, onbMode), '1'); } catch (e) {} }
    setOnbMode(null);
  };

  useEffectApp(() => {
    localStorage.setItem('almanara-section', section);
  }, [section]);

  useEffectApp(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      else 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);
  }, []);

  useEffectApp(() => {
    if (!tweaksOpen) return;
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme } }, '*');
  }, [theme]);

  const isEasy = mode === 'easy';
  const meta = titleFor(section, lang);
  return (
    <div className="app">
      <Sidebar current={section} onNav={handleNav} session={session} lang={lang} mode={mode} mobileOpen={mobileNavOpen} onCloseMobile={() => setMobileNavOpen(false)} />
      <div className="main">
        <TopBar title={meta.title} crumb={meta.crumb} lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} onToggleMobile={() => setMobileNavOpen(o => !o)} mode={mode} setMode={changeMode} />
        {section === 'overview' && <Overview />}
        {section === 'chat' && <Chat />}
        {section === 'leads' && <Leads />}
        {!isEasy && section === 'analytics' && <Analytics />}
        {!isEasy && section === 'swot' && <Swot />}
        {!isEasy && section === 'settings' && <Settings theme={theme} setTheme={setTheme} session={session} />}
      </div>
      <TweaksPanel open={tweaksOpen} onClose={() => setTweaksOpen(false)} theme={theme} setTheme={setTheme} />
      {onbMode && <OnboardingOverlay key={onbMode} mode={onbMode} section={section} setSection={setSection} onDone={finishOnboarding} lang={lang} />}
      <LeadTutorialPopup />
    </div>
  );
};

const App = () => {
  const [session, setSession] = useStateApp(undefined); // undefined = loading, null = signed out, object = signed in
  const [theme, setTheme] = useStateApp(() => {
    try { return localStorage.getItem('fnre-theme') || TWEAK_DEFAULTS.theme; } catch (e) { return TWEAK_DEFAULTS.theme; }
  });
  const [lang, setLang] = useStateApp(() => {
    try { return localStorage.getItem('fnre-lang') || 'en'; } catch (e) { return 'en'; }
  });

  useEffectApp(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('fnre-theme', theme); } catch (e) {}
  }, [theme]);

  useEffectApp(() => {
    document.documentElement.setAttribute('lang', lang);
    document.documentElement.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
    window.__lang = lang;
    try { localStorage.setItem('fnre-lang', lang); } catch (e) {}
  }, [lang]);

  useEffectApp(() => {
    let mounted = true;
    window.__api.getSession().then(s => { if (mounted) setSession(s || null); });
    const { data: { subscription } } = window.__api.onAuthChange((s, event) => {
      setSession(s || null);
    });
    return () => { mounted = false; subscription?.unsubscribe?.(); };
  }, []);

  if (session === undefined) {
    return (
      <div style={{
        minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--bg)'
      }}>
        <div className="spinner lg" />
      </div>
    );
  }

  if (!session) return <Login lang={lang} />;

  return <Dashboard session={session} theme={theme} setTheme={setTheme} lang={lang} setLang={setLang} />;
};

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