// Module Management — enabled, marketplace, dependencies
const MODULES = [
  { id: 'oee', name: 'OEE', desc: 'Overall equipment effectiveness — availability, performance, quality.', icon: 'chart', enabled: true, status: 'core', usage: 92, deps: ['machine-telemetry'], integrations: 4, version: '4.18' },
  { id: 'maint', name: 'Maintenance', desc: 'Preventive & corrective maintenance, work orders, parts inventory.', icon: 'wrench', enabled: true, usage: 84, deps: ['inventory'], integrations: 3, version: '4.16' },
  { id: 'quality', name: 'Quality', desc: 'In-process and final QA, inspections, defect tracking, CAPA.', icon: 'shieldCheck', enabled: true, usage: 78, deps: ['forms','workflows'], integrations: 5, version: '4.18' },
  { id: 'plan', name: 'Planning', desc: 'Production scheduling, demand vs capacity, line allocation.', icon: 'list', enabled: true, usage: 68, deps: ['oee'], integrations: 2, version: '4.14' },
  { id: 'energy', name: 'Energy Monitoring', desc: 'Real-time power & utility consumption, sub-meter mapping.', icon: 'zap', enabled: true, usage: 41, deps: ['machine-telemetry'], integrations: 1, version: '4.10' },
  { id: 'inv', name: 'Inventory', desc: 'Raw materials, WIP, finished goods, batch & lot tracking.', icon: 'database', enabled: true, usage: 72, deps: [], integrations: 4, version: '4.17' },
  { id: 'capa', name: 'CAPA', desc: 'Corrective and preventive action workflows, root cause analysis.', icon: 'alertCircle', enabled: true, usage: 38, deps: ['quality','workflows'], integrations: 0, version: '4.12' },
  { id: 'audit', name: 'Audit', desc: 'Plant audits, regulatory checklists, audit trail visibility.', icon: 'shield', enabled: false, usage: 0, deps: ['forms'], integrations: 0, version: '4.08', addOn: true },
  { id: 'sop', name: 'SOP Tracking', desc: 'Standard operating procedure compliance and acknowledgments.', icon: 'form', enabled: true, usage: 54, deps: [], integrations: 1, version: '4.15' },
  { id: 'env', name: 'Environmental', desc: 'Emissions, waste, water consumption tracking.', icon: 'globe', enabled: false, usage: 0, deps: ['energy'], integrations: 0, version: '4.06', addOn: true },
  { id: 'safety', name: 'Safety & EHS', desc: 'Incident reporting, near-miss, safety walks, hazard tracking.', icon: 'shield', enabled: false, usage: 0, deps: ['forms'], integrations: 0, version: '4.04', addOn: true },
  { id: 'iot', name: 'IoT Gateway', desc: 'OPC-UA, MQTT, Modbus connectors. PLC integration.', icon: 'server', enabled: true, usage: 100, deps: [], integrations: 18, version: '4.18', core: true },
];

const ModulesPage = () => {
  const [tab, setTab] = useState('enabled');
  const [selected, setSelected] = useState(null);
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Modules</h1>
          <div className="page-sub">9 enabled · 3 available · 18 integrations connected · core platform v4.18.2</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="link" size={12}/>Integrations</button>
          <button className="btn"><Icon name="upload" size={12}/>Import config</button>
          <button className="btn primary"><Icon name="plus" size={12}/>Browse marketplace</button>
        </div>
      </div>

      <div className="tabs">
        <div className={`tab ${tab==='enabled'?'active':''}`} onClick={()=>setTab('enabled')}>Enabled <span className="count">9</span></div>
        <div className={`tab ${tab==='market'?'active':''}`} onClick={()=>setTab('market')}>Marketplace <span className="count">42</span></div>
        <div className={`tab ${tab==='deps'?'active':''}`} onClick={()=>setTab('deps')}>Dependencies</div>
        <div className={`tab ${tab==='int'?'active':''}`} onClick={()=>setTab('int')}>Integrations <span className="count">18</span></div>
      </div>

      <div className="page-body">
        {tab === 'enabled' && (
          <div style={{ display: 'grid', gridTemplateColumns: selected ? '1fr 380px' : '1fr', gap: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
              {MODULES.filter(m => m.enabled).map(m => <ModuleCard key={m.id} m={m} onSelect={()=>setSelected(m)} selected={selected?.id===m.id}/>)}
            </div>
            {selected && <ModuleDetail m={selected} onClose={()=>setSelected(null)}/>}
          </div>
        )}
        {tab === 'market' && <Marketplace/>}
        {tab === 'deps' && <DependencyMap/>}
        {tab === 'int' && <Integrations/>}
      </div>
    </>
  );
};

const ModuleCard = ({ m, onSelect, selected }) => (
  <div className="card" onClick={onSelect} style={{ cursor: 'pointer', borderColor: selected ? 'var(--accent)' : 'var(--line)' }}>
    <div style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 5, background: m.core ? 'var(--text)' : 'var(--panel-2)', color: m.core ? 'var(--bg)' : 'var(--text)', display: 'grid', placeItems: 'center' }}>
          <Icon name={m.icon} size={16}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</span>
            {m.core && <span className="pill">core</span>}
            {m.status === 'core' && <span className="pill">core</span>}
          </div>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>v{m.version} · {m.integrations} integrations</div>
        </div>
        <div className="switch on" style={{ pointerEvents: 'none' }}/>
      </div>
      <div style={{ fontSize: 11.5, color: 'var(--text-2)', lineHeight: 1.45, marginBottom: 12 }}>{m.desc}</div>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--text-3)', marginBottom: 4 }}>
          <span>USAGE — last 30 days</span><span className="mono" style={{ color: 'var(--text-2)' }}>{m.usage}%</span>
        </div>
        <div className="bar"><div className="bar-fill" style={{ width: `${m.usage}%` }}/></div>
      </div>
    </div>
  </div>
);

const ModuleDetail = ({ m, onClose }) => (
  <div className="card" style={{ display: 'flex', flexDirection: 'column', height: 'fit-content', position: 'sticky', top: 12 }}>
    <div className="card-header">
      <div style={{ width: 28, height: 28, borderRadius: 5, background: 'var(--panel-2)', display: 'grid', placeItems: 'center' }}><Icon name={m.icon} size={14}/></div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</div>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>v{m.version}</div>
      </div>
      <button className="btn ghost icon sm" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" size={12}/></button>
    </div>
    <div style={{ padding: 14 }}>
      <div style={{ fontSize: 12, lineHeight: 1.45, marginBottom: 14 }}>{m.desc}</div>

      <div className="sec-heading">Capabilities</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 14 }}>
        {(m.id === 'quality' ? ['QA forms & inspections', 'Defect tracking & dispositions', 'In-process & final inspection', 'CAPA integration', 'Supplier quality'] : ['Real-time monitoring', 'Configurable rules', 'Reporting & analytics']).map(c => (
          <div key={c} style={{ display: 'flex', gap: 6, fontSize: 12, color: 'var(--text-2)' }}>
            <Icon name="check" size={11} style={{ color: 'var(--green)', marginTop: 4 }}/>{c}
          </div>
        ))}
      </div>

      <div className="sec-heading">Permissions</div>
      <div style={{ marginBottom: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 11.5 }}>
        {['view', 'edit', 'approve', 'configure', 'export', 'delete'].map(p => <span key={p} className="pill" style={{ justifyContent: 'flex-start' }}>{p}</span>)}
      </div>

      <div className="sec-heading">Active integrations · {m.integrations}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 14 }}>
        {['SAP S/4HANA — order sync', 'OPC-UA gateway — telemetry', 'Slack — notifications', 'Azure AD — SSO'].slice(0, Math.min(m.integrations, 4)).map(i => (
          <div key={i} className="mono" style={{ fontSize: 11, color: 'var(--text-2)', display: 'flex', justifyContent: 'space-between', padding: '5px 8px', background: 'var(--panel-2)', borderRadius: 3 }}>
            <span>{i}</span><span style={{ color: 'var(--green)' }}>● connected</span>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 6 }}>
        <button className="btn primary sm" style={{ flex: 1 }}>Configure</button>
        <button className="btn sm">Disable</button>
      </div>
    </div>
  </div>
);

const Marketplace = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
    {MODULES.filter(m => !m.enabled).concat([
      { id: 'pred', name: 'Predictive Maintenance', desc: 'ML-driven anomaly detection on telemetry.', icon: 'cpu', usage: 0, version: '1.2', addOn: true },
      { id: 'mes', name: 'MES Integration Pack', desc: 'Bi-directional sync with leading MES platforms.', icon: 'link', usage: 0, version: '2.0', addOn: true },
      { id: 'ai', name: 'Operations Copilot', desc: 'Natural-language query over plant data.', icon: 'zap', usage: 0, version: '0.9', addOn: true },
    ]).map(m => (
      <div key={m.id} className="card">
        <div style={{ padding: 14 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
            <div style={{ width: 32, height: 32, borderRadius: 5, background: 'var(--panel-2)', display: 'grid', placeItems: 'center' }}><Icon name={m.icon} size={16}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{m.name}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>v{m.version} · {m.addOn ? 'add-on' : 'included'}</div>
            </div>
            <span className="pill warn">add-on</span>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--text-2)', margin: '12px 0', lineHeight: 1.45 }}>{m.desc}</div>
          <button className="btn primary sm" style={{ width: '100%' }}><Icon name="plus" size={11}/>Add to plant</button>
        </div>
      </div>
    ))}
  </div>
);

const DependencyMap = () => (
  <div className="card">
    <div className="card-header"><div className="card-title">Module dependency graph</div></div>
    <div style={{ padding: 24, display: 'flex', justifyContent: 'center' }}>
      <svg width="780" height="380" style={{ overflow: 'visible' }}>
        <defs>
          <marker id="arr2" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
            <path d="M0,0 L10,5 L0,10 z" fill="var(--text-3)"/>
          </marker>
        </defs>
        {/* edges */}
        {[
          [0,1],[0,2],[1,3],[2,4],[2,5],[5,3],[6,2],[6,7],[3,8],[1,9]
        ].map(([a,b], i) => {
          const positions = [
            [60, 180],   // 0 IoT Gateway (root)
            [240, 100],  // 1 OEE
            [240, 260],  // 2 Quality
            [440, 60],   // 3 Maintenance
            [440, 200],  // 4 CAPA
            [440, 320],  // 5 Forms
            [60, 340],   // 6 Workflows
            [240, 380],  // 7 Audit
            [620, 100],  // 8 Inventory
            [440, 140],  // 9 Planning
          ];
          return <path key={i} d={`M${positions[a][0]+50},${positions[a][1]} C${(positions[a][0]+positions[b][0])/2+50},${positions[a][1]} ${(positions[a][0]+positions[b][0])/2},${positions[b][1]} ${positions[b][0]},${positions[b][1]}`} fill="none" stroke="var(--text-3)" strokeWidth="1.2" markerEnd="url(#arr2)"/>;
        })}
        {[
          {x:60,y:180,n:'IoT Gateway',c:'core'},
          {x:240,y:100,n:'OEE'},
          {x:240,y:260,n:'Quality'},
          {x:440,y:60,n:'Maintenance'},
          {x:440,y:200,n:'CAPA'},
          {x:440,y:320,n:'Forms',c:'core'},
          {x:60,y:340,n:'Workflows',c:'core'},
          {x:240,y:380,n:'Audit',c:'addon'},
          {x:620,y:100,n:'Inventory'},
          {x:440,y:140,n:'Planning'},
        ].map((node, i) => (
          <g key={i} transform={`translate(${node.x} ${node.y})`}>
            <rect x="0" y="-14" width="100" height="28" rx="4" fill={node.c === 'core' ? 'var(--text)' : node.c === 'addon' ? 'var(--panel-2)' : 'var(--panel)'} stroke={node.c === 'core' ? 'var(--text)' : 'var(--line)'}/>
            <text x="50" y="4" textAnchor="middle" fontSize="11" fill={node.c === 'core' ? 'var(--bg)' : 'var(--text)'} fontWeight="500">{node.n}</text>
          </g>
        ))}
      </svg>
    </div>
  </div>
);

const Integrations = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>Integration</th><th>Type</th><th>Module</th><th>Status</th><th>Last sync</th><th>Throughput</th><th></th></tr></thead>
      <tbody>
        {[
          ['SAP S/4HANA','ERP','Planning, Inventory','connected','14:32:01','1,284/min'],
          ['Azure AD','SSO','Roles','connected','14:30:00','—'],
          ['OPC-UA Gateway PUN-N','Telemetry','IoT Gateway','connected','14:32:14','42,180/min'],
          ['MQTT Broker','Telemetry','IoT Gateway','connected','14:32:14','8,420/min'],
          ['Slack','Notifications','Workflows','connected','14:31:08','—'],
          ['Twilio','SMS','Workflows','connected','14:31:09','—'],
          ['ServiceNow','Tickets','Maintenance','connected','14:28:44','—'],
          ['Power BI','Analytics','Analytics','connected','13:00:00','daily'],
          ['Snowflake','Data warehouse','Analytics','connected','14:00:00','hourly'],
          ['LIMS','Quality','Quality','warn','13:11:22','—'],
        ].map((r,i)=>(
          <tr key={i}>
            <td style={{ fontWeight: 500 }}>{r[0]}</td>
            <td>{r[1]}</td>
            <td>{r[2]}</td>
            <td>
              <span className="pill" style={{ background: r[3]==='connected'?'color-mix(in srgb, var(--green) 12%, transparent)':'color-mix(in srgb, var(--accent) 12%, transparent)', color: r[3]==='connected'?'var(--green)':'var(--accent)' }}>
                <span className="dot"/>{r[3]}
              </span>
            </td>
            <td className="mono" style={{ fontSize: 11.5 }}>{r[4]}</td>
            <td className="mono" style={{ fontSize: 11.5 }}>{r[5]}</td>
            <td><button className="btn ghost icon sm"><Icon name="settings" size={12}/></button></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

window.ModulesPage = ModulesPage;