// cust-tab.jsx — Customer Insights tab host

function CustomerInsightsTab({ state = 'default', lang = 'ru', privacyMode = false, dedupCount = 12, onOpenGuest, onOpenSegment, onOpenCohort, onOpenSource, onOpenAtRisk, onOpenChurn }) {
  const t = window.CUST_T[lang];
  const skeleton = state === 'skeleton';
  const empty = state === 'empty';

  return (
    <div className={`cust-tab cust-state-${state}`}>
      <div className="cust-page-head">
        <div>
          <h1 className="cust-page-title">{t.pageTitle}</h1>
          <div className="cust-page-sub">{t.pageSub}</div>
        </div>
        <div className="cust-head-meta">
          <div className={`cust-dedup ${dedupCount > 0 ? 'warn' : 'ok'}`} onClick={() => alert('Dedup management view (out of scope)')}>
            <span className="cust-dedup-icon" aria-hidden>{dedupCount > 0 ? '⚠' : '✓'}</span>
            <span className="cust-dedup-text">
              {dedupCount > 0
                ? <>{dedupCount} {t.dedupWarn} · <span className="cust-dedup-link">{t.dedupReview}</span></>
                : <>{t.dedupOk} · 0 {t.dedupWarn}</>}
            </span>
          </div>
          {privacyMode && <div className="cust-privacy-chip">🔒 {t.privacy}</div>}
        </div>
      </div>

      {skeleton ? (
        <CustSkeleton />
      ) : (
        <>
          <window.CustSnapshot state={state === 'alert' ? 'alert' : 'default'} lang={lang} />
          <window.CustRfm lang={lang} onOpenSegment={onOpenSegment} emptyMigration={empty} />
          <window.CustLtvCohorts state={state === 'alert' ? 'alert' : 'default'} lang={lang} onOpenCohort={onOpenCohort} emptyEvolution={empty} />
          <window.CustAcqRetention state={state === 'alert' ? 'alert' : 'default'} lang={lang} onOpenSource={onOpenSource} onOpenChurn={onOpenChurn} />
          <window.CustTopAtRisk lang={lang} privacyMode={privacyMode} onOpenGuest={onOpenGuest} emptyBirthdays={empty} />
          <window.CustDemographics lang={lang} />
        </>
      )}
    </div>
  );
}

function CustSkeleton() {
  return (
    <div className="cust-skeleton">
      <div className="cust-skel-grid">
        {Array.from({ length: 10 }).map((_, i) => <div key={i} className="cust-skel-card" />)}
      </div>
      <div className="cust-skel-block" style={{ height: 320 }} />
      <div className="cust-skel-block" style={{ height: 280 }} />
      <div className="cust-skel-block" style={{ height: 240 }} />
      <div className="cust-skel-block" style={{ height: 360 }} />
    </div>
  );
}

window.CustomerInsightsTab = CustomerInsightsTab;