// app.jsx — root: state, context, routing, tweaks (7-hub IA)
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#e03131",
  "density": "regular",
  "fontScale": 1,
  "poolLayout": "table",
  "sidebar": "expanded"
}/*EDITMODE-END*/;

const ACCENTS = {
  '#e03131': { h: 25, c: 0.205, l: 0.585, name: 'Đỏ Nhật' },
  '#2f6fed': { h: 250, c: 0.17, l: 0.585, name: 'Xanh dương' },
  '#12b886': { h: 162, c: 0.15, l: 0.62, name: 'Xanh lá' },
  '#f08c00': { h: 70, c: 0.16, l: 0.68, name: 'Cam' },
};
const DENSITY = { compact: 0.85, regular: 1, comfy: 1.18 };

// Per-hub default tab
const DEFAULT_TABS = {
  sources: 'brands', products: 'pool', content: 'caption',
  schedule: 'calendar', analytics: 'channels', settings: 'general',
};

const HUB_TITLES = {
  dashboard: 'Tổng quan',
  sources:   'Nguồn',
  products:  'Sản phẩm',
  content:   'Nội dung',
  schedule:  'Lên lịch',
  analytics: 'Hiệu suất',
  settings:  'Cài đặt',
  review:    'Duyệt nội dung',
  compose:   'Tạo bài AI',
  more:      'Thêm',
};

const HUB_SUBTITLES = {
  dashboard: '',
  sources:   '',
  products:  '',
  content:   '',
  schedule:  '',
  analytics: '',
  settings:  '',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authed, setAuthed] = useStateA(false);
  const [view, setView] = useStateA('dashboard');
  const [tab, setTabState] = useStateA(null);
  const [reviewId, setReviewId] = useStateA(null);
  const [detailId, setDetailId] = useStateA(null);
  const [composeIds, setComposeIds] = useStateA([]);
  const [collapsed, setCollapsed] = useStateA(false);
  const [addOpen, setAddOpen] = useStateA(false);
  const [toasts, setToasts] = useStateA([]);
  const [products, setProducts] = useStateA(PRODUCTS);
  const [newProductId, setNewProductId] = useStateA(null);

  useEffectA(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', t.theme);
    const a = ACCENTS[t.accent] || ACCENTS['#e03131'];
    root.style.setProperty('--accent-h', a.h);
    root.style.setProperty('--accent-c', a.c);
    root.style.setProperty('--accent-l', a.l);
    root.style.setProperty('--density', DENSITY[t.density] || 1);
    root.style.setProperty('--fs', t.fontScale || 1);
  }, [t.theme, t.accent, t.density, t.fontScale]);

  useEffectA(() => { setCollapsed(t.sidebar === 'collapsed'); }, [t.sidebar]);

  const counts = {
    pool: products.filter(p => p.status === 'pending').length,
    awaiting: POSTS.filter(p => ['text_pending','image_pending'].includes(p.status)).length,
    scheduled: POSTS.filter(p => p.status === 'scheduled').length,
    brandErr: BRANDS.filter(b => b.enabled && b.rate24 < 70).length,
    campaignActive: (typeof CAMPAIGNS !== 'undefined' ? CAMPAIGNS.filter(c => c.status === 'active').length : 0),
    inboxUnread: (typeof INBOX_STATS !== 'undefined' ? (INBOX_STATS.facebook.unreadCount + INBOX_STATS.instagram.unreadCount + INBOX_STATS.zalo.unreadCount) : 0),
    adsActive: (typeof ADS_CAMPAIGNS !== 'undefined' ? ADS_CAMPAIGNS.filter(a => a.status === 'active').length : 0),
  };

  const toast = (msg, icon, color) => {
    const id = Math.random();
    setToasts(ts => [...ts, { id, msg, icon, color }]);
    setTimeout(() => setToasts(ts => ts.filter(x => x.id !== id)), 2800);
  };

  const setTab = (t) => setTabState(t);

  // navigate: go(view) or go(view, tab) or go('review', postId) or go('detail', productId) or go('compose', [productIds])
  const go = (v, payload) => {
    if (v === 'review') { setReviewId(payload); setView('review'); setTabState(null); }
    else if (v === 'detail') { setDetailId(payload); setView('products'); setTabState('detail'); }
    else if (v === 'compose') { setComposeIds(Array.isArray(payload) ? payload : (payload ? [payload] : [])); setView('compose'); setTabState(null); }
    else if (HUB_TABS[v] && payload) { setView(v); setTabState(payload); }
    else { setView(v); setTabState(null); }
    document.querySelector('.page')?.scrollTo(0, 0);
  };

  const activeTab = tab || DEFAULT_TABS[view] || null;

  const addProduct = (p) => {
    setProducts(prev => [p, ...prev]);
    setNewProductId(p.id);
    setTimeout(() => setNewProductId(null), 3000);
  };

  const ctx = {
    go, toast, counts,
    openAdd: () => setAddOpen(true),
    modalOpen: addOpen,
    tab: activeTab, setTab,
    detailId, setDetailId,
    composeIds, setComposeIds,
    products, setProducts, addProduct, newProductId,
  };

  if (!authed) {
    return (
      <>
        <LoginScreen onLogin={() => setAuthed(true)} theme={t.theme} setTheme={(v) => setTweak('theme', v)} />
        <TweaksUI t={t} setTweak={setTweak} />
      </>
    );
  }

  let screen;
  switch (view) {
    case 'dashboard': screen = <DashboardScreen />; break;
    case 'sources':   screen = <SourcesHub tab={activeTab} setTab={setTab} />; break;
    case 'products':  screen = <ProductsHub tab={activeTab} setTab={setTab} layout={t.poolLayout} />; break;
    case 'content':   screen = <ContentHub tab={activeTab} setTab={setTab} />; break;
    case 'schedule':  screen = <ScheduleHub tab={activeTab} setTab={setTab} />; break;
    case 'analytics': screen = <AnalyticsHub tab={activeTab} setTab={setTab} />; break;
    case 'settings':  screen = <SettingsHub tab={activeTab} setTab={setTab} />; break;
    case 'review':    screen = <ReviewScreen postId={reviewId ? (POSTS.find(p => (p.productIds && p.productIds.includes(reviewId)) || p.productId === reviewId)?.id || reviewId) : null} />; break;
    case 'compose':   screen = <ComposeScreen />; break;
    case 'more':      screen = <MoreScreen />; break;
    default: screen = <DashboardScreen />;
  }

  const hasTabs = !!HUB_TABS[view];

  return (
    <AppCtx.Provider value={ctx}>
      <div className="app with-sidebar">
        <Sidebar view={view} go={go} collapsed={collapsed} setCollapsed={(v) => { setCollapsed(v); setTweak('sidebar', v ? 'collapsed' : 'expanded'); }} />
        <div className="main">
          <Topbar title={HUB_TITLES[view] || 'Zei JP'}
                  subtitle={HUB_SUBTITLES[view]}
                  live={['dashboard','products','schedule'].includes(view)}
                  onAdd={() => setAddOpen(true)} theme={t.theme} setTheme={(v) => setTweak('theme', v)} />
          {hasTabs && <HubTabBar hub={view} tab={activeTab} setTab={setTab} />}
          <div className="page">{screen}</div>
        </div>
      </div>
      <MobileNav view={view} go={go} onAdd={() => setAddOpen(true)} />
      {addOpen && <AddProductModal onClose={() => setAddOpen(false)} />}
      <ToastRegion toasts={toasts} />
      <TweaksUI t={t} setTweak={setTweak} />
    </AppCtx.Provider>
  );
}

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Giao diện" />
      <TweakRadio label="Theme" value={t.theme} options={['dark', 'light']} onChange={(v) => setTweak('theme', v)} />
      <TweakColor label="Màu accent" value={t.accent} options={Object.keys(ACCENTS)} onChange={(v) => setTweak('accent', v)} />
      <TweakRadio label="Mật độ" value={t.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)} />
      <TweakSlider label="Cỡ chữ" value={t.fontScale} min={0.9} max={1.15} step={0.05} onChange={(v) => setTweak('fontScale', v)} />
      <TweakSection label="Bố cục" />
      <TweakRadio label="Product Pool" value={t.poolLayout} options={['table', 'cards']} onChange={(v) => setTweak('poolLayout', v)} />
      <TweakRadio label="Sidebar" value={t.sidebar} options={['expanded', 'collapsed']} onChange={(v) => setTweak('sidebar', v)} />
    </TweaksPanel>
  );
}

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