// Meta Ads Flow — Main App

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "showStyleChip": true,
  "headerStatus": true,
  "lang": "vi",
  "platform": "meta"
}/*EDITMODE-END*/;

const initialSections = {
  product: {
    style: DEFAULT_STYLES.product,
    versions: PRODUCT_VERSIONS,
    activeId: PRODUCT_VERSIONS[0].id,
    model: 'agent-standard',
    styleId: 'analytical',
    linkedSources: [],
  },
  persona: {
    style: DEFAULT_STYLES.persona,
    versions: PERSONA_VERSIONS,
    activeId: PERSONA_VERSIONS[0].id,
    model: 'agent-standard',
    styleId: 'analytical',
    linkedSources: ['product'],
  },
  content: {
    style: DEFAULT_STYLES.content,
    versions: CONTENT_VERSIONS,
    activeId: CONTENT_VERSIONS[0].id,
    model: 'agent-creative',
    styleId: 'creative',
    linkedSources: ['product', 'persona'],
  },
  ads: {
    style: DEFAULT_STYLES.ads,
    versions: ADS_VERSIONS,
    activeId: ADS_VERSIONS[0].id,
    model: 'agent-pro',
    styleId: 'analytical',
    linkedSources: ['product', 'persona', 'content'],
  },
  data: {
    style: DEFAULT_STYLES.data,
    versions: ADS_DATA_VERSIONS,
    activeId: ADS_DATA_VERSIONS[0].id,
    model: 'agent-pro',
    styleId: 'analytical',
    linkedSources: ['persona', 'ads'],
  },
};

const SECTION_TITLES = {
  product:        { vi: 'Sản phẩm',             en: 'Product brief',                eyebrow: 'Stage 01 · Foundation'        },
  persona:        { vi: 'Chân dung khách hàng',  en: 'Customer funnel',              eyebrow: 'Stage 02 · Audience'          },
  content:        { vi: 'Content & Plans',       en: 'Content plans',                eyebrow: 'Stage 03 · Creative'          },
  ads:            { vi: 'Digital Ads · Meta',    en: 'Meta Ads setup',               eyebrow: 'Stage 04 · Distribution'      },
  data:           { vi: 'Ads Data',              en: 'CSV analyzer · ROAS insights', eyebrow: 'Stage 05 · Optimization'      },
  map:            { vi: 'Map tổng',              en: 'Workflow canvas',              eyebrow: 'Output · Final orchestration' },
  'user-settings':{ vi: 'Cài đặt',              en: 'Settings',                     eyebrow: 'Account'                      },
  'user-plans':   { vi: 'Gói đăng ký',          en: 'Subscription plans',           eyebrow: 'Account'                      },
  'user-profile': { vi: 'Thông tin tài khoản',  en: 'Account info',                 eyebrow: 'Account'                      },
  'user-help':    { vi: 'Trợ giúp',             en: 'Help',                         eyebrow: 'Account'                      },
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang || 'vi';
  const T = (vi, en) => lang === 'en' ? en : vi;

  // ── All hooks must come before any conditional return ──────────────────────
  const [currentUser, setCurrentUser] = React.useState(() => _authGet()?.user || null);
  const [screen, setScreen]           = React.useState('product');
  const [prevScreen, setPrevScreen]   = React.useState('product');
  const [sections, setSections]       = React.useState(() => {
    const user = _authGet()?.user;
    if (!user) return initialSections;
    try {
      const saved = localStorage.getItem(`loij_sections_v2_${user}`);
      return saved ? JSON.parse(saved) : initialSections;
    } catch { return initialSections; }
  });
  const [mapState, setMapState]       = React.useState({
    nodes: MAP_INITIAL_NODES,
    edges: MAP_INITIAL_EDGES,
    selectedId: 'n-r1',
  });
  const [settingsOpen, setSettingsOpen] = React.useState(false);

  // Save sections to localStorage per user whenever they change
  React.useEffect(() => {
    if (currentUser) {
      localStorage.setItem(`loij_sections_v2_${currentUser}`, JSON.stringify(sections));
    }
  }, [sections, currentUser]);

  // Reload sections when user switches (login with different account)
  React.useEffect(() => {
    if (!currentUser) return;
    try {
      const saved = localStorage.getItem(`loij_sections_v2_${currentUser}`);
      setSections(saved ? JSON.parse(saved) : initialSections);
    } catch { setSections(initialSections); }
  }, [currentUser]);

  // Apply theme to body
  React.useEffect(() => {
    document.body.classList.toggle('light', !tweaks.dark);
    document.body.classList.toggle('no-style-chip', !tweaks.showStyleChip);
  }, [tweaks.dark, tweaks.showStyleChip]);

  // Close settings on Esc
  React.useEffect(() => {
    if (!settingsOpen) return;
    const h = (e) => { if (e.key === 'Escape') setSettingsOpen(false); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [settingsOpen]);

  // Lucide initial render
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons();
    }
  });

  // ── Auth gate — after all hooks ────────────────────────────────────────────
  if (!currentUser) {
    return <AuthGate onLogin={u => setCurrentUser(u)} />;
  }

  const handleLogout = () => {
    _authClear();
    setCurrentUser(null);
  };

  const navigateTo = (id) => { setPrevScreen(screen); setScreen(id); };
  const goBack     = ()   => setScreen(prevScreen);

  const sectionStatus = {
    product: 'saved',
    persona: 'saved',
    content: 'saved',
    ads: 'saved',
    data: 'saved',
  };

  const updateSection = (key, patch) =>
    setSections(s => ({ ...s, [key]: { ...s[key], ...patch } }));

  const renderScreen = () => {
    if (screen === 'product') return <ScreenProduct section={sections.product} onUpdateSection={(p) => updateSection('product', p)} allSections={sections} lang={lang} />;
    if (screen === 'persona') return <ScreenPersona section={sections.persona} onUpdateSection={(p) => updateSection('persona', p)} allSections={sections} lang={lang} />;
    if (screen === 'content') return <ScreenContent section={sections.content} onUpdateSection={(p) => updateSection('content', p)} allSections={sections} lang={lang} />;
    if (screen === 'ads')     return <ScreenAds     section={sections.ads}     onUpdateSection={(p) => updateSection('ads', p)}     allSections={sections} lang={lang} />;
    if (screen === 'data')    return <ScreenData    section={sections.data}    onUpdateSection={(p) => updateSection('data', p)}    lang={lang} />;
    if (screen === 'map')     return <ScreenMap     mapState={mapState}        onUpdateMap={(p) => setMapState(m => ({ ...m, ...p }))} lang={lang} />;
    if (screen === 'user-settings') return <UMSettingsPage lang={lang} onLangChange={(v) => setTweak('lang', v)} tweaks={tweaks} setTweak={setTweak} onOpenAdvanced={() => setSettingsOpen(true)} />;
    if (screen === 'user-plans')    return <UMPlansPage    lang={lang} />;
    if (screen === 'user-profile')  return <UMProfilePage  lang={lang} currentUser={currentUser} />;
    if (screen === 'user-help')     return <UMHelpPage     lang={lang} />;
    return null;
  };

  const t_title  = SECTION_TITLES[screen] || SECTION_TITLES['product'];
  const isUserPage = screen.startsWith('user-');

  const headerStatus = (!isUserPage && tweaks.headerStatus)
    ? (screen === 'map'
        ? { label: T('Auto-orchestrating', 'Auto-orchestrating'), color: 'var(--accent-cyan)', bg: 'rgba(102,252,241,0.10)', pulse: true }
        : { label: T('Đã lưu', 'Saved'), color: 'var(--success)', bg: 'rgba(74,222,128,0.10)', pulse: false })
    : null;

  const userMenuNode = (
    <UserMenu
      currentUser={currentUser}
      onLogout={handleLogout}
      lang={lang}
      onLangChange={(v) => setTweak('lang', v)}
      onNavigate={navigateTo}
      onOpenSettings={() => setSettingsOpen(true)}
    />
  );

  const headerRight = isUserPage ? (
    <React.Fragment>
      <Btn variant="ghost" size="sm" icon="arrow-left" onClick={goBack}>{T('Quay lại', 'Back')}</Btn>
      <span style={{ width: 1, height: 22, background: 'var(--border)', margin: '0 2px' }} />
      {userMenuNode}
    </React.Fragment>
  ) : (
    userMenuNode
  );

  return (
    <div className="app-shell">
      <PipelineNav
        current={screen}
        onNav={setScreen}
        sectionStatus={sectionStatus}
        productName={PRODUCT_NAME}
        onOpenSettings={() => setSettingsOpen(true)}
        lang={lang}
        platform={tweaks.platform || 'meta'}
        onPlatformChange={(v) => setTweak('platform', v)}
      />
      <main className="app-main">
        <ScreenHead
          eyebrow={t_title.eyebrow}
          vi={lang === 'en' ? t_title.en : t_title.vi}
          en={lang === 'en' ? t_title.vi : t_title.en}
          status={headerStatus}
          right={headerRight}
        />
        {renderScreen()}
      </main>

      <SettingsModal
        open={settingsOpen}
        onClose={() => setSettingsOpen(false)}
        lang={lang}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label={T('Giao diện', 'Theme')} />
        <TweakRadio
          label={T('Chế độ', 'Mode')} value={tweaks.dark ? 'dark' : 'light'}
          options={[{value: 'dark', label: 'Dark'}, {value: 'light', label: 'Light'}]}
          onChange={(v) => setTweak('dark', v === 'dark')}
        />
        <TweakRadio
          label={T('Ngôn ngữ', 'Language')} value={lang}
          options={[{value: 'vi', label: 'VI'}, {value: 'en', label: 'EN'}]}
          onChange={(v) => setTweak('lang', v)}
        />
        <TweakSection label="UI" />
        <TweakToggle
          label={T('Style chip', 'Style chip')}
          value={tweaks.showStyleChip}
          onChange={(v) => setTweak('showStyleChip', v)}
        />
        <TweakToggle
          label={T('Trạng thái topbar', 'Header status')}
          value={tweaks.headerStatus}
          onChange={(v) => setTweak('headerStatus', v)}
        />
        <TweakSection label="Pipeline" />
        <TweakButton
          label={T('Reset tất cả section', 'Reset all sections')}
          onClick={() => { setSections(initialSections); if (currentUser) localStorage.removeItem(`loij_sections_v2_${currentUser}`); }}
        />
        <TweakButton
          label={T('Reset map canvas', 'Reset map canvas')}
          secondary
          onClick={() => setMapState({ nodes: MAP_INITIAL_NODES, edges: MAP_INITIAL_EDGES, selectedId: null })}
        />
      </TweaksPanel>
    </div>
  );
}

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