// MOTIONS PLATFORM — 7 tabs (Dashboard + 6 hub sub-platforms with pill sub-nav)
const { useState: useMnPlatState } = React;
const Tmnp = window.ArbiterTokens;

function MotionsPlatform() {
  const [activeTab, setActiveTab] = useMnPlatState('dashboard');
  const mn = window.__mn;
  const data = window.MOTIONS_DATA;
  const k = data.kpis;

  const tabs = [
    { id: 'dashboard',  label: 'Dashboard'   },
    { id: 'queue',      label: 'Motion Queue'},
    { id: 'drafting',   label: 'Drafting'    },
    { id: 'briefbank',  label: 'Brief Bank'  },
    { id: 'citations',  label: 'Citations'   },
    { id: 'calendar',   label: 'Calendar'    },
    { id: 'judges',     label: 'Judges'      },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard': return <MotionsDashboard data={data} />;
      case 'queue':     return <MnQueueHub     data={data} />;
      case 'drafting':  return <MnDraftingHub  data={data} />;
      case 'briefbank': return <MnBriefBankHub data={data} />;
      case 'citations': return <MnCitationsHub data={data} />;
      case 'calendar':  return <MnCalendarHub  data={data} />;
      case 'judges':    return <MnJudgesHub    data={data} />;
      default:          return <MotionsDashboard data={data} />;
    }
  };

  return (
    <div style={mn.container}>
      <div style={mn.header}>
        <div style={mn.headerTitle}>
          <div style={mn.mnIcon}>{window.Icons && <window.Icons.Motions size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={mn.title}>Motions Platform</div>
            <div style={mn.subtitle}>Motion Queue · Drafting · Brief Bank · Citations · Calendar · Judges</div>
          </div>
        </div>
        <div style={mn.headerActions}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tmnp.color.bg.secondary, border: `1px solid ${Tmnp.color.border.light}`, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tmnp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Active</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tmnp.color.text.primary, fontFamily: Tmnp.font.mono }}>{k.activeMotions}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: mn.plumBg, border: `1px solid ${mn.plumBorder}`, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: mn.plum, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Win Rate</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: mn.plum, fontFamily: Tmnp.font.mono }}>{k.avgWinRate}%</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: 'rgba(185,28,28,0.06)', border: '1px solid rgba(185,28,28,0.15)', whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: '#B91C1C', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Due This Week</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#B91C1C', fontFamily: Tmnp.font.mono }}>{k.dueThisWeek}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: mn.emeraldBg, border: `1px solid ${mn.emerald}22`, whiteSpace: 'nowrap' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: mn.emerald, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Granted YTD</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: mn.emerald, fontFamily: Tmnp.font.mono }}>{k.grantedYtd}</span>
          </div>
          <button style={mn.btnPrimary}>+ New motion</button>
        </div>
      </div>

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

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

window.MotionsPlatform = MotionsPlatform;