// DISCOVERY PLATFORM — entry (header + tabs + body) with store + modals
const { useState: useDcPlatState } = React;
const Tdp = window.ArbiterTokens;

function DiscoveryPlatform() {
  const [activeTab, setActiveTab] = useDcPlatState('dashboard');
  const dc = window.__dc;
  const store = window.DiscoveryStore;
  const data = window.useDcStore ? window.useDcStore(['*']) : window.DISCOVERY_DATA;
  const k = data.kpis;

  // Modal state
  const [modal, setModal] = useDcPlatState(null);
  const open = (name, ctx) => setModal({ name, ctx });
  const close = () => setModal(null);

  const tabs = [
    { id: 'dashboard',    label: 'Dashboard' },
    { id: 'requests',     label: 'Requests' },
    { id: 'preservation', label: 'Preservation' },
    { id: 'collection',   label: 'Collection' },
    { id: 'review',       label: 'Review' },
    { id: 'productions',  label: 'Productions' },
    { id: 'trial',        label: 'Trial' },
    { id: 'ops',          label: 'Ops' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard': return <DiscoveryDashboard data={data} />;
      case 'requests':
        return <window.DcRequestsHub data={data}
          onOpen={(r) => open('response', r)}
          onPropScore={(r) => open('prop', r)}
          onMeetConfer={(r) => open('mc', r)}
          onSchedulMC={() => open('mc', { matter: 'Redstone v. Meridian', matterId: 'M-2024-0312' })} />;
      case 'preservation':
        return <window.DcPreservationHub data={data}
          onInterview={(c) => open('interview', c)}
          onIssue={() => open('hold', { matter: data.holds[0] && data.holds[0].matter, matterId: data.holds[0] && data.holds[0].matterId })}
          onAckWall={(h) => open('ackwall', h)} />;
      case 'collection':
        return <window.DcCollectionHub data={data}
          onWizard={() => open('collection', { matter: 'Redstone v. Meridian', matterId: 'M-2024-0312' })}
          onChain={(c) => open('chain', c)} />;
      case 'review':
        return <window.DcReviewAnalyzeHub data={data}
          onOpenDoc={(d) => open('review', d)}
          onRedact={(d) => open('redact', d)} />;
      case 'productions':
        return <window.DcProductionsHub data={data}
          onBuild={() => open('build', { matter: 'Redstone v. Meridian', matterId: 'M-2024-0312' })} />;
      case 'trial':
        return <window.DcTrialHub data={data} onBinder={(d) => open('binder', d)} />;
      case 'ops': return <window.DcOpsHub data={data} />;
      default: return <DiscoveryDashboard data={data} />;
    }
  };

  const renderModal = () => {
    if (!modal) return null;
    const c = modal.ctx || {};
    switch (modal.name) {
      case 'response':   return <window.DcRequestResponseDrawer request={c} onClose={close} />;
      case 'prop':       return <window.DcProportionalityModal requestId={c.id} matter={c.matter} onClose={close} />;
      case 'mc':         return <window.DcMeetConferPlannerModal matter={c.matter} matterId={c.matterId} onClose={close} />;
      case 'hold':       return <window.DcHoldComposerModal matter={c.matter} matterId={c.matterId} onClose={close} />;
      case 'ackwall':    return <window.DcHoldAckWall hold={c} onClose={close} />;
      case 'interview':  return <window.DcInterviewKitModal custodian={c} onClose={close} />;
      case 'collection': return <window.DcCollectionWizardModal matter={c.matter} matterId={c.matterId} onClose={close} />;
      case 'chain':      return <window.DcChainOfCustodyPanel collection={c} onClose={close} />;
      case 'review':     return <window.DcReviewPaneModal doc={c} onClose={close} />;
      case 'redact':     return <window.DcRedactionStudioModal doc={c} onClose={close} />;
      case 'build':      return <window.DcProductionBuilderModal matter={c.matter} matterId={c.matterId} onClose={close} />;
      case 'binder':     return <window.DcDepoBinderDrawer depo={c} onClose={close} />;
      default: return null;
    }
  };

  return (
    <div style={dc.container}>
      <div style={dc.header}>
        <div style={dc.headerTitle}>
          <div style={dc.dcIcon}>{window.Icons && <window.Icons.Discovery size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={dc.title}>Discovery Platform</div>
            <div style={dc.subtitle}>Identify · Preserve · Collect · Process · Review · Analyze · Produce · Present</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tdp.color.bg.secondary, border: `1px solid ${Tdp.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tdp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Corpus</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tdp.color.text.primary, fontFamily: Tdp.font.mono }}>{(k.corpusDocs / 1_000_000).toFixed(1)}M</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: dc.cobaltBg, border: `1px solid ${dc.cobaltBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: dc.cobalt, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Reviewed</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: dc.cobalt, fontFamily: Tdp.font.mono }}>{(k.docsReviewed / 1_000_000).toFixed(2)}M</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: dc.violetBg, border: `1px solid ${dc.violet}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: dc.violet, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Custodians</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: dc.violet, fontFamily: Tdp.font.mono }}>{k.custodians}</span>
          </div>
          {k.openDisputes > 0 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: dc.crimsonBg, border: `1px solid ${dc.crimson}22` }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: dc.crimson, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Disputes</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: dc.crimson, fontFamily: Tdp.font.mono }}>{k.openDisputes}</span>
            </div>
          )}
          <button style={dc.btnPrimary} onClick={() => open('hold', { matter: 'Redstone v. Meridian', matterId: 'M-2024-0312' })}>+ Issue hold</button>
        </div>
      </div>

      <div style={{ ...dc.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...dc.tab, ...(activeTab === t.id ? dc.tabActive : {}) }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={dc.body}>
        {renderTab()}
      </div>

      {renderModal()}
    </div>
  );
}

window.DiscoveryPlatform = DiscoveryPlatform;