// Tenney Project DP — Data / Control / Context faces + detail panel.
// Split from tenney_project.jsx to keep files small. Loaded AFTER it.

/* ── Data face: the plan as an XLSX sheet (framework sheet styles) ── */
function PjData({ P, tasks, fmtD }) {
  const cols = ['ID', 'Task', 'Workstream', 'Owner', 'Status', 'Priority', 'Start', 'Due', '% Complete', 'Milestone', 'Depends On', 'Notes'];
  return (
    <div className="data-view active pj-data">
      <div className="data-meta-bar">
        <div className="dm-left">
          <span className="tn-filepill"><img src="assets/excel-icon.png" alt="Excel" className="tn-filepill__ico" />{P.file}</span>
          <span className="tn-srcico"><img src="assets/dropbox-icon.png" alt="Dropbox" title="Dropbox" /></span>
          <span>· Synced {P.synced}</span>
        </div>
        <div className="dm-right">
          <span className="dm-link" style={{ color: 'var(--muted-foreground)', fontWeight: 300 }}>Writes back on edit</span>
        </div>
      </div>
      <div className="sheet-wrap pj-sheetwrap">
        <table className="sheet">
          <thead>
            <tr>
              <th className="row-num"></th>
              {cols.map((c, i) => <th key={i}>{c}</th>)}
            </tr>
          </thead>
          <tbody>
            {tasks.map((t, i) =>
              <tr key={t.id}>
                <td className="row-num">{i + 1}</td>
                <td className="num">{t.id}</td>
                <td>{t.name}</td>
                <td>{t.ws}</td>
                <td>{P.people[t.owner]}</td>
                <td className={t.status === 'Blocked' ? 'tn-vacant' : ''}>{t.status}</td>
                <td>{t.priority}</td>
                <td>{fmtD(t.start)}</td>
                <td>{fmtD(t.due)}</td>
                <td className="num">{t.pct}%</td>
                <td>{t.milestone ? 'Y' : 'N'}</td>
                <td>{t.deps.join(', ')}</td>
                <td>{t.notes}</td>
              </tr>)}
          </tbody>
        </table>
      </div>
    </div>);
}

/* ── Control face: the DP's agent + workflows (hub Control vocabulary) ── */
function PjControl({ P }) {
  const stats = [
    ['Sources', '2', 'feed this product', ''],
    ['In Knowledge Base', '2', 'available to Claude', 'good'],
    ['Awaiting review', '1', 'updated source', 'warn'],
    ['Agent', 'On', 'wakes on sync', 'good'],
    ['Last built', '3 h ago', 'on plan edit', ''],
    ['Governance', 'Verified', 'read-write · Dropbox', 'good'],
  ];
  const wfs = [
    ['Overdue sweep', 'Flags tasks past due and notifies owners each morning', 'Daily · 07:30', 'clock', '5 h ago', '07:30', true],
    ['Milestone drift alert', 'Runs when a milestone\u2019s projected date slips', 'On date change', 'event', '3 d ago', 'On change', true],
    ['Plan write-back', 'Writes task edits back to the Dropbox plan file', 'On edit', 'change', '3 h ago', 'On edit', true],
    ['Blocked-task escalation', 'Escalates tasks blocked more than 5 days to the deal lead', 'Daily · 08:00', 'clock', '5 h ago', '08:00', true],
  ];
  const trigIcon = (kind) => kind === 'event'
    ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
    : kind === 'change'
      ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" /></svg>
      : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><polyline points="12 7 12 12 15 14" /></svg>;

  return (
    <div className="hubx pj-hubx">
      <div className="drawer-stat-row">
        {stats.map(([l, v, s, cls], i) =>
          <div className="drawer-stat-cell" key={i}>
            <div className="dsc-label">{l}</div>
            <div className={`dsc-val ${cls}`}>{v}</div>
            <div className="dsc-sub">{s}</div>
          </div>)}
      </div>

      <div className="cc-block">
        <div className="drawer-section-label">Data Product Agent</div>
        <p className="pj-agentdesc">
          This agent keeps the plan honest: it writes edits back to the plan file, sweeps for overdue and blocked work, and rebuilds the tracker when the file changes outside Proxa.
        </p>
        <div className="cc-tablewrap">
          <table className="cc-table cc-agents-table">
            <thead><tr><th></th><th>Artifact</th><th className="c">Source updates</th><th>Last update</th><th className="r"></th></tr></thead>
            <tbody>
              <tr className="cc-arow">
                <td className="cc-ic-cell"><span className="cc-row-ic"><svg viewBox="0 0 28 28" fill="none"><path d="M5.83416 17.5001H12.8342M1.14844 21L5.82285 7H26.85L22.1755 21H1.14844Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"></path></svg></span></td>
                <td><div className="cc-art-name">Disposition Plan</div><div className="cc-art-sub">plan file · DD workflow · Lease-Up gate</div></td>
                <td className="c"><span className="cc-upd-count">1</span></td>
                <td className="cc-mono cc-lastupd">3 h ago</td>
                <td className="r"><button className="cc-review-btn sm" onClick={() => { if (window.openSourceUpdates) window.openSourceUpdates('tn_project'); }}>Review updates</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div className="cc-block">
        <div className="drawer-section-label">Workflows</div>
        <p className="pj-agentdesc">Recurring jobs this data product owns. Run one immediately without waiting for its schedule.</p>
        <div className="cc-tablewrap">
          <table className="cc-table">
            <thead><tr><th>Workflow</th><th>Trigger</th><th>Last run</th><th>Next run</th><th className="c">Status</th><th className="r"></th></tr></thead>
            <tbody>
              {wfs.map(([name, desc, trig, kind, last, next, on], i) =>
                <tr key={i}>
                  <td>
                    <div className="cc-wf-name">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v5h5" /><path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" /><polyline points="12 7 12 12 15 14" /></svg>
                      {name}
                    </div>
                    <div className="cc-wf-desc">{desc}</div>
                  </td>
                  <td><span className={`cc-trigger ${kind !== 'clock' ? 'event' : ''}`}>{trigIcon(kind)}<span className="cc-trigger-txt">{trig}</span></span></td>
                  <td className="cc-mono cc-lastrun">{last}</td>
                  <td className="cc-mono">{next}</td>
                  <td className="c"><span className={`cc-tag ${on ? 'on' : 'paused'}`}><span className="cc-dot"></span>{on ? 'On' : 'Paused'}</span></td>
                  <td className="r">
                    <div className="cc-row-actions">
                      <button className="cc-runbtn ghost" onClick={() => { if (window.ccShowRuns) window.ccShowRuns(name); }}>Runs</button>
                      <button className="cc-runbtn" onClick={(e) => { if (window.ccRunWorkflow) window.ccRunWorkflow(e.currentTarget, name); }}>
                        <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 4 20 12 6 20 6 4" /></svg>Run now
                      </button>
                    </div>
                  </td>
                </tr>)}
            </tbody>
          </table>
        </div>
      </div>
    </div>);
}

/* ── Context face: the DP's skill ── */
function PjContext({ P }) {
  const S = ({ title, html }) => (
    <React.Fragment>
      <div className="drawer-section-label">{title}</div>
      <div className="drawer-summary"><p dangerouslySetInnerHTML={{ __html: html }}></p></div>
    </React.Fragment>);
  return (
    <div className="pj-context">
      <div className="drawer-summary">
        <p>This artifact is self-describing — its context is its skill: what it is, what feeds it, the rules its content must follow, and how it stays fresh.</p>
      </div>
      <S title="What This Is" html={P.context.what} />
      <S title="Sources" html={P.context.sources} />
      <S title="Content Rules" html={P.context.rules} />
      <S title="Refresh & Ownership" html={P.context.refresh} />
    </div>);
}

/* ── Detail panel (task view / new task form) ── */
function PjDetail({ P, task, tasks, fmtD, overdue, onClose, onAdd }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  const [form, setForm] = React.useState({ name: '', desc: '', ws: P.workstreams[0], owner: 'SO', priority: 'Medium', start: '2026-02-12', due: '2026-02-27', milestone: false });
  const [nameErr, setNameErr] = React.useState(false);

  return (
    <div className="pj-detailroot">
      <div className="pj-detail__scrim" onClick={onClose}></div>
      <aside className="pj-detail">
        <div className="pj-detail__head">
          <h3 className="pj-detail__title">{task ? task.name : 'New task'}</h3>
          <button className="pj-detail__close" aria-label="Close" onClick={onClose}>✕</button>
        </div>
        {task ? (
          <div className="pj-detail__body">
            <div className="pj-detail__chips">
              <span className="tn-pill"><span className="tn-pill__dot"></span>{task.ws}</span>
              {task.milestone && <span className="tn-pill"><span className="pj-ms-diamond"></span>Milestone</span>}
            </div>
            <p className="pj-detail__desc">{task.desc}</p>
            <div className="pj-detail__grid">
              <div><div className="ad-label">Status</div><div className="pj-detail__v"><PjStatusIcon s={task.status} />{task.status}</div></div>
              <div><div className="ad-label">Priority</div><div className="pj-detail__v"><PjPriority p={task.priority} />{task.priority}</div></div>
              <div><div className="ad-label">Owner</div><div className="pj-detail__v"><span className="tn-av">{task.owner}</span>{P.people[task.owner]}</div></div>
              <div><div className="ad-label">Timeline</div><div className="pj-detail__v">{fmtD(task.start)} – <span className={overdue(task) ? 'nb' : ''}>{fmtD(task.due)}{overdue(task) ? ' (overdue)' : ''}</span></div></div>
            </div>
            <div className="ad-label">Progress</div>
            <div className="pj-detail__prog">
              <span className="pj-progress" style={{ flex: 1, width: 'auto' }}><span className="pj-progress__fill" style={{ width: task.pct + '%' }}></span></span>
              <span className="pj-row__pct">{task.pct}%</span>
            </div>
            {task.deps.length > 0 && (
              <div className="pj-detail__sec">
                <div className="ad-label">Depends on</div>
                {task.deps.map((d) => {
                  const dt = tasks.find((x) => x.id === d);
                  return dt ? <div key={d} className="pj-detail__dep"><PjStatusIcon s={dt.status} />{dt.name}</div> : null;
                })}
              </div>)}
            {task.notes && (
              <div className="pj-detail__sec">
                <div className="ad-label">Notes</div>
                <p className="pj-detail__notes">{task.notes}</p>
              </div>)}
          </div>
        ) : (
          <div className="pj-detail__body pj-form">
            <label className="ad-label">Task name
              <input className={`pj-input ${nameErr ? 'is-err' : ''}`} type="text" placeholder="e.g. Update buyer grid" value={form.name}
                onChange={(e) => { setForm({ ...form, name: e.target.value }); setNameErr(false); }} />
            </label>
            <label className="ad-label">Description
              <input className="pj-input" type="text" placeholder="Short description" value={form.desc} onChange={(e) => setForm({ ...form, desc: e.target.value })} />
            </label>
            <div className="pj-form__grid">
              <label className="ad-label">Workstream
                <select className="pj-select" value={form.ws} onChange={(e) => setForm({ ...form, ws: e.target.value })}>
                  {P.workstreams.map((w) => <option key={w}>{w}</option>)}
                </select>
              </label>
              <label className="ad-label">Priority
                <select className="pj-select" value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
                  <option>High</option><option>Medium</option><option>Low</option>
                </select>
              </label>
              <label className="ad-label">Owner
                <select className="pj-select" value={form.owner} onChange={(e) => setForm({ ...form, owner: e.target.value })}>
                  {Object.entries(P.people).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                </select>
              </label>
              <label className="ad-label">Start
                <input className="pj-input" type="date" value={form.start} onChange={(e) => setForm({ ...form, start: e.target.value })} />
              </label>
              <label className="ad-label">Due
                <input className="pj-input" type="date" value={form.due} onChange={(e) => setForm({ ...form, due: e.target.value })} />
              </label>
              <label className="ad-label pj-form__check">
                <input type="checkbox" checked={form.milestone} onChange={(e) => setForm({ ...form, milestone: e.target.checked })} />
                Milestone
              </label>
            </div>
            <div className="pj-form__actions">
              <button className="pj-newbtn" onClick={() => {
                if (!form.name.trim()) { setNameErr(true); return; }
                onAdd({
                  id: Math.max(...tasks.map((t) => t.id)) + 1,
                  name: form.name.trim(), desc: form.desc.trim() || '—',
                  ws: form.ws, owner: form.owner, status: 'Not Started', priority: form.priority,
                  start: form.start, due: form.due, pct: 0, milestone: form.milestone, deps: [], notes: '',
                });
              }}>Add task</button>
              <button className="pj-ghostbtn" onClick={onClose}>Cancel</button>
            </div>
          </div>
        )}
      </aside>
    </div>);
}

Object.assign(window, { PjData, PjControl, PjContext, PjDetail });