// Project page + Module library

function ProjectPage({ projectId, onOpenBoard }) {
  const { PROJECTS, MODULES, ACTIVITY, AGENTS } = window.ORC_DATA;
  const project = PROJECTS.find(p => p.id === projectId) || PROJECTS[0];

  const installed = [
    { id: 'auth', name: 'Auth',     installed: 'v2.4.0', latest: 'v2.4.0', status: 'live' },
    { id: 'billing', name: 'Billing', installed: 'v1.1.4', latest: 'v1.2.0', status: 'update' },
    { id: 'tickets', name: 'Tickets', installed: 'v2.9.0', latest: 'v3.0.1', status: 'update' },
    { id: 'kb', name: 'Knowledge',  installed: 'v2.1.0', latest: 'v2.1.0', status: 'live' },
    { id: 'audit', name: 'Audit Trail', installed: 'v1.7.2', latest: 'v1.7.2', status: 'live' },
  ];

  const projectAgents = AGENTS.slice(0, 4);

  return (
    <div className="page">
      <div className="page-head">
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: project.color,
          display: 'grid', placeItems: 'center',
          color: 'white', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 18,
          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.25)'
        }}>{project.name[0]}</div>
        <div>
          <h1 className="page-title">{project.name}</h1>
          <p className="page-sub">prj_{project.id} · region us-east-2 · 14 services · last deploy 6m ago</p>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <button className="btn ghost" type="button" onClick={onOpenBoard}>
            <Icon name="columns" size={12} />Filter board to {project.name}
          </button>
          <button className="btn" type="button"><Icon name="open" size={12} />Open console</button>
          <button className="btn primary" type="button"><Icon name="plus" size={12} />Dispatch task</button>
        </div>
      </div>

      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label">Modules</div>
          <div className="kpi-value">5<span style={{ fontSize: 13, color: 'var(--c-text-3)', fontWeight: 400, marginLeft: 6 }}>/ 8</span></div>
          <div className="kpi-foot warn">▲ 2 updates available</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Active agents</div>
          <div className="kpi-value">4</div>
          <div className="kpi-foot ok"><span className="dot pulse" />all healthy</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Tasks · 24h</div>
          <div className="kpi-value">38</div>
          <div className="kpi-foot">36 ok · 1 review · 1 failed</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">P95 deploy</div>
          <div className="kpi-value">2m 14s</div>
          <div className="kpi-foot ok">↓ 8% wk</div>
        </div>
      </div>

      <div className="page-grid">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="panel">
            <div className="panel-head">
              <Icon name="box" size={14} />
              <span className="panel-title">Installed modules</span>
              <button className="btn sm ghost" style={{ marginLeft: 'auto' }} type="button">
                <Icon name="refresh" size={11} />Sync
              </button>
              <button className="btn sm" type="button"><Icon name="plus" size={11} />Add</button>
            </div>
            <div className="panel-body">
              {installed.map(m => (
                <div className="row" key={m.id}>
                  <div className="row-name">
                    <div className="icon-tile"><Icon name="box" size={13} /></div>
                    <div>
                      <div>{m.name}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--c-text-3)' }}>
                        {m.installed}{m.installed !== m.latest ? <> → <span style={{ color: 'var(--c-status-running)' }}>{m.latest}</span></> : ''}
                      </div>
                    </div>
                  </div>
                  <div className="row-meta">
                    {m.status === 'update' ? <span className="badge update">update</span>
                     : m.status === 'live' ? <span className="badge live">live</span>
                     : <span className="badge idle">idle</span>}
                  </div>
                  <div className="row-actions">
                    {m.status === 'update' ? <button className="btn sm primary" type="button">Update</button>
                     : <button className="btn sm" type="button">Configure</button>}
                    <button className="btn sm ghost icon" type="button"><Icon name="more" size={13} /></button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <Icon name="clock" size={14} />
              <span className="panel-title">Recent activity</span>
              <span className="chip-mono" style={{ marginLeft: 'auto', color: 'var(--c-text-3)' }}>last 1h</span>
            </div>
            <div className="activity">
              {ACTIVITY.map((a, i) => (
                <div className="activity-row" key={i}>
                  <span className="activity-marker" style={{ background: a.color }} />
                  <span className="activity-text" dangerouslySetInnerHTML={{ __html: a.text }} />
                  <span className="activity-time">{a.time}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="panel">
            <div className="panel-head">
              <Icon name="cpu" size={14} />
              <span className="panel-title">Active agents</span>
              <span className="chip-mono" style={{ marginLeft: 'auto', color: 'var(--c-text-3)' }}>{projectAgents.length} bound</span>
            </div>
            <div>
              {projectAgents.map(a => (
                <div className="agent-card" key={a.id}>
                  <div className="agent-avatar">{a.kind[0].toUpperCase()}{a.kind[1].toUpperCase()}</div>
                  <div>
                    <div className="agent-name">{a.id}</div>
                    <div className="agent-meta">
                      <span className={`s-${a.state === 'running' ? 'running' : 'backlog'}`}>
                        <span className="dot" /> {a.state}
                      </span>
                      <span style={{ marginLeft: 8 }}>{a.tasks} tasks</span>
                    </div>
                  </div>
                  <button className="btn sm ghost icon" type="button"><Icon name="more" size={13} /></button>
                </div>
              ))}
            </div>
          </div>

          <div className="panel">
            <div className="panel-head">
              <Icon name="shield" size={14} />
              <span className="panel-title">Pending approvals</span>
              <span className="badge review" style={{ marginLeft: 'auto' }}>2</span>
            </div>
            <div className="panel-body">
              <div className="row" style={{ gridTemplateColumns: '1fr auto' }}>
                <div className="row-name">
                  <div>
                    <div>TSK-3987 · Stripe v3 webhook handlers</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--c-text-3)' }}>+412 / −188 · 6 files</div>
                  </div>
                </div>
                <div className="row-actions">
                  <button className="btn sm" type="button">Diff</button>
                  <button className="btn sm primary" type="button">Approve</button>
                </div>
              </div>
              <div className="row" style={{ gridTemplateColumns: '1fr auto' }}>
                <div className="row-name">
                  <div>
                    <div>TSK-3988 · Backfill org_id on invoices</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--c-text-3)' }}>1 migration · affects DB</div>
                  </div>
                </div>
                <div className="row-actions">
                  <button className="btn sm" type="button">Diff</button>
                  <button className="btn sm primary" type="button">Approve</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ModuleLibrary() {
  const { MODULES } = window.ORC_DATA;
  const [filter, setFilter] = React.useState('all');

  const filtered = filter === 'all' ? MODULES
    : filter === 'installed' ? MODULES.filter(m => m.installed)
    : filter === 'updates' ? MODULES.filter(m => m.status === 'update')
    : MODULES.filter(m => !m.installed);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Module library</h1>
          <p className="page-sub">Signed packages · install, update, or pin versions across projects</p>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <button className="btn ghost" type="button"><Icon name="download" size={12} />Import package</button>
          <button className="btn" type="button"><Icon name="refresh" size={12} />Refresh registry</button>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 16, alignItems: 'center' }}>
        {[
          { id: 'all', label: 'All', n: MODULES.length },
          { id: 'installed', label: 'Installed', n: MODULES.filter(m => m.installed).length },
          { id: 'updates', label: 'Updates', n: MODULES.filter(m => m.status === 'update').length },
          { id: 'available', label: 'Available', n: MODULES.filter(m => !m.installed).length },
        ].map(t => (
          <button
            key={t.id}
            className={`tab ${filter === t.id ? 'active' : ''}`}
            onClick={() => setFilter(t.id)}
            type="button"
          >
            {t.label}<span className="count">{t.n}</span>
          </button>
        ))}
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--c-text-3)' }}>
          registry: registry.orchestra.prod · synced 4m ago
        </span>
      </div>

      <div className="modules-grid">
        {filtered.map(m => (
          <article className="module-card" key={m.id}>
            <div className="module-head">
              <div className="module-icon" style={{ background: m.iconBg }}>{m.icon}</div>
              <div style={{ minWidth: 0 }}>
                <div className="module-name">{m.name}</div>
                <div className="module-id">@orchestra/{m.id} · {m.version}</div>
              </div>
              <div className="module-status">
                {m.status === 'update' && <span className="badge update">update available</span>}
                {m.status === 'live' && <span className="badge live">installed</span>}
                {m.status === 'failed' && <span className="badge failed">install failed</span>}
                {m.status === 'idle' && <span className="badge idle">available</span>}
                {m.status === 'new' && <span className="badge update">beta</span>}
              </div>
            </div>
            <p className="module-desc">{m.desc}</p>
            <div className="module-meta">
              <span><b>{m.size}</b> bundle</span>
              <span><b>{m.deps}</b> deps</span>
              <span>signed by <b>{m.signedBy}</b></span>
            </div>
            <div className="module-actions">
              {m.status === 'update' ? (
                <>
                  <button className="btn primary" type="button"><Icon name="arrowRight" size={12} />Update to {m.version}</button>
                  <button className="btn ghost icon" type="button" title="Changelog"><Icon name="log" size={13} /></button>
                </>
              ) : m.status === 'live' ? (
                <>
                  <button className="btn" type="button"><Icon name="settings" size={12} />Configure</button>
                  <button className="btn ghost icon" type="button" title="Changelog"><Icon name="log" size={13} /></button>
                </>
              ) : m.status === 'failed' ? (
                <>
                  <button className="btn primary" type="button"><Icon name="rotate" size={12} />Retry install</button>
                  <button className="btn ghost icon" type="button" title="Logs"><Icon name="log" size={13} /></button>
                </>
              ) : (
                <>
                  <button className="btn primary" type="button"><Icon name="download" size={12} />Install</button>
                  <button className="btn ghost icon" type="button" title="Changelog"><Icon name="log" size={13} /></button>
                </>
              )}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

window.ProjectPage = ProjectPage;
window.ModuleLibrary = ModuleLibrary;