// Projects Overview screen

function ProjectsPage({ data }) {
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const [view, setView] = React.useState('cards');

  const all = data.projects;
  const counts = React.useMemo(() => ({
    all: all.length,
    'in-flight': all.filter(p => ['On track','In review','Building','Design'].includes(p.status)).length,
    'at-risk':   all.filter(p => p.status === 'At risk').length,
    blocked:     all.filter(p => p.blocked).length,
    launching:   all.filter(p => p.launching).length,
    kickoff:     all.filter(p => p.status === 'Kickoff').length,
  }), [all]);

  const filtered = React.useMemo(() => {
    const q = query.trim().toLowerCase();
    return all.filter(p => {
      if (statusFilter === 'in-flight' && !['On track','In review','Building','Design'].includes(p.status)) return false;
      if (statusFilter === 'at-risk'  && p.status !== 'At risk') return false;
      if (statusFilter === 'blocked'  && !p.blocked) return false;
      if (statusFilter === 'launching'&& !p.launching) return false;
      if (statusFilter === 'kickoff'  && p.status !== 'Kickoff') return false;
      if (q) {
        const haystack = [p.name, p.code, p.owner, p.status, (data.clients[p.client]?.name || '')].join(' ').toLowerCase();
        if (!haystack.includes(q)) return false;
      }
      return true;
    });
  }, [all, statusFilter, query, data.clients]);

  return (
    <main className="main" data-screen-label="02 Projects">
      <MGWorkspaceBanner
        kind="projects"
        eyebrow="Projects · MY GENI"
        title="Project portfolio"
        sub="Status, momentum, and ownership across every active project."
      />
      {/* Page header */}
      <div className="page-header-row">
        <div>
          <h1 className="greeting" style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            Projects
            <span style={{ fontSize: 20, color: 'var(--text-tertiary)', fontWeight: 500, letterSpacing: '-0.01em' }}>{all.length}</span>
          </h1>
          <div className="date-line">
            <b>{counts['in-flight']} in flight</b> · <span style={{ color: 'var(--label-red)', fontWeight: 600 }}>{counts['at-risk']} at risk</span> · <span style={{ color: 'var(--label-red)', fontWeight: 600 }}>{counts.blocked} blocked</span> · {counts.launching} launching soon
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-white btn-sm">
            <Icon name="calendar" size={15} strokeWidth={1.75} />
            <span>Timeline</span>
          </button>
          <button className="btn btn-primary btn-sm">
            <Icon name="plus" size={15} strokeWidth={2} />
            <span>New project</span>
          </button>
        </div>
      </div>

      {/* Phase 25 · #2 — KPI highlight row removed (duplicated the filter
          tabs + meta line below); user lands directly on filters + table. */}

      {/* Main body: list + right rail */}
      <div className="grid g-cols-3-1" style={{ marginTop: 16, alignItems: 'flex-start' }}>
        <div>
          {/* Filter bar */}
          <div className="filter-bar" style={{ marginBottom: 12 }}>
            <Tabs
              value={statusFilter}
              onChange={setStatusFilter}
              items={[
                { key: 'all',       label: 'All',        count: counts.all },
                { key: 'in-flight', label: 'In flight',  count: counts['in-flight'], tone: 'blue' },
                { key: 'at-risk',   label: 'At risk',    count: counts['at-risk'],   tone: 'red' },
                { key: 'blocked',   label: 'Blocked',    count: counts.blocked,      tone: 'red' },
                { key: 'launching', label: 'Launching',  count: counts.launching,    tone: 'green' },
                { key: 'kickoff',   label: 'Kickoff',    count: counts.kickoff,      tone: 'purple' },
              ]}
            />
            <div className="filter-spacer" />
            <Input
              placeholder="Search projects, clients, owners…"
              value={query}
              onChange={setQuery}
              leadIcon={<Icon name="search" size={16} strokeWidth={1.75} />}
              style={{ minWidth: 260, flex: '0 1 320px' }}
            />
            <Select label="Sort" value="Recently updated" />
            <div className="tabs" role="group" aria-label="View">
              <button className={`tab${view === 'cards' ? ' active' : ''}`} onClick={() => setView('cards')}>
                <Icon name="grid" size={14} strokeWidth={1.75} />
              </button>
              <button className={`tab${view === 'list' ? ' active' : ''}`} onClick={() => setView('list')}>
                <Icon name="list" size={14} strokeWidth={1.75} />
              </button>
            </div>
          </div>

          {/* Result set */}
          <Card>
            {filtered.length === 0 ? (
              <EmptyState
                illustration={<NoResultsIllus size={140} />}
                title={`No projects match “${query}”`}
                body="Try a different search term or clear the filters to see all projects."
                action={<button className="btn btn-white btn-sm" onClick={() => { setQuery(''); setStatusFilter('all'); }}>Clear filters</button>}
              />
            ) : (
              <div className="plist">
                {filtered.map((p) => (
                  <ProjectRow key={p.id} project={p} clients={data.clients} />
                ))}
              </div>
            )}
          </Card>
        </div>

        <ProjectsRail data={data} />
      </div>
    </main>
  );
}

// ------------- PROJECT ROW ---------------
// Phase 25 · #1 — density fix. Was 9+ repeated visual elements per row
// (kind square, chips, last comment, sparkline, progress number, chevron).
// Now 5: title (pin dot + name + mono code) · status dot · milestone ·
// progress bar with % inside · owner avatars (max 2). Detail chips and risk
// live on the project page; the row is scannable like Linear/Height lists.
function ProjectRow({ project }) {
  const statusToneMap = {
    'At risk':   'red',
    'In review': 'blue',
    'Building':  'amber',
    'Blocked':   'red',
    'Design':    'purple',
    'On track':  'green',
    'Kickoff':   'purple',
  };
  const st = statusToneMap[project.status] || 'blue';
  const milestoneLate = project.milestone.when != null && project.milestone.when < 0;

  return (
    <a className={`prow prow2${project.pinned ? ' pinned' : ''}`} href={`#/projects/${project.id}`}>
      <div className="prow2-title">
        {project.pinned && <span className="prow2-pin" aria-label="Pinned" />}
        <span className="prow2-name truncate">{project.name}</span>
        <span className="prow2-code mono">{project.code}</span>
      </div>

      <div className={`prow2-status sdot-${st}`}>
        <span className="sdot" />
        <span className="sdot-label">{project.status}</span>
      </div>

      <div className="prow2-mile">
        <span className="truncate">{project.milestone.name}</span>
        <span className={`m-date${milestoneLate ? ' late' : ''}`}>
          {milestoneLate ? `Overdue ${-project.milestone.when}d` : project.milestone.date}
        </span>
      </div>

      <div className="prow2-progress">
        <div className={`prow2-bar tone-${st}`}>
          <i style={{ width: `${Math.max(0, Math.min(100, project.progress))}%` }} />
          <span className="prow2-bar-num">{project.progress}%</span>
        </div>
      </div>

      <div className="col-owner">
        <AvatarStack names={project.team} max={2} size="xs" />
      </div>
    </a>
  );
}

// ------------- RIGHT RAIL ---------------
function ProjectsRail({ data }) {
  const expiring = data.contracts.filter(c => c.reminder === 'expiring');
  const blocked = data.projects.filter(p => p.blocked);

  return (
    <div className="projects-side">
      {/* KPI tile */}
      <div className="kpi-tile">
        <div className="lbl">Momentum · Last 12 days</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, justifyContent: 'space-between' }}>
          <div>
            <div className="num tabular">+38%</div>
            <div className="delta">Projects moved forward</div>
          </div>
          <Sparkline points={[3,4,5,4,6,5,7,6,8,9,10,12]} color="var(--success-solid)" width={110} height={40} />
        </div>
      </div>

      {/* Contracts expiring */}
      <Card>
        <CardHead
          title="Contracts expiring"
          count={expiring.length}
          right={<a className="link" href="#/contracts">All</a>}
          icon={<Icon name="contracts" size={18} strokeWidth={1.75} style={{ color: 'var(--label-yellow)' }} />}
        />
        <div style={{ padding: 4 }}>
          {expiring.length === 0 && (
            <EmptyState
              illustration={<ContractReminderIllus size={104} />}
              title="Nothing expiring soon"
              body="Contracts renewing more than 30 days out are hidden here."
            />
          )}
          {expiring.map((c) => (
            <div className="review-item" key={c.id} style={{ padding: '12px 12px' }}>
              <div className="kind-square" style={{ width: 34, height: 34, background: 'rgba(239,157,14,0.14)', color: 'var(--label-yellow)' }}>
                <Icon name="contracts" size={16} strokeWidth={1.75} />
              </div>
              <div className="review-middle">
                <div className="t1 truncate">{c.title}</div>
                <div className="t2 truncate">{data.clients[c.client]?.name} · {c.value}</div>
              </div>
              <div className="review-right">
                <span className="reminder-chip expiring">
                  <Icon name="clock" size={11} strokeWidth={2} />
                  {c.expiresIn.replace('Expires in ', '')}
                </span>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Blocked queue */}
      <Card>
        <CardHead
          title="Blocked queue"
          count={blocked.length}
          right={<a className="link">View</a>}
          icon={<Icon name="block" size={18} strokeWidth={1.75} style={{ color: 'var(--label-red)' }} />}
        />
        <div style={{ padding: 4 }}>
          {blocked.map((p) => (
            <div className="review-item" key={p.id} style={{ padding: '12px 12px' }}>
              <div className="kind-square" style={{ width: 34, height: 34, background: 'rgba(255,56,28,0.10)', color: 'var(--danger-solid)' }}>
                <Icon name="block" size={16} strokeWidth={1.75} />
              </div>
              <div className="review-middle">
                <div className="t1 truncate">{p.name}</div>
                <div className="t2 truncate">{p.risk} · {p.owner}</div>
              </div>
              <div className="review-right">
                <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>{p.updated}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { ProjectsPage });