// screen-hubs.jsx — 7-hub wrapper screens with tab routing
// Each hub composes existing or new sub-screens. Placeholders indicate
// features rolling out in later batches.
const { useState: useStateH } = React;

/* ============ Placeholder for future tabs ============ */
function ComingSoonTab({ title, desc, icon, batch }) {
  return (
    <div className="page-pad" style={{ maxWidth: 720 }}>
      <div className="card card-pad" style={{ textAlign: 'center', padding: '48px 24px' }}>
        <div style={{ display: 'inline-grid', placeItems: 'center', width: 72, height: 72, borderRadius: 24, background: 'var(--surface-2)', color: 'var(--accent)', marginBottom: 18 }}>
          <Icon name={icon || 'sparkle'} size={32} stroke={1.6} />
        </div>
        <div className="t-h1" style={{ marginBottom: 6 }}>{title}</div>
        <div className="t-sm dim" style={{ maxWidth: 460, margin: '0 auto 18px' }}>{desc}</div>
        {batch && (
          <div className="row gap-sm" style={{ justifyContent: 'center' }}>
            <Badge variant="accent" icon="rocket">{batch}</Badge>
            <span className="t-2xs dimmer">Đang lăn theo lịch upgrade V3+</span>
          </div>
        )}
      </div>
    </div>
  );
}

/* ============ SOURCES HUB ============ */
function SourcesHub({ tab, setTab }) {
  switch (tab) {
    case 'brands':     return <BrandsScreen />;
    case 'crawl':      return <CrawlJobsScreen />;
    case 'campaigns':  return <CampaignsScreen />;
    case 'watchlist':  return <WatchlistScreen />;
    case 'brand-cfg':  return <SettingsBrandsScreen />;
    case 'detection':  return <SettingsDetectionScreen />;
    default: return <BrandsScreen />;
  }
}

/* ============ PRODUCTS HUB ============ */
function ProductsHub({ tab, setTab, layout }) {
  const app = useApp();
  switch (tab) {
    case 'pool':    return <ProductsScreen layout={layout} />;
    case 'detail':  return <ProductDetailTab id={app.detailId} />;
    case 'presets': return <ComingSoonTab title="Bộ lọc lưu sẵn"
                            desc="Bộ lọc lưu sẵn như 'Deal cao hôm nay', 'Voucher ≥20%', 'Tồn kho thấp', 'Brand mới', 'Điểm ≥80'. Một lần bấm là áp dụng, có thể chia sẻ cho nhóm."
                            icon="filter" batch="Batch 5" />;
    case 'score':   return <SettingsScoreScreen />;
    default: return <ProductsScreen layout={layout} />;
  }
}

function ProductDetailTab({ id }) {
  const p = id ? PRODUCTS.find(x => x.id === id) : null;
  if (!p) {
    return <ComingSoonTab title="Chi tiết sản phẩm"
              desc="Bấm vào sản phẩm trong Kho sản phẩm để mở chi tiết. Trang sẽ hiển thị chi tiết điểm phân loại, ảnh đầy đủ, lịch sử giá, các biến thể, JSON-LD gốc, nhật ký thu thập."
              icon="target" batch="Batch 5" />;
  }
  const b = brandOf(p.brand);
  return (
    <div className="page-pad">
      <div className="row gap-sm" style={{ marginBottom: 14 }}>
        <BrandLogo brand={b} size={30} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="t-h2 clip-1">{p.titleVn}</div>
          <div className="t-xs dimmer clip-1">{p.titleJp} · {b.name} · SKU {p.sku}</div>
        </div>
        <Score value={p.score} />
        <StatusPill status={p.status} />
      </div>
      <div className="banner banner-warn" style={{ marginBottom: 14 }}>
        <Icon name="alert" size={16} style={{ color: 'var(--yellow)' }} />
        <span className="t-xs">Breakdown đầy đủ (coupon, VND, confidence, missing fields, regex evidence) sẽ ra Batch 5.</span>
      </div>
      <div className="grid-2" style={{ gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Placeholder label={p.label} brand={b} ratio="3/4" />
        <div className="card card-pad">
          <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>GIÁ</div>
          <div className="t-display mono" style={{ fontSize: 22 }}>{fmtJPY(p.jpy)} → {fmtVND(p.vnd)}</div>
          {p.jpyOld && <div className="t-xs dimmer mono" style={{ marginTop: 4 }}>Gốc {fmtJPY(p.jpyOld)} · giảm {p.disc}%</div>}
          <div className="divider"></div>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>SIZE · MÀU</div>
          <div className="t-sm">{p.sizes.join(' / ')} · {p.colors} màu</div>
          <div className="divider"></div>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>MÔ TẢ</div>
          <div className="t-sm dim">{p.desc}</div>
        </div>
      </div>
    </div>
  );
}

/* ============ CONTENT HUB ============ */
function ContentHub({ tab, setTab }) {
  switch (tab) {
    case 'caption': return <CaptionLabScreen />;
    case 'visual':  return <VisualLabScreen />;
    case 'tone':    return <SettingsToneScreen />;
    default: return <CaptionLabScreen />;
  }
}

/* ============ SCHEDULE HUB ============ */
function ScheduleHub({ tab, setTab }) {
  switch (tab) {
    case 'calendar':    return <CalendarScreen />;
    case 'queue':       return <QueueScreen />;
    case 'log':         return <PublishLogScreen />;
    case 'channel-cfg': return <SettingsScreen forceTab="channel" />;
    default: return <CalendarScreen />;
  }
}

/* ============ ANALYTICS HUB ============ */
function AnalyticsHub({ tab, setTab }) {
  switch (tab) {
    case 'channels': return <ChannelsAnalyticsTab />;
    case 'posts':    return <PostsAnalyticsScreen />;
    case 'ads':      return <AdsAnalyticsTab />;
    case 'inbox':    return <InboxAnalyticsTab />;
    case 'archive':  return <ArchiveScreen />;
    default: return <ChannelsAnalyticsTab />;
  }
}

function ChannelsAnalyticsTab() {
  return (
    <div className="page-pad">
      <SocialStatsSection />
    </div>
  );
}

/* ============ SETTINGS HUB (chỉ còn cấu hình toàn cục) ============ */
function SettingsHub({ tab, setTab }) {
  switch (tab) {
    case 'general':   return <SettingsScreen forceTab="fx" />;
    case 'phases':    return <SettingsPhasesScreen />;
    case 'api':       return <SettingsScreen forceTab="ai" />;
    case 'team':      return <SettingsTeamScreen />;
    default: return <SettingsScreen forceTab="fx" />;
  }
}

// Ads & Inbox tabs are real screens defined in screen-analytics.jsx (B4).
// Fallback stubs in case the file fails to load — should never render once B4 ships.
if (typeof window.AdsAnalyticsTab === 'undefined') {
  window.AdsAnalyticsTab = function () {
    return <ComingSoonTab title="Quảng cáo" desc="Đang nạp module Quảng cáo" icon="megaphone" batch="Đang tải" />;
  };
}
if (typeof window.InboxAnalyticsTab === 'undefined') {
  window.InboxAnalyticsTab = function () {
    return <ComingSoonTab title="Inbox" desc="Đang nạp module Inbox" icon="mail" batch="Đang tải" />;
  };
}

Object.assign(window, {
  ComingSoonTab,
  SourcesHub, ProductsHub, ContentHub, ScheduleHub, AnalyticsHub, SettingsHub,
  ProductDetailTab, ChannelsAnalyticsTab,
});