// =========================================================
// MY WORK V2 — Phase 18
// -----------------------------------------------------------------
// Depth cap: My Work → Work Item Detail. Three peer views:
// Focus / Work / Schedule. No sub-nav inside a view.
//
// Reads exclusively from data.workItems[] (canonical personal
// work assigned to the current user). Every item carries Phase-12
// `links: {stage, mission, feature, ...}` — Stage/Mission/Feature/
// Research/Design/Development/Commercial context is referenced,
// never duplicated. Mission checklists remain lightweight and
// local; they are NOT copied here.
// =========================================================

const MW_STATE = {
  'next':        { tone: 'gray',  label: 'Next'        },
  'in-progress': { tone: 'blue',  label: 'In progress' },
  'waiting':     { tone: 'yellow',label: 'Waiting'     },
  'blocked':     { tone: 'red',   label: 'Blocked'     },
  'done':        { tone: 'green', label: 'Done'        },
};

function mwStateChip(state, size = 'sm') {
  const s = MW_STATE[state];
  if (!s) return null;
  return <Label tone={s.tone} dot size={size}>{s.label}</Label>;
}

function mwPriorityChip(p) {
  if (p !== 'high') return null;
  return <span className="mw-prio-high" title="High priority"><Icon name="alert" size={10} strokeWidth={2} /> High</span>;
}

function mwDueChip(item) {
  const isOverdue = item.dueBucket === 'overdue';
  const isToday   = item.dueBucket === 'today';
  const cls = `mw-due${isOverdue ? ' mw-due-overdue' : (isToday ? ' mw-due-today' : '')}`;
  return <span className={cls}><Icon name="clock" size={11} strokeWidth={1.75} />{item.due}</span>;
}

function mwPortrait(name, pdata) {
  return (pdata?.people || {})[(name || '').toLowerCase()]?.portrait || null;
}

// Get global project data (for portrait lookup in the current user's context)
function mwPortraitGlobal(name, data) {
  // Walk every project's people table (they can all provide portraits).
  const projs = Object.values(window.MYGENI_PROJECT_DATA || {});
  for (const p of projs) {
    const hit = (p.people || {})[(name || '').toLowerCase()];
    if (hit?.portrait) return hit.portrait;
  }
  return null;
}

// Load project for a work item so we can render its links/stage.
function mwProjectFor(item) {
  return window.MYGENI_PROJECT_DATA?.[item.project];
}

// Compact "project glyph" — subtle letter monogram in a neutral chip.
// One neutral surface for every project — no rainbow.
function MWProjectGlyph({ project }) {
  const code = (project?.code || project?.name || 'PR').replace(/[^A-Z0-9]/g, '').slice(0, 3) || 'PR';
  return <span className="mw-proj-glyph mono">{code}</span>;
}

// -----------------------------------------------------------------
// RelatedTo-style chip row that also picks up dev / research /
// design / doc / contract canonical links (extends the standard
// RelatedTo which only covers stage/mission/feature).
// -----------------------------------------------------------------
function MWCanonicalChips({ links, project, small }) {
  if (!links || !project) return null;
  const chips = [];
  const stage = links.stage && (project.stages || []).find(s => s.n === links.stage);
  const mission = links.mission && (window.MYGENI_MISSIONS || {})[links.mission];
  const feature = links.feature && (project.features || []).find(f => f.id === links.feature);

  if (stage)   chips.push({ icon: 'stages',   label: `S${String(stage.n).padStart(2,'0')} · ${stage.name}`, href: `#/projects/${project.id}/plan` });
  if (mission) chips.push({ icon: mission.icon, label: `${mission.label} mission`,                         href: `#/projects/${project.id}/plan` });
  if (feature) chips.push({ icon: 'features', label: feature.title,                                        href: `#/projects/${project.id}/features/${feature.id}` });
  if (links.design)   chips.push({ icon: 'palette',   label: 'Design item',    href: `#/projects/${project.id}/design/item/${links.design}` });
  if (links.research) chips.push({ icon: 'flask',     label: 'Research study', href: `#/projects/${project.id}/research/study/${links.research}` });
  if (links.dev)      chips.push({ icon: 'terminal',  label: 'System',         href: `#/projects/${project.id}/development/system/${links.dev}` });
  if (links.contract) chips.push({ icon: 'contracts', label: 'Contract',       href: `#/projects/${project.id}/commercial/contract/${links.contract}` });
  if (links.doc)      chips.push({ icon: 'files',     label: 'Document',       href: `#/projects/${project.id}/documents/doc/${links.doc}` });

  if (!chips.length) return null;
  return (
    <div className={`mw-canon${small ? ' mw-canon-sm' : ''}`}>
      {chips.map((c, i) => (
        <a key={i} href={c.href} className="mw-canon-chip" onClick={(e) => e.stopPropagation()}>
          <Icon name={c.icon} size={10} strokeWidth={1.75} />
          <span className="truncate">{c.label}</span>
        </a>
      ))}
    </div>
  );
}

// Compact inline version — non-anchor tokens, safe inside a parent link.
function MWCanonicalInline({ links, project }) {
  if (!links || !project) return null;
  const parts = [];
  const stage = links.stage && (project.stages || []).find(s => s.n === links.stage);
  const mission = links.mission && (window.MYGENI_MISSIONS || {})[links.mission];
  const feature = links.feature && (project.features || []).find(f => f.id === links.feature);
  if (stage)   parts.push(`S${String(stage.n).padStart(2,'0')} · ${stage.name}`);
  if (mission) parts.push(`${mission.label}`);
  if (feature) parts.push(feature.title);
  if (!parts.length) return null;
  return (
    <span className="mw-canon-inline">
      {parts.map((p, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="dot-sep">·</span>}
          <span>{p}</span>
        </React.Fragment>
      ))}
    </span>
  );
}

// =========================================================
// ROW — canonical list row (used across Focus, Work, Schedule)
// =========================================================
function MWRow({ item, dense = false, showProject = true, onOpen }) {
  const project = mwProjectFor(item);
  return (
    <a
      href={`#/my-work/item/${item.id}`}
      className={`mw-row mw-row-${item.status}${dense ? ' mw-row-dense' : ''}`}
      onClick={onOpen ? (e) => { e.preventDefault(); onOpen(item.id); } : undefined}
    >
      <span className={`mw-check mw-check-${item.status}`} aria-hidden>
        {item.status === 'done' && <Icon name="check" size={11} strokeWidth={2.5} />}
      </span>
      <div className="mw-row-main">
        <div className="mw-row-title-line">
          {mwPriorityChip(item.priority)}
          <span className={`mw-row-title${item.status === 'done' ? ' is-done' : ''}`}>{item.title}</span>
        </div>
        <div className="mw-row-sub">
          {showProject && project && (
            <>
              <MWProjectGlyph project={project} />
              <span className="mw-proj-name truncate">{project.code}</span>
              <span className="dot-sep">·</span>
            </>
          )}
          <MWCanonicalInline links={item.links} project={project} />
        </div>
      </div>
      {mwDueChip(item)}
      {mwStateChip(item.status)}
      <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)', flex: 'none' }} />
    </a>
  );
}

// =========================================================
// FOCUS
// =========================================================

function MWFocus({ data, user }) {
  const items = data.workItems || [];
  const active   = items.filter(i => i.status !== 'done');
  const overdue  = items.filter(i => i.dueBucket === 'overdue' && i.status !== 'done');

  // Current focus: high-priority in-progress OR overdue OR today high-priority
  const focusItem =
    items.find(i => i.status === 'in-progress' && i.priority === 'high' && i.dueBucket === 'today') ||
    items.find(i => i.status === 'in-progress' && i.dueBucket === 'today') ||
    items.find(i => i.status === 'in-progress');

  // Next up: 3 items, not the focus item, not blocked, prioritized by
  // due + priority. We pick from status ∈ {next, in-progress, waiting}
  // ordered roughly by due bucket then priority.
  const bucketOrder = ['overdue','today','tomorrow','this-week','next-week','later'];
  const nextUp = active
    .filter(i => i.id !== focusItem?.id && i.status !== 'blocked')
    .sort((a, b) => {
      const ai = bucketOrder.indexOf(a.dueBucket);
      const bi = bucketOrder.indexOf(b.dueBucket);
      if (ai !== bi) return ai - bi;
      return (b.priority === 'high') - (a.priority === 'high');
    })
    .slice(0, 3);

  const waiting  = items.filter(i => i.status === 'waiting');
  const blocked  = items.filter(i => i.status === 'blocked');
  const upcoming = active.filter(i => i.id !== focusItem?.id && !nextUp.includes(i));

  // Upcoming grouped by day bucket, near-term only
  const groups = [
    { key: 'today',     label: 'Today',     items: upcoming.filter(i => i.dueBucket === 'today') },
    { key: 'tomorrow',  label: 'Tomorrow',  items: upcoming.filter(i => i.dueBucket === 'tomorrow') },
    { key: 'this-week', label: 'This week', items: upcoming.filter(i => i.dueBucket === 'this-week') },
    { key: 'next-week', label: 'Next week', items: upcoming.filter(i => i.dueBucket === 'next-week') },
  ].filter(g => g.items.length > 0);

  return (
    <div className="mw-focus">
      {/* --- Greeting strip ---------------------------------------- */}
      <div className="mw-greet">
        <div>
          <div className="dv-eyebrow">Focus · {data.today || 'Today'}</div>
          <h1 className="mw-greet-title">
            Good {(() => { const h = new Date().getHours(); return h < 5 ? 'evening' : h < 12 ? 'morning' : h < 18 ? 'afternoon' : 'evening'; })()}, {user?.name?.split(' ')[0] || 'there'}.
          </h1>
          <div className="mw-greet-sub">
            {overdue.length > 0
              ? <><b className="mw-attn-num">{overdue.length}</b> overdue · <b>{active.length}</b> in flight · <b>{waiting.length}</b> waiting on others</>
              : <><b>{active.length}</b> in flight · <b>{waiting.length}</b> waiting on others · <b>{blocked.length}</b> blocked</>}
          </div>
        </div>
      </div>

      {/* --- Current Focus (single strong item) ------------------- */}
      {focusItem ? (
        <div className="mw-current">
          <div className="mw-current-eyebrow">
            <span>Current focus</span>
            {focusItem.dueBucket === 'today' && <span className="mw-current-today">Due today</span>}
          </div>
          <div className="mw-current-title">{focusItem.title}</div>
          {focusItem.outcome && <p className="mw-current-outcome">{focusItem.outcome}</p>}
          <div className="mw-current-meta">
            {(() => { const p = mwProjectFor(focusItem); return p && (
              <div className="mw-current-context">
                <MWProjectGlyph project={p} />
                <span>{p.name}</span>
                <span className="dot-sep">·</span>
                <MWCanonicalInline links={focusItem.links} project={p} />
              </div>
            ); })()}
            <div className="mw-current-actions">
              {mwStateChip(focusItem.status)}
              <a href={`#/my-work/item/${focusItem.id}`} className="btn btn-dark btn-sm">
                <Icon name="chevronRight" size={14} strokeWidth={1.75} />
                <span>Open work</span>
              </a>
            </div>
          </div>
        </div>
      ) : (
        <div className="mw-quiet">
          <Icon name="check" size={14} strokeWidth={1.75} />
          <span>You're clear for now. Scheduled work is below.</span>
        </div>
      )}

      {/* --- Next up (ordered list) ------------------------------- */}
      {nextUp.length > 0 && (
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 10 }}>
            <h3>Next up</h3>
            <a className="link" href="#/my-work/work">View all work →</a>
          </div>
          <ol className="mw-nextup">
            {nextUp.map((item, i) => {
              const project = mwProjectFor(item);
              return (
                <li key={item.id}>
                  <a href={`#/my-work/item/${item.id}`} className="mw-nextup-row">
                    <span className="mw-nextup-n mono">{String(i + 1).padStart(2, '0')}</span>
                    <div className="mw-nextup-body">
                      <div className="mw-nextup-title">{item.title}</div>
                      <div className="mw-nextup-sub">
                        {project && <>
                          <MWProjectGlyph project={project} />
                          <span className="mw-proj-name">{project.code}</span>
                          <span className="dot-sep">·</span>
                        </>}
                        <MWCanonicalInline links={item.links} project={project} />
                      </div>
                    </div>
                    {mwDueChip(item)}
                    {mwStateChip(item.status)}
                  </a>
                </li>
              );
            })}
          </ol>
        </div>
      )}

      {/* --- Two-column: Waiting on / Upcoming -------------------- */}
      <div className="dv-two-col">
        {/* Waiting on others */}
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 10 }}>
            <h3>Waiting on others</h3>
            {waiting.length > 0 && <span className="mw-count">{waiting.length}</span>}
          </div>
          {waiting.length ? (
            <div className="mw-waiting-list">
              {waiting.map(item => {
                const project = mwProjectFor(item);
                return (
                  <a key={item.id} href={`#/my-work/item/${item.id}`} className="mw-waiting-row">
                    <Avatar name={item.waitingOn?.name} size="sm" portrait={mwPortraitGlobal(item.waitingOn?.name, data)} />
                    <div className="mw-waiting-body">
                      <div className="mw-waiting-lbl">
                        <span className="mw-waiting-since">since {item.waitingOn?.since}</span>
                        <span className="mw-waiting-who">{item.waitingOn?.name}</span>
                      </div>
                      <div className="mw-waiting-title">{item.title}</div>
                      {item.waitingOn?.note && <div className="mw-waiting-note">{item.waitingOn.note}</div>}
                      {item.waitingOn?.blocks && (
                        <div className="mw-waiting-blocks">
                          <Icon name="link" size={10} strokeWidth={1.75} />
                          <span>Blocks: {item.waitingOn.blocks}</span>
                        </div>
                      )}
                    </div>
                    {project && (
                      <div className="mw-waiting-side">
                        <MWProjectGlyph project={project} />
                        <span className="mw-proj-name">{project.code}</span>
                      </div>
                    )}
                  </a>
                );
              })}
            </div>
          ) : (
            <div className="mw-quiet mw-quiet-small">
              <Icon name="check" size={12} strokeWidth={1.75} />
              <span>Nothing waiting on anyone right now.</span>
            </div>
          )}
        </div>

        {/* Blocked (only rendered when there IS blocked work) */}
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 10 }}>
            <h3>Blocked</h3>
            {blocked.length > 0 && <span className="mw-count">{blocked.length}</span>}
          </div>
          {blocked.length ? (
            <div className="mw-waiting-list">
              {blocked.map(item => {
                const project = mwProjectFor(item);
                return (
                  <a key={item.id} href={`#/my-work/item/${item.id}`} className="mw-waiting-row mw-blocked-row">
                    <div className="mw-blocked-glyph"><Icon name="alert" size={14} strokeWidth={1.75} /></div>
                    <div className="mw-waiting-body">
                      <div className="mw-waiting-title">{item.title}</div>
                      {item.blocker?.note && <div className="mw-waiting-note">{item.blocker.note}</div>}
                      {item.blocker?.ownedBy && (
                        <div className="mw-waiting-blocks">
                          <span>Owned by {item.blocker.ownedBy}</span>
                        </div>
                      )}
                    </div>
                    {project && (
                      <div className="mw-waiting-side">
                        <MWProjectGlyph project={project} />
                        <span className="mw-proj-name">{project.code}</span>
                      </div>
                    )}
                  </a>
                );
              })}
            </div>
          ) : (
            <div className="mw-quiet mw-quiet-small">
              <Icon name="check" size={12} strokeWidth={1.75} />
              <span>Nothing blocked.</span>
            </div>
          )}
        </div>
      </div>

      {/* --- Upcoming grouped by day ------------------------------- */}
      {groups.length > 0 && (
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 10 }}>
            <h3>Upcoming</h3>
            <a className="link" href="#/my-work/schedule">Schedule view →</a>
          </div>
          <div className="mw-upcoming">
            {groups.map(g => (
              <div key={g.key} className="mw-upcoming-group">
                <div className="mw-upcoming-lbl">{g.label}</div>
                <div className="mw-list">
                  {g.items.map(item => <MWRow key={item.id} item={item} />)}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// =========================================================
// WORK — full list with filters
// =========================================================

function MWWork({ data }) {
  const items = data.workItems || [];
  const [chip,     setChip]     = React.useState('all'); // all | in-progress | waiting | blocked | done | next
  const [project,  setProject]  = React.useState('all');
  const [stage,    setStage]    = React.useState('all');
  const [priority, setPriority] = React.useState('all');
  const [group,    setGroup]    = React.useState('due');

  const projects = Array.from(new Set(items.map(i => i.project).filter(Boolean)));
  const stages   = Array.from(new Set(items.map(i => i.links?.stage).filter(Boolean))).sort();

  const chips = [
    { k: 'all',         label: 'All',         n: items.length },
    { k: 'in-progress', label: 'In progress', n: items.filter(i => i.status === 'in-progress').length },
    { k: 'next',        label: 'Next',        n: items.filter(i => i.status === 'next').length },
    { k: 'waiting',     label: 'Waiting',     n: items.filter(i => i.status === 'waiting').length },
    { k: 'blocked',     label: 'Blocked',     n: items.filter(i => i.status === 'blocked').length },
    { k: 'done',        label: 'Done',        n: items.filter(i => i.status === 'done').length },
  ];

  const filtered = items.filter(item => {
    if (chip     !== 'all' && item.status !== chip)               return false;
    if (project  !== 'all' && item.project !== project)           return false;
    if (stage    !== 'all' && String(item.links?.stage) !== stage) return false;
    if (priority !== 'all' && item.priority !== priority)         return false;
    return true;
  });

  const clearAll = () => { setChip('all'); setProject('all'); setStage('all'); setPriority('all'); };
  const any = chip !== 'all' || project !== 'all' || stage !== 'all' || priority !== 'all';

  // Grouping
  const bucketOrder = ['overdue','today','tomorrow','this-week','next-week','later'];
  const bucketLabel = { overdue: 'Overdue', today: 'Today', tomorrow: 'Tomorrow', 'this-week': 'This week', 'next-week': 'Next week', later: 'Later' };

  let groups = [];
  if (group === 'due') {
    groups = bucketOrder
      .map(b => ({ key: b, label: bucketLabel[b], items: filtered.filter(i => i.dueBucket === b) }))
      .filter(g => g.items.length);
  } else if (group === 'project') {
    groups = projects
      .map(pid => {
        const p = window.MYGENI_PROJECT_DATA?.[pid];
        return { key: pid, label: p?.name || pid, items: filtered.filter(i => i.project === pid) };
      })
      .filter(g => g.items.length);
  } else if (group === 'stage') {
    groups = stages
      .map(sn => ({ key: sn, label: `Stage ${String(sn).padStart(2, '0')}`, items: filtered.filter(i => i.links?.stage === sn) }))
      .filter(g => g.items.length);
  } else if (group === 'status') {
    const order = ['in-progress', 'next', 'waiting', 'blocked', 'done'];
    groups = order
      .map(st => ({ key: st, label: MW_STATE[st].label, items: filtered.filter(i => i.status === st) }))
      .filter(g => g.items.length);
  }

  return (
    <div className="mw-work">
      {/* Filter bar */}
      <div className="dv-filters">
        <div className="dv-filter-chips">
          {chips.map(c => (
            <button key={c.k}
                    className={`dv-chip${chip === c.k ? ' active' : ''}`}
                    onClick={() => setChip(c.k)}>
              {c.label} <span className="dv-chip-n">{c.n}</span>
            </button>
          ))}
        </div>
        <div className="dv-filter-selects">
          <select value={project} onChange={(e) => setProject(e.target.value)} className="dv-select">
            <option value="all">All projects</option>
            {projects.map(pid => {
              const p = window.MYGENI_PROJECT_DATA?.[pid];
              return <option key={pid} value={pid}>{p?.code || pid}</option>;
            })}
          </select>
          <select value={stage} onChange={(e) => setStage(e.target.value)} className="dv-select">
            <option value="all">All stages</option>
            {stages.map(s => <option key={s} value={String(s)}>Stage {String(s).padStart(2,'0')}</option>)}
          </select>
          <select value={priority} onChange={(e) => setPriority(e.target.value)} className="dv-select">
            <option value="all">Any priority</option>
            <option value="high">High only</option>
            <option value="normal">Normal</option>
            <option value="low">Low</option>
          </select>
          {any && <button className="dv-clear" onClick={clearAll}>Clear</button>}
        </div>
        <div className="mw-group-by">
          <span className="mw-group-lbl">Group by</span>
          <select value={group} onChange={(e) => setGroup(e.target.value)} className="dv-select">
            <option value="due">Due date</option>
            <option value="project">Project</option>
            <option value="stage">Stage</option>
            <option value="status">Status</option>
          </select>
        </div>
      </div>

      <div className="dx-result-count">
        <span className="mono">{filtered.length}</span> of <span className="mono">{items.length}</span> work items
      </div>

      {filtered.length ? (
        <div className="mw-groups">
          {groups.map(g => (
            <div key={g.key} className="mw-group">
              <div className="mw-group-head">
                <span className="mw-group-h">{g.label}</span>
                <span className="mw-group-n mono">{g.items.length}</span>
              </div>
              <div className="mw-list">
                {g.items.map(item => <MWRow key={item.id} item={item} />)}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="dv-empty dv-empty-large">
          No work matches those filters. <button className="link" onClick={clearAll}>Clear all</button>.
        </div>
      )}
    </div>
  );
}

// =========================================================
// SCHEDULE
// =========================================================

function MWWeekStrip({ items }) {
  const daysOfWeek = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
  // Fixed reference — today is Sep 16 (Tuesday). Render 7-day strip.
  const today = { day: 2 }; // 2 = Tuesday
  // Count items per bucket for a subtle indicator dot.
  const perBucket = {
    'today': items.filter(i => i.dueBucket === 'today').length,
    'tomorrow': items.filter(i => i.dueBucket === 'tomorrow').length,
    'this-week': items.filter(i => i.dueBucket === 'this-week').length,
    'next-week': items.filter(i => i.dueBucket === 'next-week').length,
  };
  // Distribute across the 7 days for the week strip (approximation
  // — we don't have real per-day timestamps).
  const dayCounts = [
    0,                                    // Sun
    0,                                    // Mon
    perBucket.today,                      // Tue (today)
    perBucket.tomorrow,                   // Wed
    Math.ceil(perBucket['this-week'] / 2),// Thu
    Math.floor(perBucket['this-week'] / 2),// Fri
    0,                                    // Sat
  ];
  const dates = [14, 15, 16, 17, 18, 19, 20];

  return (
    <div className="mw-week">
      {daysOfWeek.map((d, i) => {
        const isToday = i === today.day;
        const count = dayCounts[i];
        return (
          <div key={i} className={`mw-week-cell${isToday ? ' is-today' : ''}`}>
            <div className="mw-week-d">{d[0]}</div>
            <div className="mw-week-n mono">{dates[i]}</div>
            {count > 0 && <span className="mw-week-dot" />}
          </div>
        );
      })}
    </div>
  );
}

function MWSchedule({ data }) {
  const items = (data.workItems || []).filter(i => i.status !== 'done');

  const buckets = [
    { key: 'today',     label: 'Today',     when: 'Sep 16' },
    { key: 'tomorrow',  label: 'Tomorrow',  when: 'Sep 17' },
    { key: 'this-week', label: 'This week', when: 'Sep 18 – 20' },
    { key: 'next-week', label: 'Next week', when: 'Sep 22 – 26' },
  ];

  const groups = buckets
    .map(b => ({ ...b, items: items.filter(i => i.dueBucket === b.key) }))
    .filter(g => g.items.length);

  return (
    <div className="mw-schedule">
      <MWWeekStrip items={items} />

      {groups.length ? (
        <div className="mw-schedule-groups">
          {groups.map(g => (
            <div key={g.key} className="mw-sched-group">
              <div className="mw-sched-head">
                <div>
                  <div className="mw-sched-lbl">{g.label}</div>
                  <div className="mw-sched-when">{g.when}</div>
                </div>
                <span className="mw-sched-n mono">{g.items.length}</span>
              </div>
              <div className="mw-list">
                {g.items.map(item => <MWRow key={item.id} item={item} />)}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="mw-quiet">
          <Icon name="check" size={14} strokeWidth={1.75} />
          <span>No scheduled work in the current window.</span>
        </div>
      )}
    </div>
  );
}

// =========================================================
// WORK ITEM DETAIL
// =========================================================

function MWItemDetail({ data, itemId }) {
  const item = (data.workItems || []).find(i => i.id === itemId);
  if (!item) {
    return (
      <div className="mw-detail">
        <a href="#/my-work/work" className="dv-back">
          <Icon name="chevronL" size={12} strokeWidth={2} /> <span>Back to Work</span>
        </a>
        <div className="dv-empty dv-empty-large" style={{ marginTop: 20 }}>Work item not found.</div>
      </div>
    );
  }
  const project = mwProjectFor(item);
  const stage   = project?.stages?.find(s => s.n === item.links?.stage);
  const mission = item.links?.mission ? window.MYGENI_MISSIONS[item.links.mission] : null;
  const feature = project?.features?.find(f => f.id === item.links?.feature);

  // Local UI state for the checklist (persists on the in-memory item).
  const [dod, setDod] = React.useState(item.definitionOfDone || []);
  const doneCount = dod.filter(c => c.done).length;
  const toggleDod = (i) => {
    const next = dod.map((c, k) => k === i ? { ...c, done: !c.done } : c);
    setDod(next);
  };

  const attachments = (item.attachments || [])
    .map(id => project?.documents?.find(d => d.id === id))
    .filter(Boolean);

  const dependsOn = (item.dependsOn || []).map(id => (data.workItems || []).find(w => w.id === id)).filter(Boolean);
  const blocks    = (item.blocks    || []).map(id => (data.workItems || []).find(w => w.id === id)).filter(Boolean);

  return (
    <div className="mw-detail">
      <a href="#/my-work/work" className="dv-back">
        <Icon name="chevronL" size={12} strokeWidth={2} /> <span>Back to Work</span>
      </a>

      {/* --- Compact header --------------------------------------- */}
      <div className="mw-detail-head">
        <div className="mw-detail-head-l">
          <div className="dv-eyebrow">
            <Icon name="work" size={12} strokeWidth={1.75} />
            <span>Work item</span>
            <span className="dot-sep">·</span>
            <span className="mono">{item.id.toUpperCase()}</span>
          </div>
          <h1 className="mw-detail-title">{item.title}</h1>
          {item.description && <p className="mw-detail-desc">{item.description}</p>}
          <div className="mw-detail-meta">
            {mwStateChip(item.status)}
            {mwPriorityChip(item.priority)}
            {mwDueChip(item)}
            {project && (
              <a href={`#/projects/${project.id}/plan`} className="mw-detail-meta-item link">
                <MWProjectGlyph project={project} />
                <span>{project.name}</span>
              </a>
            )}
            {stage && (
              <a href={`#/projects/${project.id}/plan`} className="mw-detail-meta-item link">
                <Icon name="stages" size={12} strokeWidth={1.75} />
                <span>Stage {String(stage.n).padStart(2,'0')} · {stage.name}</span>
              </a>
            )}
            {mission && (
              <a href={`#/projects/${project.id}/plan`} className="mw-detail-meta-item link">
                <Icon name={mission.icon} size={12} strokeWidth={1.75} />
                <span>{mission.label}</span>
              </a>
            )}
            {feature && (
              <a href={`#/projects/${project.id}/features/${feature.id}`} className="mw-detail-meta-item link">
                <Icon name="features" size={12} strokeWidth={1.75} />
                <span>{feature.title}</span>
              </a>
            )}
          </div>
        </div>
        <div className="mw-detail-head-r">
          <div className="mw-assignee-block">
            <div className="dv-eyebrow">Assignee</div>
            <div className="mw-assignee-row">
              <Avatar name={item.assignee} size="sm" portrait={mwPortraitGlobal(item.assignee, data)} />
              <span>{item.assignee}</span>
            </div>
          </div>
          <button className="btn btn-primary btn-sm">
            <Icon name="check" size={14} strokeWidth={2} />
            <span>Mark done</span>
          </button>
        </div>
      </div>

      {/* --- Body split ------------------------------------------- */}
      <div className="mw-detail-grid">

        {/* Left */}
        <div className="mw-detail-main">
          {/* Outcome */}
          {item.outcome && (
            <div className="mw-card">
              <div className="mw-card-head">
                <h3>Outcome</h3>
              </div>
              <p className="mw-outcome">{item.outcome}</p>
            </div>
          )}

          {/* Definition of done */}
          {dod.length > 0 && (
            <div className="mw-card">
              <div className="mw-card-head">
                <h3>Definition of done</h3>
                <span className="mw-count mono">{doneCount}/{dod.length}</span>
              </div>
              <div className="mw-dod">
                {dod.map((c, i) => (
                  <button key={i}
                          type="button"
                          className={`mw-dod-row${c.done ? ' is-done' : ''}`}
                          onClick={() => toggleDod(i)}
                          aria-pressed={c.done}>
                    <span className={`mw-dod-check${c.done ? ' is-done' : ''}`}>
                      {c.done && <Icon name="check" size={11} strokeWidth={2.5} />}
                    </span>
                    <span className="mw-dod-title">{c.title}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Dependencies */}
          {(item.waitingOn || item.blocker || dependsOn.length > 0 || blocks.length > 0) && (
            <div className="mw-card">
              <div className="mw-card-head">
                <h3>Dependencies</h3>
              </div>
              <div className="mw-deps">
                {item.waitingOn && (
                  <div className="mw-dep mw-dep-waiting">
                    <div className="mw-dep-lbl">Waiting on</div>
                    <div className="mw-dep-body">
                      <Avatar name={item.waitingOn.name} size="xs" portrait={mwPortraitGlobal(item.waitingOn.name, data)} />
                      <span className="mw-dep-name">{item.waitingOn.name}</span>
                      <span className="dot-sep">·</span>
                      <span className="mw-dep-note">{item.waitingOn.note}</span>
                    </div>
                    {item.waitingOn.blocks && (
                      <div className="mw-dep-blocks">
                        <span className="mw-dep-blocks-lbl">Blocks</span>
                        <span>{item.waitingOn.blocks}</span>
                      </div>
                    )}
                  </div>
                )}
                {item.blocker && (
                  <div className="mw-dep mw-dep-blocked">
                    <div className="mw-dep-lbl">Blocker</div>
                    <div className="mw-dep-body">
                      <span className="mw-dep-note">{item.blocker.note}</span>
                    </div>
                    {item.blocker.ownedBy && (
                      <div className="mw-dep-blocks">
                        <span className="mw-dep-blocks-lbl">Owned by</span>
                        <span>{item.blocker.ownedBy}</span>
                      </div>
                    )}
                  </div>
                )}
                {dependsOn.length > 0 && (
                  <div className="mw-dep">
                    <div className="mw-dep-lbl">Depends on</div>
                    <div className="mw-dep-work-list">
                      {dependsOn.map(w => (
                        <a key={w.id} href={`#/my-work/item/${w.id}`} className="mw-dep-work">
                          <span className={`mw-check mw-check-${w.status}`}>{w.status === 'done' && <Icon name="check" size={10} strokeWidth={2.5}/>}</span>
                          <span className="truncate">{w.title}</span>
                          {mwStateChip(w.status)}
                        </a>
                      ))}
                    </div>
                  </div>
                )}
                {blocks.length > 0 && (
                  <div className="mw-dep">
                    <div className="mw-dep-lbl">Blocks</div>
                    <div className="mw-dep-work-list">
                      {blocks.map(w => (
                        <a key={w.id} href={`#/my-work/item/${w.id}`} className="mw-dep-work">
                          <span className={`mw-check mw-check-${w.status}`}>{w.status === 'done' && <Icon name="check" size={10} strokeWidth={2.5}/>}</span>
                          <span className="truncate">{w.title}</span>
                          {mwStateChip(w.status)}
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Activity */}
          {(item.activity || []).length > 0 && (
            <div className="mw-card">
              <div className="mw-card-head">
                <h3>Activity</h3>
              </div>
              <div className="mw-activity">
                {item.activity.map((a, i) => (
                  <div key={i} className="mw-activity-row">
                    <Avatar name={a.by} size="xs" portrait={mwPortraitGlobal(a.by, data)} />
                    <div className="mw-activity-body">
                      <div className="mw-activity-line"><b>{a.by}</b> <span>{a.verb}</span></div>
                      <div className="mw-activity-when">{a.when}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Right rail */}
        <div className="mw-detail-rail">
          {/* Canonical Related */}
          <div className="mw-rail-card">
            <div className="mw-card-head"><h4>Related</h4></div>
            <MWCanonicalChips links={item.links} project={project} />
          </div>

          {/* Attachments — canonical Documents */}
          {attachments.length > 0 && (
            <div className="mw-rail-card">
              <div className="mw-card-head">
                <h4>Attachments</h4>
                <a className="link" href={`#/projects/${project.id}/documents`}>All documents →</a>
              </div>
              <div className="mw-attach-list">
                {attachments.map(d => (
                  <a key={d.id} href={`#/projects/${project.id}/documents/doc/${d.id}`} className="mw-attach-row">
                    <div className="mw-attach-thumb">
                      {window.DXPreview
                        ? <DXPreview doc={d} />
                        : <div style={{ background: 'var(--bg-app)', width: '100%', height: '100%' }} />}
                    </div>
                    <div className="mw-attach-body">
                      <div className="mw-attach-title truncate">{d.title}</div>
                      <div className="mw-attach-sub">
                        {d.kind}
                        <span className="dot-sep">·</span>
                        {d.size}
                      </div>
                    </div>
                  </a>
                ))}
              </div>
            </div>
          )}

          {/* At a glance */}
          <div className="mw-rail-card">
            <div className="mw-card-head"><h4>At a glance</h4></div>
            <div className="mw-glance">
              <div className="mw-glance-row"><span>Assignee</span><b>{item.assignee}</b></div>
              <div className="mw-glance-row"><span>Status</span>{mwStateChip(item.status)}</div>
              <div className="mw-glance-row"><span>Priority</span><b>{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</b></div>
              <div className="mw-glance-row"><span>Due</span><b>{item.due}</b></div>
              <div className="mw-glance-row"><span>Created</span><b>{item.createdAt}</b></div>
              <div className="mw-glance-row"><span>Updated</span><b>{item.updatedAt}</b></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// ROUTER SHELL
// -----------------------------------------------------------------
// Sub-route shape:
//   /my-work                → Focus
//   /my-work/work           → Work list
//   /my-work/schedule       → Schedule
//   /my-work/item/:id       → Work Item Detail
// =========================================================

function MyWorkV2({ data, subId, sub2 }) {
  const isDetail = subId === 'item';
  const view = isDetail
    ? 'item'
    : (subId === 'work' ? 'work' : (subId === 'schedule' ? 'schedule' : 'focus'));

  const setView = (v) => {
    location.hash = v === 'focus' ? '#/my-work' : `#/my-work/${v}`;
  };

  return (
    <main className="main mw-root" data-screen-label={`My Work · ${view}`}>
      {/* Segmented control — hidden on detail so the item is the focus */}
      {!isDetail && (
        <div className="mw-head">
          <div>
            <h1 className="mw-h1">My Work</h1>
            <p className="mw-h1-sub">Your focus across every project — canonical work, connected to Stage, Mission, Feature.</p>
          </div>
          <div className="mw-head-right">
            <div className="dv-seg" role="tablist" aria-label="My Work views">
              {[
                { k: 'focus',    label: 'Focus'    },
                { k: 'work',     label: 'Work'     },
                { k: 'schedule', label: 'Schedule' },
              ].map(t => (
                <button key={t.k}
                        role="tab"
                        aria-selected={view === t.k}
                        className={`dv-seg-btn${view === t.k ? ' active' : ''}`}
                        onClick={() => setView(t.k)}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {view === 'focus'    && <MWFocus       data={data} user={data.user} />}
      {view === 'work'     && <MWWork        data={data} />}
      {view === 'schedule' && <MWSchedule    data={data} />}
      {view === 'item'     && <MWItemDetail  data={data} itemId={sub2} />}
    </main>
  );
}

Object.assign(window, {
  MyWorkV2,
  MWRow, MWWeekStrip,
});