// System Overview — canvas-style architecture map
const OverviewPage = ({ setPage }) => (
  <>
    <div className="page-header">
      <div>
        <h1 className="page-title">System overview</h1>
        <div className="page-sub">How the modules, data flows, and screens interconnect — click any screen to open it</div>
      </div>
      <div className="page-actions">
        <button className="btn" onClick={() => setPage('dashboard')}>Open live platform <Icon name="arrowRight" size={11}/></button>
      </div>
    </div>

    <div className="page-body" style={{ padding: 24 }}>
      {/* Architecture layers */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-header"><div className="card-title">Platform architecture — modular layered runtime</div></div>
        <div style={{ padding: 24, background: 'var(--panel-2)' }}>
          {[
            { layer: '01 · Industrial sources', items: ['PLCs', 'OPC-UA', 'MQTT', 'Modbus', 'Sensors', 'SCADA', 'Vision systems'], color: 'var(--text-3)' },
            { layer: '02 · IoT Gateway & ingest', items: ['Telemetry router', 'Edge buffer', 'Schema registry', 'Event bus'], color: 'var(--blue)' },
            { layer: '03 · Operational data model', items: ['Machine state', 'Production lots', 'Events', 'Forms', 'Workflows'], color: 'var(--purple)' },
            { layer: '04 · Modules (configurable)', items: ['OEE', 'Maintenance', 'Quality', 'Planning', 'Inventory', 'Energy', 'CAPA', 'SOP', 'Audit'], color: 'var(--accent)' },
            { layer: '05 · Customer experience', items: ['Operator UI', 'Supervisor cockpit', 'Plant dashboards', 'Mobile forms', 'Approval flows'], color: 'var(--green)' },
            { layer: '06 · ONS Supervisor (internal)', items: ['Fleet observability', 'Deployment ops', 'Incident response', 'Backup oversight'], color: 'var(--text)' },
          ].map((row, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 10, padding: 14, background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 5, borderLeft: `3px solid ${row.color}` }}>
              <div className="mono" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', color: row.color, width: 220, fontWeight: 500 }}>{row.layer}</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {row.items.map(it => <span key={it} className="pill" style={{ textTransform: 'none' }}>{it}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Screens grid */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-header"><div className="card-title">Connected screens · click to open</div></div>
        <div style={{ padding: 18, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 10 }}>
          {[
            { id: 'dashboard', label: 'Operations Dashboard', sub: 'Mission control — plant status, OEE, live events', icon: 'dashboard' },
            { id: 'machines', label: 'Machine Monitoring', sub: 'Single, line, and multi-machine views', icon: 'cpu' },
            { id: 'events', label: 'Events & Alerts', sub: 'Event-driven monitoring & escalation', icon: 'bell2' },
            { id: 'workflows', label: 'Workflow Builder', sub: 'Configurable rules engine', icon: 'workflow' },
            { id: 'forms', label: 'Form Builder', sub: 'Operational input forms', icon: 'form' },
            { id: 'modules', label: 'Module Management', sub: 'Enable, configure, integrate', icon: 'module' },
            { id: 'plants', label: 'Multi-Plant View', sub: 'Cross-plant visibility', icon: 'factory' },
            { id: 'roles', label: 'Roles & Access', sub: 'Permissions matrix, approvals', icon: 'users' },
            { id: 'analytics', label: 'Analytics & Reports', sub: 'Production, downtime, predictive', icon: 'chart' },
            { id: 'supervisor', label: 'ONS Supervisor', sub: 'Internal · fleet & deployment ops', icon: 'server' },
          ].map(s => (
            <div key={s.id} className="card" style={{ cursor: 'pointer' }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--line)'}
              onClick={() => setPage(s.id)}>
              <div style={{ padding: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <div style={{ width: 26, height: 26, borderRadius: 4, background: 'var(--panel-2)', display: 'grid', placeItems: 'center', color: 'var(--accent)' }}>
                    <Icon name={s.icon} size={13}/>
                  </div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{s.label}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', lineHeight: 1.4 }}>{s.sub}</div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', fontSize: 10.5 }} className="mono">
                  <span style={{ color: 'var(--text-3)' }}>open →</span>
                  <span style={{ color: 'var(--text-3)' }}>{s.id}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Data flow narrative */}
      <div className="card">
        <div className="card-header"><div className="card-title">Event-driven data flow · how a single event traverses the platform</div></div>
        <div style={{ padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'stretch', gap: 8 }}>
            {[
              { n: '01', t: 'Sensor reading', d: 'Spindle TC-04 reads 87.3°C', c: 'var(--text-3)' },
              { n: '02', t: 'IoT Gateway', d: 'Normalized into operational event bus', c: 'var(--blue)' },
              { n: '03', t: 'Trigger match', d: 'Workflow "High-temp escalation" fires', c: 'var(--purple)' },
              { n: '04', t: 'Module dispatch', d: 'Maintenance module creates work order', c: 'var(--accent)' },
              { n: '05', t: 'Notification routing', d: 'SMS, Slack, in-app to maint lead', c: 'var(--accent)' },
              { n: '06', t: 'Operator UI', d: 'CNC-04 page shows alert + telemetry', c: 'var(--green)' },
              { n: '07', t: 'Supervisor view', d: 'Plant dashboard reflects new incident', c: 'var(--green)' },
            ].map((s, i, arr) => (
              <div key={i} style={{ display: 'contents' }}>
                <div style={{ flex: 1, padding: 12, border: '1px solid var(--line)', borderRadius: 4, background: 'var(--panel)' }}>
                  <div className="mono" style={{ fontSize: 10, color: s.c, fontWeight: 500 }}>{s.n}</div>
                  <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>{s.t}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4, lineHeight: 1.4 }}>{s.d}</div>
                </div>
                {i < arr.length - 1 && <div style={{ display: 'grid', placeItems: 'center', color: 'var(--text-4)' }}><Icon name="arrowRight" size={12}/></div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </>
);

window.OverviewPage = OverviewPage;