// RESEARCH PLATFORM — entry (header + tabs + body)
const { useState: useResearchState } = React;
const Trs = window.ArbiterTokens;

function ResearchPlatform() {
  const [activeTab, setActiveTab] = useResearchState('dashboard');
  const rs = window.__rs;
  const data = window.RESEARCH_DATA;

  const k = data.kpis;

  const tabs = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'search', label: 'Search' },
    { id: 'cases', label: 'Case Law' },
    { id: 'statutes', label: 'Statutes' },
    { id: 'regs', label: 'Regulations' },
    { id: 'secondary', label: 'Secondary' },
    { id: 'citator', label: 'Citator' },
    { id: 'briefs', label: 'Briefs' },
    { id: 'workspace', label: 'Workspace' },
    { id: 'analytics', label: 'Analytics' },
    { id: 'activity', label: 'Activity' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard': return <ResearchDashboard data={data} />;
      case 'search':    return <RsSearchHub    data={data} />;
      case 'cases':     return <RsCasesHub     data={data} />;
      case 'statutes':  return <RsStatutesHub  data={data} />;
      case 'regs':      return <RsRegsHub      data={data} />;
      case 'secondary': return <RsSecondaryHub data={data} />;
      case 'citator':   return <RsCitatorHub   data={data} />;
      case 'briefs':    return <RsBriefsHub    data={data} />;
      case 'workspace': return <RsWorkspaceHub data={data} />;
      case 'analytics': return <RsAnalyticsHub data={data} />;
      case 'activity':  return <RsActivityHub  data={data} />;
      default:          return <ResearchDashboard data={data} />;
    }
  };

  return (
    <div style={rs.container}>
      <div style={rs.header}>
        <div style={rs.headerTitle}>
          <div style={rs.rsIcon}>{window.Icons && <window.Icons.Research size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={rs.title}>Research Platform</div>
            <div style={rs.subtitle}>Case Law · Statutes · Regulations · Citator · Briefs &amp; Memos</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Trs.color.bg.secondary, border: `1px solid ${Trs.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Trs.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Queries Today</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Trs.color.text.primary, fontFamily: Trs.font.mono }}>{k.queriesToday}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: rs.indigoBg, border: `1px solid ${rs.indigoBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: rs.indigo, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Saved</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: rs.indigo, fontFamily: Trs.font.mono }}>{k.savedItems}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: rs.tealBg, border: `1px solid ${rs.teal}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: rs.teal, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Cite Health</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: rs.teal, fontFamily: Trs.font.mono }}>{k.citationHealth}%</span>
          </div>
          {k.negativeAlerts > 0 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: 'rgba(194,48,48,0.04)', border: '1px solid rgba(194,48,48,0.15)' }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: '#C23030', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Flags</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: '#C23030', fontFamily: Trs.font.mono }}>{k.negativeAlerts}</span>
            </div>
          )}
          <button style={rs.btnPrimary}>+ Research Request</button>
        </div>
      </div>

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

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

window.ResearchPlatform = ResearchPlatform;