const { useState, useMemo, useCallback } = React;
const T = window.ArbiterTokens;

function RiskPlatform({ onNavigateToMatter, onNavigateToEvidence, matterContext, onBack }) {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [matrixFilter, setMatrixFilter] = useState(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const data = window.RISK_DATA;

  const reg = data.register;
  const critical = reg.filter(r => r.score >= 15).length;
  const rising = reg.filter(r => r.trend === 'rising').length;
  const atRiskCompliance = data.compliance.filter(c => c.status === 'At Risk').length;

  const tabs = [
    { id: 'dashboard',   label: 'Dashboard' },
    { id: 'register',    label: 'Register' },
    { id: 'treatment',   label: 'Treatment' },
    { id: 'indicators',  label: 'Indicators' },
    { id: 'quant',       label: 'Quantification' },
    { id: 'reporting',   label: 'Reporting' },
    { id: 'governance',  label: 'Governance' },
    { id: 'scenarios',   label: 'Scenarios' },
    { id: 'compliance',  label: 'Compliance' },
    { id: 'audit',       label: 'Audit' },
  ];

  const handleFilterFromMatrix = useCallback((li, im) => {
    setMatrixFilter({ li, im });
    setActiveTab('register');
  }, []);

  const handleTabChange = useCallback((tab) => {
    setActiveTab(tab);
    if (tab !== 'register') setMatrixFilter(null);
  }, []);

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':  return <RiskDashboard data={data} onFilterFromMatrix={handleFilterFromMatrix} onNavigateToMatter={onNavigateToMatter} />;
      case 'register':   return <RiskRegister data={data} matrixFilter={matrixFilter} onNavigateToMatter={onNavigateToMatter} onNavigateToEvidence={onNavigateToEvidence} />;
      case 'treatment':  return <window.RiskTreatmentHub />;
      case 'indicators': return <window.RiskIndicatorsHub />;
      case 'quant':      return <window.RiskQuantHub />;
      case 'reporting':  return <window.RiskReportingHub />;
      case 'governance': return <window.RiskGovernanceHub />;
      case 'scenarios':  return <RiskScenariosHub data={data} />;
      case 'compliance': return <RiskComplianceHub data={data} />;
      case 'audit':      return <RiskAuditLog data={data} />;
      default:           return <RiskDashboard data={data} onFilterFromMatrix={handleFilterFromMatrix} onNavigateToMatter={onNavigateToMatter} />;
    }
  };

  return (
    <div style={rk.container}>
      {showCreateModal && <RiskCreateModal data={data} onClose={() => setShowCreateModal(false)} />}

      <div style={rk.header}>
        <div style={rk.headerTitle}>
          {onBack && (
            <button onClick={onBack} style={{ padding: '4px 10px', borderRadius: '6px', border: `1px solid ${T.color.border.light}`, background: T.color.bg.card, fontSize: '14px', color: T.color.text.secondary, cursor: 'pointer' }}>←</button>
          )}
          <div style={rk.rkIcon}>{window.Icons && <window.Icons.Risk size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={rk.title}>Risk Platform</div>
            <div style={rk.subtitle}>{matterContext ? `${matterContext.name} · ${matterContext.id}` : 'Risk Assessment · Mitigation Tracking · Scenario Analysis · Compliance'}</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' }}>Risks</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: T.color.text.primary, fontFamily: T.font.mono }}>{reg.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' }}>Critical</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#C23030', fontFamily: T.font.mono }}>{critical}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: 'rgba(217,119,6,0.04)', border: '1px solid rgba(217,119,6,0.15)' }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: '#D97706', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Rising</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#D97706', fontFamily: T.font.mono }}>{rising}</span>
          </div>
          {atRiskCompliance > 0 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: rk.crimsonBg, border: `1px solid ${rk.crimson}20` }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: rk.crimson, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Compliance</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: rk.crimson, fontFamily: T.font.mono }}>{atRiskCompliance}</span>
            </div>
          )}
          <button onClick={() => setShowCreateModal(true)} style={{ padding: '6px 14px', borderRadius: '6px', background: rk.crimson, border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: T.font.family }}>+ Risk</button>
        </div>
      </div>

      <div style={{ ...rk.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => handleTabChange(t.id)} style={{ ...rk.tab, ...(activeTab === t.id ? rk.tabActive : {}), whiteSpace: 'nowrap' }}>
            {t.label}
            {t.id === 'register' && matrixFilter && <span style={{ marginLeft: '4px', width: '6px', height: '6px', borderRadius: '50%', background: rk.crimson, display: 'inline-block' }} />}
          </button>
        ))}
      </div>

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

function RiskScenariosHub({ data }) {
  const [sub, setSub] = useState('scenarios');
  const tabs = [
    { id: 'scenarios',   label: 'Scenarios' },
    { id: 'whatif',      label: 'What-If' },
    { id: 'timeline',    label: 'Timeline' },
    { id: 'graph',       label: 'Dependencies' },
    { id: 'mitigations', label: 'Mitigations' },
  ];
  return (
    <div>
      <window.RkSubTabs tabs={tabs} active={sub} onChange={setSub} />
      {sub === 'scenarios'   && <RiskScenarios data={data} />}
      {sub === 'whatif'      && <RiskWhatIf data={data} />}
      {sub === 'timeline'    && <RiskTimeline data={data} />}
      {sub === 'graph'       && <RiskGraph data={data} />}
      {sub === 'mitigations' && <RiskMitigations data={data} />}
    </div>
  );
}

function RiskComplianceHub({ data }) {
  const [sub, setSub] = useState('compliance');
  const tabs = [
    { id: 'compliance', label: 'Obligations' },
    { id: 'analytics',  label: 'Analytics' },
    { id: 'report',     label: 'Report' },
  ];
  return (
    <div>
      <window.RkSubTabs tabs={tabs} active={sub} onChange={setSub} />
      {sub === 'compliance' && <RiskCompliance data={data} />}
      {sub === 'analytics'  && <RiskAnalytics data={data} />}
      {sub === 'report'     && <RiskReport data={data} />}
    </div>
  );
}

window.RiskPlatform       = RiskPlatform;
window.RiskScenariosHub   = RiskScenariosHub;
window.RiskComplianceHub  = RiskComplianceHub;