// 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="One place for every project"
        sub="Portfolio at a glance — status, momentum, and the people behind each shipping surface."
      />
      {/* 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>

      {/* Highlight row */}
      <HighlightRow projects={all} data={data} />

      {/* 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>
  );
}

// ------------- HIGHLIGHT ROW ---------------
function HighlightRow({ projects, data }) {
  const atRisk = projects.filter(p => p.status === 'At risk' || p.blocked);
  const launching = projects.filter(p => p.launching);
  const recent = [...projects].sort((a, b) => (a.updated.includes('min') ? -1 : 0)).slice(0, 4);

  return (
    <div className="hi-row" style={{ marginTop: 4 }}>
      {/* At risk */}
      <div className="hi-card">
        <div className="hi-rail red" />
        <div className="hi-head">
          <div className="hi-title-block">
            <div className="lbl" style={{ color: 'var(--label-red)' }}>At risk / Blocked</div>
            <div className="num">{atRisk.length}</div>
            <div className="sub">Needs your attention this week</div>
          </div>
          <div className="hi-glyph red"><Icon name="circleAlert" size={22} strokeWidth={1.75} /></div>
        </div>
        <div className="hi-list">
          {atRisk.slice(0, 3).map((p) => (
            <a href={`#/projects/${p.id}`} className="hi-item" key={p.id}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--danger-solid)' }} />
              <b className="truncate" style={{ maxWidth: 180 }}>{p.name}</b>
              <span className="truncate" style={{ color: 'var(--text-tertiary)' }}>· {p.risk || 'blocked'}</span>
              <span className="rt">{p.milestone.date}</span>
            </a>
          ))}
        </div>
      </div>

      {/* Launching */}
      <div className="hi-card">
        <div className="hi-rail blue" />
        <div className="hi-head">
          <div className="hi-title-block">
            <div className="lbl" style={{ color: 'var(--primary-01)' }}>Launching soon</div>
            <div className="num">{launching.length}</div>
            <div className="sub">Scheduled in the next 2 weeks</div>
          </div>
          <div className="hi-glyph blue"><Icon name="bolt" size={22} strokeWidth={1.75} /></div>
        </div>
        <div className="hi-list">
          {launching.map((p) => (
            <a href={`#/projects/${p.id}`} className="hi-item" key={p.id}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--primary-01)' }} />
              <b className="truncate" style={{ maxWidth: 190 }}>{p.name}</b>
              <span className="truncate" style={{ color: 'var(--text-tertiary)' }}>· {p.milestone.name}</span>
              <span className="rt">{p.milestone.date}</span>
            </a>
          ))}
        </div>
      </div>

      {/* Recently updated */}
      <div className="hi-card">
        <div className="hi-rail green" />
        <div className="hi-head">
          <div className="hi-title-block">
            <div className="lbl" style={{ color: 'var(--success-solid)' }}>Recent activity</div>
            <div className="num">{recent.length}</div>
            <div className="sub">Moved forward today</div>
          </div>
          <div className="hi-glyph green"><Icon name="zap" size={22} strokeWidth={1.75} /></div>
        </div>
        <div className="hi-list">
          {recent.slice(0, 3).map((p) => (
            <a href={`#/projects/${p.id}`} className="hi-item" key={p.id}>
              <Avatar name={p.owner} size="xs" />
              <b className="truncate" style={{ maxWidth: 170 }}>{p.name}</b>
              <span className="truncate" style={{ color: 'var(--text-tertiary)' }}>· {p.lastComment.split(':')[1]?.trim() || ''}</span>
              <span className="rt">{p.updated}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ------------- PROJECT ROW ---------------
function ProjectRow({ project, clients }) {
  const client = clients[project.client];
  const kindTones = {
    workstream: 'kind-sky',
    feature:    'kind-lav',
    engagement: 'kind-peach',
  };
  const statusToneMap = {
    'At risk':   { label: 'red',    prog: 'red'   },
    'In review': { label: 'blue',   prog: 'blue'  },
    'Building':  { label: 'yellow', prog: 'warn'  },
    'Blocked':   { label: 'red',    prog: 'red'   },
    'Design':    { label: 'purple', prog: 'purple'},
    'On track':  { label: 'green',  prog: 'green' },
    'Kickoff':   { label: 'purple', prog: 'purple'},
  };
  const st = statusToneMap[project.status] || { label: 'gray', prog: 'blue' };

  const milestoneLate = project.milestone.when != null && project.milestone.when < 0;

  return (
    <a className={`prow${project.pinned ? ' pinned' : ''}`} href={`#/projects/${project.id}`}>
      {/* Lead: kind + title + code, then a sub-row with client/contract/comment */}
      <div className="prow-lead">
        <div className={`kind-square ${kindTones[project.kind] || 'kind-sky'}`}>
          <Icon name={project.kind === 'feature' ? 'features' : project.kind === 'engagement' ? 'building' : 'projects'} size={16} strokeWidth={1.75} />
        </div>
        <div className="prow-name">
          <div className="prow-title-row">
            {project.pinned && <Icon name="pin" size={13} style={{ color: 'var(--label-orange)', flex: 'none' }} strokeWidth={1.75} />}
            <span className="prow-title">{project.name}</span>
            <span className="prow-code">{project.code}</span>
          </div>
          <div className="prow-sub">
            {client && client.short !== '·' && <ClientChip client={client} />}
            {project.contract && (
              <ContractChip
                id={project.contract}
                tone={project.contract === 'GS-2026-057' ? 'warn' : ''}
              />
            )}
            <span className="prow-comment">{project.lastComment}</span>
          </div>
        </div>
      </div>

      {/* Status */}
      <div className="col-status">
        <Label tone={st.label} dot size="sm">{project.status}</Label>
        {project.risk && (
          <div style={{ fontSize: 11, color: 'var(--label-red)', letterSpacing: '-0.02em', marginTop: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {project.risk}
          </div>
        )}
      </div>

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

      {/* Progress + spark */}
      <div className="col-progress">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="p-num">{project.progress}%</span>
          <MiniBars points={project.activity} color={
            st.prog === 'red' ? 'var(--danger-solid)' :
            st.prog === 'green' ? 'var(--success-solid)' :
            st.prog === 'warn' ? 'var(--warning-solid)' :
            st.prog === 'purple' ? 'var(--primary-04)' :
            'var(--primary-01)'
          } width={64} height={20} />
        </div>
        <ProgressBar value={project.progress} tone={st.prog} />
      </div>

      {/* Owner avatars */}
      <div className="col-owner">
        <AvatarStack names={project.team} max={3} size="sm" />
      </div>

      <Icon name="chevronRight" size={14} className="col-chev" strokeWidth={2} />
    </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 });