// bkg-tab.jsx — Booking Analytics tab top-level shell
const { Page: BkgPage, PageHeader: BkgPageHeader, Tabs: BkgTabs } = window.OV2_UI || {};

function BookingTab({ t, tweaks, lang, setRoute, onOpenBkgDrawer }) {
  const open = onOpenBkgDrawer || (() => {});
  const state = tweaks.state || 'default';
  const T = window.BKG_T[lang];
  const subTabs = [
    { id: 'snapshot', label: T.sec1 },
    { id: 'pace', label: T.sec2 },
    { id: 'lead', label: T.sec3 },
    { id: 'alos', label: T.sec4 },
    { id: 'cancel', label: T.sec5 },
    { id: 'inventory', label: T.sec6 },
  ];
  const [active, setActive] = React.useState('snapshot');
  const skeleton = state === 'skeleton';

  return (
    <div className="page rev-page">
      <div className="rev-page-head">
        <div className="rev-page-title-row">
          <div>
            <h1 className="rev-page-title">Booking Analytics</h1>
            <div className="rev-page-sub">{lang === 'en' ? 'Cloudbeds · last 30 days' : 'Cloudbeds · последние 30 дней'}</div>
          </div>
          <div className="rev-page-actions">
            <span className="bk-axis-pill" title={T.timeAxisHint}>
              {T.timeAxis}: {T.byBooking} / {T.byStay}
            </span>
          </div>
        </div>
        <div className="rev-subtabs">
          {subTabs.map(st => (
            <button key={st.id} className={`rev-subtab ${active === st.id ? 'on' : ''}`} onClick={() => setActive(st.id)}>
              {st.label}
            </button>
          ))}
        </div>
      </div>

      {skeleton ? (
        <div className="bk-skel">
          {[1, 2, 3].map(i => <div key={i} className="bk-skel-card" />)}
        </div>
      ) : (
        <>
          {active === 'snapshot' && <window.BkgSnapshot state={state} lang={lang} />}
          {active === 'pace' && <window.BkgPaceSection state={state} lang={lang} onOpen={(kind) => kind === 'pickup' ? open('pickup') : null} />}
          {active === 'lead' && <window.BkgLeadSection lang={lang} />}
          {active === 'alos' && <window.BkgAlosSection lang={lang} onOpen={open} />}
          {active === 'cancel' && <window.BkgCancelSection state={state} lang={lang} onOpen={open} />}
          {active === 'inventory' && <window.BkgInventorySection state={state} lang={lang} onOpen={open} />}
        </>
      )}
    </div>
  );
}

window.BookingTab = BookingTab;