// Job board — tasks for every persona, kanban view from intake to sign-off.
// Not just maintenance — it is the personal task board for whoever is logged in.
function JobBoard({ onBuilding, persona }) {
  const pid = persona && persona.id;
  // Each persona only sees jobs they are tagged on / responsible for:
  // - Jessica (strata mgr) - every job in her portfolio
  // - Helen (treasurer)   - jobs at Harbourview where her approval is needed
  // - David (building)    - jobs on site at The Lumen
  // - Cameron (maintenance) - every trade job he and his crews coordinate
  const scopeBldg = pid === 'treasurer' ? 'Harbourview' : pid === 'building' ? 'The Lumen' : null;
  const scopedBoard = BOARD.map(col => {
    if (!scopeBldg) return col;
    const jobs = col.jobs.filter(j => (j.bldg || '').startsWith(scopeBldg));
    return { ...col, jobs, total: jobs.length };
  });
  const totalJobs = scopedBoard.reduce((s, c) => s + c.jobs.length, 0);
  const header =
    pid === 'treasurer' ? { eyebrow: 'Tasks · Harbourview · SP 84021', h1: 'Approvals and works <em>tagged to you.</em>', sub: `${totalJobs} job${totalJobs===1?'':'s'} in your scheme — flagged when an approval or decision is yours.` }
    : pid === 'building' ? { eyebrow: 'Tasks · The Lumen · SP 67203', h1: 'Work on site, <em>in order.</em>', sub: `${totalJobs} job${totalJobs===1?'':'s'} on your building — every step from intake to sign-off, with the vendor visible.` }
    : pid === 'maintenance' ? { eyebrow: 'Today’s board · FM & trades', h1: 'Every job, <em>in order.</em>', sub: `${totalJobs} job${totalJobs===1?'':'s'} across your sites — your run sheet for the kanban view.` }
    : { eyebrow: 'Tasks · 127 schemes', h1: 'Every job in the book, <em>in view.</em>', sub: `${totalJobs} live jobs across your portfolio — kanban from intake to sign-off.` };
  return (
    <div className="view">
      <div className="wrap" style={{ paddingTop: 20, paddingBottom: 8 }}>
        <div className="eyebrow">{header.eyebrow}</div>
        <h1 className="h-serif" style={{ fontSize: 22, margin: '8px 0 4px' }} dangerouslySetInnerHTML={{ __html: header.h1 }} />
        <div className="sub" style={{ fontSize: 13.5, color: 'var(--fg-2)' }}>{header.sub}</div>
      </div>
      <div className="board">
      {scopedBoard.map(col => (
        <div className="col" key={col.key}>
          <div className="col-h">
            <span className="nm"><span className="dot" style={{ background: col.dot }} />{col.name}</span>
            <span className="ct">{col.jobs.length}</span>
          </div>
          <div className="col-body">
            {col.jobs.map((j, i) => (
              <div className={`job ${j.stall ? 'flag' : ''}`} key={i} onClick={() => onBuilding(j.bldg)}>
                <div className="jt">{j.t}</div>
                <div className="jb">{siteOf(j.bldg).short} · {siteOf(j.bldg).sp}</div>
                {j.stall && <div className="stall"><Icon name="alert-triangle" />Stalled 26h - chase quote</div>}
                <div className="jf">
                  {j.ven
                    ? <span className="ven"><span className="av">{j.ven.slice(0, 2).toUpperCase()}</span>{j.ven}</span>
                    : <span className="ven" style={{ color: 'var(--fg-3)' }}>Unassigned</span>}
                  {j.amt && <span className="amt">{j.amt}</span>}
                </div>
                {j.ai && (
                  <div className="job-ai">
                    <span className="ai-spark"><Icon name="sparkles" /></span>
                    <div><div className="job-ai-do">{j.ai.do}</div><div className="job-ai-basis">{j.ai.basis}</div></div>
                  </div>
                )}
              </div>
            ))}
            <div className="job" style={{ borderStyle: 'dashed', textAlign: 'center', color: 'var(--fg-3)', fontSize: 12, fontFamily: 'var(--font-mono)', cursor: 'pointer' }}
              onClick={() => act('New job', { kind: 'info', icon: 'plus', sub: 'Adding to ' + col.name })}>+ Add job</div>
          </div>
        </div>
      ))}
      </div>
    </div>
  );
}
Object.assign(window, { JobBoard });