/* ══════════════════════════════════════════════════════════════════
   ATLAS COCKPIT — PROJECTS
   ══════════════════════════════════════════════════════════════════ */
const LANE_ORDER = { swing: 0, 'track-a': 1, 'track-b': 2, lights: 3, watch: 4, 'wind-down': 5 };

function ProjectsView() {
  const D = window.ATLAS_DATA;
  const [filter, setFilter] = useState('all');
  const [sort, setSort] = useState('priority');
  const [view, setView] = useState('cards');

  let list = D.projects.slice();
  if (filter === 'blocked') list = list.filter(p => p.status === 'blocked' || p.blocker);
  else if (filter !== 'all') list = list.filter(p => p.lane === filter);

  const revOf = p => p.mtdRevenue == null ? -1 : p.mtdRevenue;
  if (sort === 'priority') list.sort((a, b) => (LANE_ORDER[a.lane] - LANE_ORDER[b.lane]) || ((a.blocker ? 0 : 1) - (b.blocker ? 0 : 1)));
  else if (sort === 'updated') list.sort((a, b) => b.lastUpdate.localeCompare(a.lastUpdate));
  else if (sort === 'revenue') list.sort((a, b) => revOf(b) - revOf(a));
  else if (sort === 'risk') {
    const risky = id => D.risks.filter(r => r.project === id).length + (D.projects.find(p => p.id === id).blocker ? 1 : 0);
    list.sort((a, b) => risky(b.id) - risky(a.id));
  }

  const lanes = [['all', 'All'], ['swing', 'Swing'], ['lights', 'Lights'], ['watch', 'Watch'], ['wind-down', 'Wind-down'], ['track-a', 'Track A'], ['track-b', 'Track B'], ['blocked', 'Blocked']];
  const counts = Object.fromEntries(lanes.map(([k]) => [k, k === 'all' ? D.projects.length : k === 'blocked' ? D.projects.filter(p => p.status === 'blocked' || p.blocker).length : D.projects.filter(p => p.lane === k).length]));

  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('h1', { className: 'page-h1' }, 'Projects'),
      React.createElement('p', { className: 'page-lead' }, 'Operating view across every lane. Click any project for its timeline, financials, risks, and tasks.')),
    React.createElement('div', { className: 'toolbar' },
      React.createElement('div', { className: 'chips' }, lanes.map(([k, l]) => React.createElement('button', { key: k, className: cls('chip', filter === k && 'on'), onClick: () => setFilter(k) }, l, React.createElement('span', { className: 'cn' }, counts[k])))),
      React.createElement('div', { className: 'tb-sp' }),
      React.createElement('select', { className: 'field', style: { width: 'auto' }, value: sort, onChange: e => setSort(e.target.value) },
        React.createElement('option', { value: 'priority' }, 'Sort: Priority'),
        React.createElement('option', { value: 'updated' }, 'Sort: Last updated'),
        React.createElement('option', { value: 'revenue' }, 'Sort: Revenue'),
        React.createElement('option', { value: 'risk' }, 'Sort: Risk')),
      React.createElement('div', { className: 'seg' },
        React.createElement('button', { className: view === 'cards' ? 'on' : '', onClick: () => setView('cards'), title: 'Cards' }, React.createElement(Icon, { name: 'grid', size: 15 })),
        React.createElement('button', { className: view === 'table' ? 'on' : '', onClick: () => setView('table'), title: 'Table' }, React.createElement(Icon, { name: 'list', size: 15 })))),
    view === 'cards'
      ? React.createElement('div', { className: 'tiles' }, list.map(p => React.createElement(ProjectTile, { key: p.id, p })))
      : React.createElement(ProjectTable, { list })
  );
}

function ProjectTile({ p }) {
  return React.createElement('article', { className: 'card click ptile', onClick: () => openDrawer('project', p.id) },
    React.createElement('div', { className: 'ptile-head' },
      React.createElement('div', { style: { flex: 1 } },
        React.createElement('div', { className: 'ptile-name' }, p.name),
        React.createElement('div', { className: 'ptile-sub' }, p.summary)),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
        React.createElement(LanePill, { lane: p.lane }),
        React.createElement('button', { className: 'tile-add', title: 'Add action to ' + p.name, 'aria-label': 'Add action', onClick: (e) => { e.stopPropagation(); openAddAction(p.id); } }, React.createElement(Icon, { name: 'plus', size: 14 })))),
    React.createElement('div', { className: 'ptile-mid' },
      React.createElement('div', { className: 'ptile-m' }, React.createElement('div', { className: 'ml' }, 'MTD'), React.createElement('div', { className: cls('mv', p.mtdRevenue == null && 'muted') }, fmt$(p.mtdRevenue))),
      React.createElement('div', { className: 'ptile-m' }, React.createElement('div', { className: 'ml' }, 'Margin'), React.createElement('div', { className: cls('mv', p.marginPct == null && 'muted') }, fmtPct(p.marginPct))),
      React.createElement('div', { className: 'ptile-m' }, React.createElement('div', { className: 'ml' }, 'Confidence'), React.createElement('div', { className: 'mv', style: { marginTop: 6 } }, React.createElement(Conf, { level: p.confidence })))),
    p.blocker && React.createElement('div', { className: 'ptile-block' }, React.createElement(Icon, { name: 'alert', size: 14, className: 'bi' }), React.createElement('span', null, p.blocker)),
    !p.blocker && p.nextAction && React.createElement('div', { className: 'ptile-block' }, React.createElement(Icon, { name: 'arrowR', size: 14, className: 'bi', style: { color: 'var(--accent)' } }), React.createElement('span', null, p.nextAction)),
    React.createElement('div', { className: 'ptile-foot' },
      React.createElement(StatusPill, { status: p.status }),
      React.createElement('span', { className: 'pf-meta' }, p.owner ? p.owner + ' · ' : '', 'Updated ', fmtDate(p.lastUpdate)))
  );
}

function ProjectTable({ list }) {
  const D = window.ATLAS_DATA;
  return React.createElement('div', { className: 'ptable-wrap' },
    React.createElement('table', { className: 'dt' },
      React.createElement('thead', null, React.createElement('tr', null,
        ['Project', 'Lane', 'Status', 'Owner', 'MTD', 'Margin', 'Next / blocker'].map((h, i) =>
          React.createElement('th', { key: h, className: (i === 4 || i === 5) ? 'r' : '' }, h)))),
      React.createElement('tbody', null, list.map(p => React.createElement('tr', { key: p.id, onClick: () => openDrawer('project', p.id) },
        React.createElement('td', { className: 'name' }, p.name),
        React.createElement('td', null, React.createElement(LanePill, { lane: p.lane })),
        React.createElement('td', null, React.createElement(StatusPill, { status: p.status })),
        React.createElement('td', { style: { color: 'var(--ink-muted)', fontSize: 12.5 } }, p.owner),
        React.createElement('td', { className: cls('r', 'dt-num', p.mtdRevenue == null && 'muted') }, fmt$(p.mtdRevenue)),
        React.createElement('td', { className: cls('r', 'dt-num', p.marginPct == null && 'muted') }, fmtPct(p.marginPct)),
        React.createElement('td', { style: { color: 'var(--ink-muted)', fontSize: 12.5, maxWidth: 260 } }, p.blocker || p.nextAction || '—')
      ))))
  );
}
Object.assign(window, { ProjectsView });