// Tenney North Park — Project DP (TN-10) component.
// Standalone data product opened by the Project tile (no dashboard card).
// Same DPA anatomy as every other product: Artifact / Data / Control / Context.
// Artifact = interactive tracker (Tasks · Timeline · Calendar lenses on one
// task table). Content lives in tabs/tenney_project_content.js (window.TN_PROJECT).

function TenneyProject() {
  const P = window.TN_PROJECT;
  const [face, setFace] = React.useState('artifact');   // artifact | data | control | context
  const [lens, setLens] = React.useState('tasks');      // tasks | timeline | calendar
  const [q, setQ] = React.useState('');
  const [wsF, setWsF] = React.useState('');
  const [stF, setStF] = React.useState('');
  const [detail, setDetail] = React.useState(null);     // task id | 'new' | null
  const [collapsed, setCollapsed] = React.useState({});
  const [selDay, setSelDay] = React.useState(null);
  const [tasks, setTasks] = React.useState(P.tasks);

  // Framework CSS (sheet renderer etc.) — same injection as the dashboard.
  React.useEffect(() => {
    if (!document.getElementById('cx-dash-style') && window.CX_DASH) {
      const st = document.createElement('style');
      st.id = 'cx-dash-style';
      st.textContent = window.CX_DASH.css;
      document.head.appendChild(st);
    }
  }, []);

  const today = new Date(P.today + 'T00:00:00');
  const parseD = (d) => new Date(d + 'T00:00:00');
  const fmtD = (d) => parseD(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
  const overdue = (t) => t.status !== 'Complete' && parseD(t.due) < today;

  const visible = tasks.filter((t) =>
    (!q || t.name.toLowerCase().includes(q.toLowerCase()) || (P.people[t.owner] || '').toLowerCase().includes(q.toLowerCase())) &&
    (!wsF || t.ws === wsF) &&
    (!stF || t.status === stF));

  const detailTask = typeof detail === 'number' ? tasks.find((t) => t.id === detail) : null;

  return (
    <div className="cx-root tn-cx pj-root" data-screen-label="Tenney Project">

      <div className="pj-head">
        <div className="view-toggle pj-toggle" style={{ marginLeft: 'auto' }}>
          {[['artifact', 'Artifact'], ['data', 'Data'], ['control', 'Control'], ['context', 'Context']].map(([k, l]) =>
            <button key={k} className={face === k ? 'active' : ''} onClick={() => setFace(k)}>{l}</button>
          )}
        </div>
      </div>

      {face === 'artifact' && (
        <PjArtifact
          P={P} tasks={tasks} visible={visible} lens={lens} setLens={setLens}
          q={q} setQ={setQ} wsF={wsF} setWsF={setWsF} stF={stF} setStF={setStF}
          collapsed={collapsed} setCollapsed={setCollapsed}
          selDay={selDay} setSelDay={setSelDay}
          today={today} parseD={parseD} fmtD={fmtD} overdue={overdue}
          openDetail={setDetail} />
      )}
      {face === 'data' && <PjData P={P} tasks={tasks} fmtD={fmtD} />}
      {face === 'control' && <PjControl P={P} />}
      {face === 'context' && <PjContext P={P} />}

      {(detailTask || detail === 'new') && (
        <PjDetail
          P={P} task={detailTask} tasks={tasks} fmtD={fmtD} overdue={overdue}
          onClose={() => setDetail(null)}
          onAdd={(t) => { setTasks((xs) => [...xs, t]); setDetail(null); }} />
      )}
    </div>);
}

/* ── metrics + lens tabs + filters + the three lenses ── */
function PjArtifact(props) {
  const { P, tasks, visible, lens, setLens, q, setQ, wsF, setWsF, stF, setStF, openDetail } = props;
  const pct = Math.round(tasks.reduce((s, t) => s + t.pct, 0) / (tasks.length || 1));
  const inProg = tasks.filter((t) => t.status === 'In Progress').length;
  const blocked = tasks.filter((t) => t.status === 'Blocked').length;
  const nextMs = tasks.filter((t) => t.milestone && t.status !== 'Complete')
    .sort((a, b) => props.parseD(a.due) - props.parseD(b.due))[0];

  return (
    <React.Fragment>
      <div className="drawer-stat-row pj-stats">
        <div className="drawer-stat-cell"><div className="dsc-label">Tasks</div><div className="dsc-val">{tasks.length}</div><div className="dsc-sub">4 workstreams</div></div>
        <div className="drawer-stat-cell"><div className="dsc-label">In Progress</div><div className="dsc-val">{inProg}</div><div className="dsc-sub">active now</div></div>
        <div className="drawer-stat-cell"><div className="dsc-label">Blocked</div><div className={`dsc-val ${blocked ? 'bad' : ''}`}>{blocked}</div><div className="dsc-sub">needs attention</div></div>
        <div className="drawer-stat-cell"><div className="dsc-label">Complete</div><div className="dsc-val good">{pct}%</div><div className="dsc-sub">weighted</div></div>
        <div className="drawer-stat-cell"><div className="dsc-label">Next Milestone</div><div className="dsc-val">{nextMs ? props.fmtD(nextMs.due) : '—'}</div><div className="dsc-sub">{nextMs ? nextMs.name : ''}</div></div>
      </div>

      <div className="pj-bar">
        <div className="pj-lenses">
          {[['tasks', 'Tasks'], ['timeline', 'Timeline'], ['calendar', 'Calendar']].map(([k, l]) =>
            <button key={k} className={`pj-lens ${lens === k ? 'is-active' : ''}`} onClick={() => setLens(k)}>{l}</button>
          )}
        </div>
        <div className="pj-filters">
          <input className="pj-search" type="text" placeholder="Search tasks…" value={q} onChange={(e) => setQ(e.target.value)} />
          <select className="pj-select" value={wsF} onChange={(e) => setWsF(e.target.value)}>
            <option value="">All workstreams</option>
            {P.workstreams.map((w) => <option key={w} value={w}>{w}</option>)}
          </select>
          <select className="pj-select" value={stF} onChange={(e) => setStF(e.target.value)}>
            <option value="">All statuses</option>
            {['Not Started', 'In Progress', 'Blocked', 'Complete'].map((s) => <option key={s} value={s}>{s}</option>)}
          </select>
          <button className="pj-newbtn" onClick={() => openDetail('new')}>New task</button>
        </div>
      </div>

      {visible.length === 0
        ? <div className="pj-empty">No matching tasks — adjust your search or filters.</div>
        : lens === 'tasks' ? <PjTasks {...props} />
        : lens === 'timeline' ? <PjTimeline {...props} />
        : <PjCalendar {...props} />}
    </React.Fragment>);
}

function PjStatusIcon({ s }) {
  const common = { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (s === 'Complete') return <svg {...common} className="pj-st pj-st--done"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>;
  if (s === 'In Progress') return <svg {...common} className="pj-st"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="1.5" /></svg>;
  if (s === 'Blocked') return <svg {...common} className="pj-st pj-st--blocked"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>;
  return <svg {...common} className="pj-st pj-st--idle" strokeDasharray="3 3"><circle cx="12" cy="12" r="10" /></svg>;
}

function PjPriority({ p }) {
  const on = '#615D5A', off = '#E7E1DF';
  const fills = p === 'High' ? [on, on, on] : p === 'Medium' ? [on, on, off] : [on, off, off];
  return (
    <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-label={`${p} priority`}>
      <rect x="1" y="9" width="3" height="6" rx="1" fill={fills[0]} />
      <rect x="6" y="5" width="3" height="10" rx="1" fill={fills[1]} />
      <rect x="11" y="1" width="3" height="14" rx="1" fill={fills[2]} />
    </svg>);
}

function PjRow({ t, P, fmtD, overdue, openDetail }) {
  return (
    <div className="pj-row" onClick={() => openDetail(t.id)}>
      <PjStatusIcon s={t.status} />
      <span className="pj-row__name">
        {t.name}
        {t.milestone && <span className="pj-ms-diamond" title="Milestone"></span>}
      </span>
      <PjPriority p={t.priority} />
      <span className={`pj-row__due ${overdue(t) ? 'is-overdue' : ''}`}>{fmtD(t.due)}</span>
      <span className="pj-progress"><span className="pj-progress__fill" style={{ width: t.pct + '%' }}></span></span>
      <span className="pj-row__pct">{t.pct}%</span>
      <span className="tn-av" title={P.people[t.owner]}>{t.owner}</span>
    </div>);
}

function PjTasks(props) {
  const { P, visible, collapsed, setCollapsed } = props;
  return (
    <div className="pj-list">
      {P.workstreams.map((ws) => {
        const group = visible.filter((t) => t.ws === ws);
        if (!group.length) return null;
        const done = group.filter((t) => t.status === 'Complete').length;
        const isC = collapsed[ws];
        return (
          <div key={ws}>
            <div className="pj-group" onClick={() => setCollapsed((c) => ({ ...c, [ws]: !c[ws] }))}>
              <svg className={`pj-chev ${isC ? 'is-collapsed' : ''}`} width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg>
              <span className="drawer-section-label pj-group__label">{ws}</span>
              <span className="pj-group__count">{done}/{group.length} complete</span>
            </div>
            {!isC && group.map((t) => <PjRow key={t.id} t={t} {...props} />)}
          </div>);
      })}
    </div>);
}

function PjTimeline(props) {
  const { P, visible, today, parseD, fmtD, openDetail } = props;
  const ms = visible.filter((t) => t.milestone).sort((a, b) => parseD(a.due) - parseD(b.due));
  const min = new Date(Math.min(...visible.map((t) => parseD(t.start))));
  const max = new Date(Math.max(...visible.map((t) => parseD(t.due))));
  const start = new Date(min); start.setDate(start.getDate() - 4);
  const end = new Date(max); end.setDate(end.getDate() + 5);
  const pos = (d) => ((d - start) / (end - start)) * 100;
  const months = [];
  const m = new Date(start.getFullYear(), start.getMonth() + 1, 1);
  while (m <= end) { months.push({ pct: pos(new Date(m)), label: m.toLocaleDateString('en-US', { month: 'short' }) }); m.setMonth(m.getMonth() + 1); }

  return (
    <React.Fragment>
      <div className="drawer-section-label pj-seclabel">Milestones</div>
      <div className="pj-msstrip">
        {ms.map((t) =>
          <div key={t.id} className="pj-mscard" onClick={() => openDetail(t.id)}>
            <div className="pj-mscard__top">
              <span className={`pj-ms-diamond ${t.status === 'Complete' ? '' : 'is-open'}`}></span>
              <span className="pj-mscard__date">{fmtD(t.due)}</span>
            </div>
            <div className="pj-mscard__name">{t.name}</div>
            <div className="pj-mscard__sub">{t.ws} · {t.status}</div>
          </div>)}
      </div>

      <div className="drawer-section-label pj-seclabel">Timeline</div>
      <div className="pj-gantt">
        <div className="pj-gantt__hdr">
          <div className="pj-gantt__labelcol"></div>
          <div className="pj-gantt__track">
            {months.map((mk, i) => <span key={i} className="pj-gantt__month" style={{ left: mk.pct + '%' }}>{mk.label}</span>)}
          </div>
        </div>
        {P.workstreams.map((ws) => {
          const group = visible.filter((t) => t.ws === ws);
          if (!group.length) return null;
          return (
            <React.Fragment key={ws}>
              <div className="pj-gantt__wsrow">
                <div className="pj-gantt__labelcol"><span className="drawer-section-label pj-group__label">{ws}</span></div>
                <div className="pj-gantt__track">
                  {months.map((mk, i) => <span key={i} className="pj-gantt__mline" style={{ left: mk.pct + '%' }}></span>)}
                  <span className="pj-gantt__today" style={{ left: pos(today) + '%' }}></span>
                </div>
              </div>
              {group.map((t) => {
                const s = Math.max(pos(parseD(t.start)), 0);
                const e = Math.min(pos(parseD(t.due)), 100);
                const w = Math.max(e - s, 0.8);
                const isPoint = t.start === t.due;
                return (
                  <div key={t.id} className="pj-gantt__row">
                    <div className="pj-gantt__labelcol"><span className="pj-gantt__task">{t.name}</span></div>
                    <div className="pj-gantt__track">
                      {months.map((mk, i) => <span key={i} className="pj-gantt__mline" style={{ left: mk.pct + '%' }}></span>)}
                      <span className="pj-gantt__today" style={{ left: pos(today) + '%' }}></span>
                      {!isPoint && (
                        <span className="pj-gantt__bar" style={{ left: s + '%', width: w + '%' }}
                          title={`${t.name}: ${fmtD(t.start)} – ${fmtD(t.due)} (${t.pct}%)`}
                          onClick={() => openDetail(t.id)}>
                          <span className="pj-gantt__fill" style={{ width: t.pct + '%' }}></span>
                        </span>)}
                      {t.milestone && <span className="pj-gantt__msdot" style={{ left: e + '%' }} title={`Milestone: ${t.name}`} onClick={() => openDetail(t.id)}></span>}
                    </div>
                  </div>);
              })}
            </React.Fragment>);
        })}
      </div>
      <div className="pj-legend">
        <span><span className="pj-legend__bar"><span></span></span>Progress</span>
        <span><span className="pj-legend__planned"></span>Planned</span>
        <span><span className="pj-ms-diamond"></span>Milestone</span>
        <span><span className="pj-legend__today"></span>Today</span>
      </div>
    </React.Fragment>);
}

function PjCalendar(props) {
  const { visible, today, parseD, fmtD, selDay, setSelDay, openDetail } = props;
  const [calStart, setCalStart] = React.useState(() => new Date(2026, 0, 1));
  const dayKey = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  const byDay = {};
  visible.forEach((t) => { (byDay[t.due] = byDay[t.due] || []).push(t); });
  const months = [0, 1, 2].map((i) => new Date(calStart.getFullYear(), calStart.getMonth() + i, 1));
  let list = visible.slice().sort((a, b) => parseD(a.due) - parseD(b.due));
  if (selDay) list = list.filter((t) => t.due === selDay);

  return (
    <React.Fragment>
      <div className="pj-calhdr">
        <span className="drawer-section-label pj-seclabel" style={{ margin: 0 }}>
          {months[0].toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} – {months[2].toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
        </span>
        <div className="pj-calnav">
          <button onClick={() => setCalStart((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1))} aria-label="Previous month">‹</button>
          <button onClick={() => setCalStart((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1))} aria-label="Next month">›</button>
        </div>
      </div>
      <div className="pj-calgrid3">
        {months.map((mo) => {
          const year = mo.getFullYear(), month = mo.getMonth();
          const firstDow = new Date(year, month, 1).getDay();
          const days = new Date(year, month + 1, 0).getDate();
          const cells = [];
          for (let i = 0; i < firstDow; i++) cells.push(<span key={'e' + i} className="pj-calday is-empty"></span>);
          for (let d = 1; d <= days; d++) {
            const date = new Date(year, month, d);
            const key = dayKey(date);
            const items = byDay[key] || [];
            const hasMs = items.some((t) => t.milestone);
            const dots = Math.min(items.filter((t) => !t.milestone).length, 3);
            cells.push(
              <span key={d}
                className={`pj-calday ${items.length ? 'has-items' : ''} ${key === dayKey(today) ? 'is-today' : ''} ${selDay === key ? 'is-selected' : ''}`}
                onClick={items.length ? () => setSelDay(selDay === key ? null : key) : undefined}>
                <span className="pj-calday__num">{d}</span>
                <span className="pj-calday__marks">
                  {hasMs && <span className="pj-ms-diamond"></span>}
                  {Array.from({ length: dots }).map((_, i) => <span key={i} className="pj-caldot"></span>)}
                </span>
              </span>);
          }
          return (
            <div key={month} className="pj-calmonth">
              <div className="pj-calmonth__name">{mo.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}</div>
              <div className="pj-calweek">{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <span key={i}>{d}</span>)}</div>
              <div className="pj-caldays">{cells}</div>
            </div>);
        })}
      </div>
      {selDay && (
        <button className="pj-chip" onClick={() => setSelDay(null)}>
          Due {parseD(selDay).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })} ✕
        </button>)}
      <div className="pj-list">
        {list.length === 0
          ? <div className="pj-empty">Nothing due on this day.</div>
          : list.map((t) => <PjRow key={t.id} t={t} {...props} />)}
      </div>
    </React.Fragment>);
}

window.TenneyProject = TenneyProject;
// Shared with tenney_project_faces.jsx (separate Babel scope):
Object.assign(window, { PjStatusIcon, PjPriority });