const { useState } = React;
const T = window.ArbiterTokens;

function RulebookPlatform() {
  const [activeView, setActiveView] = useState('browser');

  const db = window.FRCP_DATABASE;
  const deadlineRules = db.rules.filter(r => r.hasDeadline).length;
  const totalDeadlines = db.rules.reduce((s, r) => s + (r.deadlines?.length || 0), 0);

  const views = [
    { id: 'browser', label: 'Rule Browser' },
    { id: 'calculator', label: 'Chain Calculator' },
    { id: 'jurisdictions', label: 'Jurisdictions' },
    { id: 'cheatsheet', label: 'Quick Reference' },
    { id: 'knowledge', label: 'Knowledge' },
    { id: 'tools', label: 'Tools' },
    { id: 'analytics', label: 'Analytics' },
    { id: 'integrations', label: 'Integrations' },
  ];

  const renderView = () => {
    switch (activeView) {
      case 'browser': return <FRCPBrowser />;
      case 'calculator': return <FRCPChainCalc />;
      case 'jurisdictions': return <FRCPJurisdictions />;
      case 'cheatsheet': return <FRCPCheatSheet />;
      case 'knowledge': return <window.RulebookKnowledgeHub />;
      case 'tools': return <window.RulebookToolsHub />;
      case 'analytics': return <window.RulebookAnalyticsHub />;
      case 'integrations': return <window.RulebookIntegrationsHub />;
      default: return <FRCPBrowser />;
    }
  };

  return (
    <div style={{ flex: 1, overflow: 'auto', background: T.color.bg.primary }}>
      {/* Header */}
      <div style={{ padding: '16px 24px', borderBottom: `1px solid ${T.color.border.light}`, background: T.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{ width: '32px', height: '32px', borderRadius: '6px', background: 'linear-gradient(135deg, #1E3A5F 0%, #0A1628 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '15px', color: '#fff' }}></div>
          <div>
            <div style={{ fontSize: '18px', fontWeight: 700, color: T.color.text.primary, letterSpacing: '-0.02em' }}>Rulebook</div>
            <div style={{ fontSize: '12px', color: T.color.text.tertiary }}>Federal Rules of Civil Procedure · Local Rules · Deadline Intelligence</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: T.color.bg.secondary, border: `1px solid ${T.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: T.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Rules</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: T.color.text.primary, fontFamily: T.font.mono }}>{db.rules.length}</span>
          </div>
          <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' }}>Deadlines</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#C23030', fontFamily: T.font.mono }}>{totalDeadlines}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: 'rgba(13,148,136,0.04)', border: '1px solid rgba(13,148,136,0.15)' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: '#0D9488', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Jurisdictions</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#0D9488', fontFamily: T.font.mono }}>5</span>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: '0', borderBottom: `1px solid ${T.color.border.light}`, background: T.color.bg.card, padding: '0 24px' }}>
        {views.map(v => (
          <button key={v.id} onClick={() => setActiveView(v.id)} style={{
            padding: '10px 16px', fontSize: '12px', fontWeight: 500,
            color: activeView === v.id ? T.color.navy800 : T.color.text.tertiary,
            cursor: 'pointer', border: 'none', background: 'none',
            borderBottom: activeView === v.id ? `2px solid ${T.color.navy800}` : '2px solid transparent',
            fontFamily: T.font.family, transition: 'all 0.15s', marginBottom: '-1px',
            ...(activeView === v.id ? { fontWeight: 600 } : {}),
          }}>{v.label}</button>
        ))}
      </div>

      {/* Body */}
      <div style={{ padding: '20px 24px' }}>
        {renderView()}
      </div>
    </div>
  );
}

window.RulebookPlatform = RulebookPlatform;