// Record side panels — Details, Comments, Data Lineage, Version History.
// Opened from the record context (3-dots) menu. Layouts mirror the macro
// mockups in uploads/pasted-1779091716223-0.png.

const { useState: useStateRP, useEffect: useEffectRP, useRef: useRefRP, createContext: createContextRP, useContext: useContextRP } = React;

/* ===== Output context — current output (Dashboard / Report / Slide) =====
   Created here so both the record body (collection.jsx) and the side panels
   (this file) can read/write it without prop-drilling. Side panels use it to
   default their per-output filter to whatever output is currently visible. */
const OutputContext = createContextRP(null);

function OutputProvider({ children, newRecord, setNewRecordName, onOpenAgentChat, generating, genStageIdx, genStages, agentGenerated, onTemplateGenerate, onTemplateCreateEmpty, templateArtifact }) {
  const [output, setOutput] = useStateRP('dashboard'); // current active output key
  const [openPanel, setOpenPanel] = useStateRP(null); // 'details' | 'comments' | 'lineage' | 'history' | null
  // Extra outputs the user adds via the "+" on the chip row. Each entry:
  // { key, label, state: 'empty' | 'done' }. Only meaningful when the record
  // has already been generated (agentGenerated=true).
  const [extraOutputs, setExtraOutputs] = useStateRP([]);
  const nextIdRef = useRefRP(1);

  // Reset extras whenever the record context resets (e.g. user navigates away
  // and creates a brand new record).
  useEffectRP(() => {
    if (!agentGenerated) {
      setExtraOutputs([]);
      nextIdRef.current = 1;
    }
  }, [agentGenerated]);

  const addOutput = () => {
    const id = nextIdRef.current++;
    const key = `new-${id}`;
    setExtraOutputs((arr) => {
      // First extra is just "New output"; subsequent ones get an index suffix
      // so chips remain distinguishable.
      const label = arr.length === 0 ? 'New output' : `New output ${arr.length + 1}`;
      return [...arr, { key, label, state: 'empty' }];
    });
    setOutput(key);
  };

  const setOutputState = (key, state) => {
    setExtraOutputs((arr) => arr.map((o) => (o.key === key ? { ...o, state } : o)));
  };

  const removeOutput = (key) => {
    setExtraOutputs((arr) => arr.filter((o) => o.key !== key));
    setOutput('dashboard');
  };

  return (
    <OutputContext.Provider value={{
      output, setOutput, openPanel, setOpenPanel,
      newRecord, setNewRecordName, onOpenAgentChat,
      isEmpty: !!newRecord,
      generating, genStageIdx, genStages,
      agentGenerated,
      onTemplateGenerate, onTemplateCreateEmpty, templateArtifact,
      extraOutputs, addOutput, setOutputState, removeOutput,
    }}>
      {children}
    </OutputContext.Provider>
  );
}

function useOutput() {
  return useContextRP(OutputContext);
}

/* Pretty labels for filter dropdowns */
const OUTPUT_LABELS = { dashboard: 'Dashboard', report: 'Report', slide: 'Slide' };
const OUTPUT_FILTER_OPTIONS = ['All outputs', 'Dashboard', 'Report', 'Slide'];
const labelFromKey = (k) => OUTPUT_LABELS[k] || k;
const keyFromLabel = (l) => Object.keys(OUTPUT_LABELS).find((k) => OUTPUT_LABELS[k] === l) || null;

/* ===== Shared shell ===== */
function PanelShell({ title, onClose, toolbar, footer, children, bodyScrolls = true, className = '' }) {
  // Lock scroll while open
  useEffectRP(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);

  return (
    <React.Fragment>
      <div className="side-panel__scrim" onClick={onClose} />
      <aside className={`side-panel rp ${className}`} role="dialog" aria-label={title}>
        <header className="rp__head">
          <div className="rp__title">{title}</div>
          <button className="iconbtn rp__close" onClick={onClose} aria-label="Close">
            <IconX size={16} />
          </button>
        </header>
        {toolbar && <div className="rp__toolbar">{toolbar}</div>}
        <div className={`rp__body ${bodyScrolls ? '' : 'rp__body--noscroll'}`}>
          {children}
        </div>
        {footer && <div className="rp__foot">{footer}</div>}
      </aside>
    </React.Fragment>
  );
}

/* ===== Simple select pill (display-only, click-through is decorative) ===== */
function FilterSelect({ value, onChange, options }) {
  const [open, setOpen] = useStateRP(false);
  const wrapRef = useRefRP(null);

  useEffectRP(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  return (
    <div className="fselect" ref={wrapRef}>
      <button
        type="button"
        className="fselect__btn"
        onClick={() => setOpen((o) => !o)}
        aria-haspopup="listbox"
        aria-expanded={open}>
        <span className="fselect__v">{value}</span>
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && (
        <div className="fselect__menu" role="listbox">
          {options.map((o) => (
            <button
              key={o}
              type="button"
              role="option"
              aria-selected={o === value}
              className={`fselect__item ${o === value ? 'is-active' : ''}`}
              onClick={() => { onChange(o); setOpen(false); }}>
              {o}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* =========================================================================
   1. DETAILS PANEL
   ========================================================================= */
function EditableProp({ value, options, onChange }) {
  const [open, setOpen] = useStateRP(false);
  const wrapRef = useRefRP(null);

  useEffectRP(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div className="rp-prop" ref={wrapRef}>
      <button
        type="button"
        className="rp-prop__btn"
        aria-haspopup="listbox"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}>
        <span className="rp-prop__v">{value}</span>
        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && (
        <div className="rp-prop__menu" role="listbox">
          {options.map((o) => (
            <button
              key={o}
              type="button"
              role="option"
              aria-selected={o === value}
              className={`rp-prop__item ${o === value ? 'is-active' : ''}`}
              onClick={() => { onChange(o); setOpen(false); }}>
              {o}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

const DETAILS_USED_IN = [
  { t: 'Finance reporting', sub: 'Q1 2026 dashboards' },
  { t: 'MV Owner submissions', sub: 'Monthly progress packets' },
  { t: 'TAGP GP meetings', sub: 'Meeting #13 – #14 decks' },
  { t: 'Executive summaries', sub: 'AWST Q1 2026 brief' },
];

function RecordDetailsPanel({ onClose }) {
  const ctx = useOutput();
  const isEmpty = ctx?.isEmpty;
  const recordName = ctx?.newRecord?.name || 'Untitled record';
  const [descOpen, setDescOpen] = useStateRP(true);
  const [propsOpen, setPropsOpen] = useStateRP(true);
  const [usedInOpen, setUsedInOpen] = useStateRP(true);

  const [status, setStatus] = useStateRP(isEmpty ? 'Draft' : 'Need review');
  const [priority, setPriority] = useStateRP('Medium');
  const [kb, setKb] = useStateRP(isEmpty ? 'Pending review' : 'Included');

  return (
    <PanelShell title="Details" onClose={onClose}>
      <section className="rp-sec">
        <button type="button" className="rp-sec__head" onClick={() => setDescOpen((o) => !o)} aria-expanded={descOpen}>
          <span className={`rp-sec__caret ${descOpen ? 'is-open' : ''}`}>
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
          <span className="rp-sec__title">Description</span>
        </button>
        {descOpen && (
          <div className="rp-sec__body">
            {isEmpty ? (
              <p className="rp__p rp__p--muted">
                No description yet. Add one once the agent or a template has filled this record with a first artifact.
              </p>
            ) : (
              <p className="rp__p">
                Aggregated dashboard of the Cedar Narrows Water Supply Tunnel project (Fraser River Crossing, Metro Vancouver
                Contract RFP No. 20-354). Synthesises the latest monthly, weekly, and daily shift reports — safety
                metrics, pipe installation progress, active workfronts, manpower, and open commercial items — into a
                single live view for the TAGP team and the Owner.
              </p>
            )}
          </div>
        )}
      </section>

      <section className="rp-sec">
        <button type="button" className="rp-sec__head" onClick={() => setPropsOpen((o) => !o)} aria-expanded={propsOpen}>
          <span className={`rp-sec__caret ${propsOpen ? 'is-open' : ''}`}>
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
          <span className="rp-sec__title">Properties</span>
        </button>
        {propsOpen && (
          <div className="rp-sec__body">
            <dl className="rp-props">
              {isEmpty ? (
                <React.Fragment>
                  <div className="rp-props__row"><dt className="rp-props__k">Name</dt><dd className="rp-props__v">{recordName}</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Owner</dt><dd className="rp-props__v">James Anderson</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Team</dt><dd className="rp-props__v">Marketing Team</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Status</dt><dd className="rp-props__v"><EditableProp value={status} onChange={setStatus} options={['Draft', 'Need review', 'Approved', 'Archived']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Priority</dt><dd className="rp-props__v"><EditableProp value={priority} onChange={setPriority} options={['Low', 'Medium', 'High', 'Urgent']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Knowledge Base</dt><dd className="rp-props__v"><EditableProp value={kb} onChange={setKb} options={['Included', 'Excluded', 'Pending review']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Location</dt><dd className="rp-props__v">Proxa / Traylor / Cedar Narrows WST</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Skills used</dt><dd className="rp-props__v rp-props__v--empty">—</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Created</dt><dd className="rp-props__v">Just now · by James Anderson</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Last updated</dt><dd className="rp-props__v">Just now</dd></div>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div className="rp-props__row"><dt className="rp-props__k">Owner</dt><dd className="rp-props__v">James Anderson</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Team</dt><dd className="rp-props__v">TAGP — Project Controls</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Status</dt><dd className="rp-props__v"><EditableProp value={status} onChange={setStatus} options={['Draft', 'Need review', 'Approved', 'Archived']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Priority</dt><dd className="rp-props__v"><EditableProp value={priority} onChange={setPriority} options={['Low', 'Medium', 'High', 'Urgent']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Knowledge Base</dt><dd className="rp-props__v"><EditableProp value={kb} onChange={setKb} options={['Included', 'Excluded', 'Pending review']} /></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Location</dt><dd className="rp-props__v">Proxa / Traylor / Cedar Narrows WST</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Skills used</dt><dd className="rp-props__v"><div>report-aggregator (v1.04)</div><div>construction-kpi-extractor (v1.02)</div></dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Created</dt><dd className="rp-props__v">January 20, 2022 · 09:15</dd></div>
                  <div className="rp-props__row"><dt className="rp-props__k">Last updated</dt><dd className="rp-props__v">4 min ago by Vera Hanna</dd></div>
                </React.Fragment>
              )}
            </dl>
          </div>
        )}
      </section>

      <section className="rp-sec">
        <button type="button" className="rp-sec__head" onClick={() => setUsedInOpen((o) => !o)} aria-expanded={usedInOpen}>
          <span className={`rp-sec__caret ${usedInOpen ? 'is-open' : ''}`}>
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
          </span>
          <span className="rp-sec__title">Used in</span>
        </button>
        {usedInOpen && (
          <div className="rp-sec__body">
            {isEmpty ? (
              <div className="rp__empty">
                <div className="rp__empty-t">Not used anywhere yet</div>
                <div className="rp__empty-s">Once this record has an artifact, places that reference it will show up here.</div>
              </div>
            ) : (
              <ul className="rp-usedin">
                {DETAILS_USED_IN.map((u) => (
                  <li key={u.t}>
                    <a className="rp-usedin__row" href="#" onClick={(e) => e.preventDefault()}>
                      <span className="rp-usedin__ico" aria-hidden="true">
                        <svg viewBox="0 0 28 28" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M18.689 14.0042L25.0823 17.6559C25.6738 17.9954 25.6738 18.7464 25.0823 19.0859L14.7095 25.0073C14.2705 25.2581 13.7295 25.2581 13.2905 25.0073L2.91777 19.0859C2.32622 18.7464 2.32622 17.9954 2.91777 17.6559L9.31109 14.0042"/>
                          <path d="M9.31109 8.49417L2.91777 12.1459C2.32622 12.4854 2.32622 13.2364 2.91777 13.5759L13.2905 19.4973C13.7295 19.7481 14.2705 19.7481 14.7095 19.4973L25.0823 13.5759C25.6738 13.2364 25.6738 12.4854 25.0823 12.1459L18.689 8.49417"/>
                          <path d="M13.2905 2.65867L2.91777 8.58007C2.32622 8.91957 2.32622 9.67057 2.91777 10.0101L13.2905 15.9315C13.7295 16.1823 14.2705 16.1823 14.7095 15.9315L25.0823 10.0101C25.6738 9.67057 25.6738 8.91957 25.0823 8.58007L14.7095 2.65867C14.2705 2.40789 13.7295 2.40789 13.2905 2.65867Z"/>
                        </svg>
                      </span>
                      <span className="rp-usedin__body">
                        <span className="rp-usedin__t">{u.t}</span>
                        <span className="rp-usedin__s">{u.sub}</span>
                      </span>
                      <span className="rp-usedin__ext" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14L21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
                      </span>
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </section>
    </PanelShell>
  );
}

/* =========================================================================
   2. COMMENTS PANEL
   ========================================================================= */
const RP_COMMENTS = [
  { id: 'c1', who: 'Lorri Warf', ago: '1 day ago', output: 'dashboard', avatar: 'LW',
    body: 'Forecast Substantial Completion at Nov 8, 2027 — please verify against the Rev.08 baseline before sending to Metro Vancouver. The positive variance vs. CO-14 SC is worth calling out.' },
  { id: 'c2', who: 'Oliver Smith', ago: '3 days ago', output: 'dashboard', avatar: 'OS',
    body: 'Cellular grout backfill is sitting at 4.5%. Confirm with Joe before publishing the next monthly that the slag-mix throughput projection still holds for April.' },
  { id: 'c3', who: 'Mia Chen', ago: '5 days ago', output: 'dashboard', avatar: 'MC',
    body: 'SVC dewatering pump test results look good. Adding Well #11 at −18 m is reflected in the workfronts card; archive Wells #1 and #4 once decommissioned.' },
  { id: 'c4', who: 'Elena Martinez', ago: '6 days ago', output: 'report', avatar: 'EM',
    body: 'In the "Financial position" section, please re-word the PCO-008 paragraph — current draft reads as accepting CMC\'s framing. Stick to the partial-payment narrative.' },
  { id: 'c5', who: 'Rina Patel', ago: '1 week ago', output: 'report', avatar: 'RP',
    body: 'Hero photo for the report should be the NVC excavation shot, not the tunnel-welding one. Excavation reads better as a "where the project is now" image.' },
  { id: 'c6', who: 'James Anderson', ago: '2 weeks ago', output: 'report', avatar: 'JA',
    body: 'Bullet under "Safety performance" — let\'s replace "no lost-time incidents in March" with the YTD figure. Owner cares about cumulative, not monthly.' },
  { id: 'c7', who: 'Oliver Smith', ago: '2 weeks ago', output: 'slide', avatar: 'OS',
    body: 'NLTI of 14.3 reads alarming on the slide without a comparison number. Add the 4.8 project-to-date average underneath or drop the metric.' },
  { id: 'c8', who: 'Mia Chen', ago: '3 weeks ago', output: 'slide', avatar: 'MC',
    body: 'Workfronts = 7 is fine but the slide is too quiet. Consider swapping "Active workfronts" for "Pipe welded %" — it carries the story better.' },
  { id: 'c9', who: 'Oliver Smith', ago: '4 weeks ago', output: 'dashboard', avatar: 'OS',
    body: 'Manpower bar widths feel exaggerated for the smaller crews — consider switching to a log scale or fixing the bar max to the largest crew on site.' },
];

function Avatar({ initials }) {
  return <span className="rp-av rp-av--initials">{initials}</span>;
}

function RecordCommentsPanel({ onClose, initialScope }) {
  const ctx = useOutput();
  const output = ctx?.output || 'dashboard';
  const isEmpty = ctx?.isEmpty;
  const [scope, setScope] = useStateRP(initialScope || labelFromKey(output));
  const [draft, setDraft] = useStateRP('');

  const toolbar = isEmpty ? null : (
    <FilterSelect value={scope} onChange={setScope} options={OUTPUT_FILTER_OPTIONS} />
  );

  const footer = (
    <div className="rp-cmt__composer">
      <textarea
        className="rp-cmt__input"
        placeholder="Leave a comment…"
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        rows={3} />
      <button type="button" className="rp-cmt__send" aria-label="Send">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
      </button>
    </div>
  );

  if (isEmpty) {
    return (
      <PanelShell title="Comments" onClose={onClose} footer={footer}>
        <div className="rp__empty">
          <div className="rp__empty-t">No comments yet</div>
          <div className="rp__empty-s">Once you and your team start working on this record, comments and threads will live here.</div>
        </div>
      </PanelShell>
    );
  }

  const filterKey = keyFromLabel(scope); // null when 'All outputs'
  const visible = filterKey ? RP_COMMENTS.filter((c) => c.output === filterKey) : RP_COMMENTS;

  return (
    <PanelShell title="Comments" onClose={onClose} toolbar={toolbar} footer={footer}>
      <div className="rp-cmt__list">
        <div className="rp-cmt__kicker">
          {visible.length > 0
            ? (filterKey ? `${visible.length} on ${labelFromKey(filterKey)}` : `${visible.length} across all outputs`)
            : 'No comments yet'}
        </div>
        {visible.map((c) => (
          <div key={c.id} className="rp-cmt">
            <Avatar initials={c.avatar} />
            <div className="rp-cmt__body">
              <div className="rp-cmt__meta">
                <span className="rp-cmt__who">{c.who}</span>
                <span className="rp-cmt__dot">·</span>
                <span className="rp-cmt__ago">{c.ago}</span>
                <span className="rp-cmt__dot">·</span>
                <span className="rp-cmt__src">{labelFromKey(c.output)}</span>
              </div>
              <div className="rp-cmt__text">{c.body}</div>
            </div>
          </div>
        ))}
      </div>
    </PanelShell>
  );
}

/* =========================================================================
   3. DATA LINEAGE PANEL — LEGACY. Superseded by src/lineage_panel.jsx,
   which loads after this file and overrides window.RecordLineagePanel.
   Kept only as reference for the original two-list layout.
   ========================================================================= */
const RP_SOURCES = [
  { t: '2026-03 Monthly Report-R0.pdf', kind: 'doc', outputs: ['dashboard', 'report', 'slide'] },
  { t: 'AWST_Weekly Report_220_29Mar2026.pdf', kind: 'doc', outputs: ['dashboard', 'report'] },
  { t: 'AWST_Weekly Report_219_22Mar2026.pdf', kind: 'doc', outputs: ['dashboard'] },
  { t: 'AWST_Weekly Report_218_15Mar2026.pdf', kind: 'doc', outputs: ['dashboard'] },
  { t: 'AWST Daily Shift Report 12010 — South.pdf', kind: 'doc', outputs: ['dashboard'] },
  { t: 'Safety-Stats-March-2026.xlsx', kind: 'sheet', outputs: ['dashboard', 'report', 'slide'] },
  { t: 'Cost-Tracker-March-2026.xlsx', kind: 'sheet', outputs: ['dashboard', 'report', 'slide'] },
];

const RP_USED_BY = [
  { t: 'MV-Monthly-Submission-Mar2026.pdf', kind: 'doc', outputs: ['dashboard', 'report'] },
  { t: 'AWST-Q1-2026-Executive-Summary.html', kind: 'doc', outputs: ['report', 'slide'] },
  { t: 'TAGP-GP-Meeting-14-Deck.pptx', kind: 'doc', outputs: ['slide'] },
];

function LineageFileIcon({ kind }) {
  if (kind === 'sheet') {
    return (
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M3 15h18M9 4v16M15 4v16"/></svg>
    );
  }
  return (
    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></svg>
  );
}

function RecordLineagePanel({ onClose }) {
  const ctx = useOutput();
  const output = ctx?.output || 'dashboard';
  const isEmpty = ctx?.isEmpty;
  const [scope, setScope] = useStateRP(labelFromKey(output));

  if (isEmpty) {
    return (
      <PanelShell title="Data Lineage" onClose={onClose}>
        <div className="rp__empty">
          <div className="rp__empty-t">No sources connected yet</div>
          <div className="rp__empty-s">As soon as the agent extracts data from your sources, you'll see the upstream files here — and any downstream records that pull from this one.</div>
        </div>
      </PanelShell>
    );
  }

  const toolbar = (
    <FilterSelect value={scope} onChange={setScope} options={OUTPUT_FILTER_OPTIONS} />
  );

  const filterKey = keyFromLabel(scope); // null when 'All outputs'
  const visibleSources = filterKey ? RP_SOURCES.filter((s) => s.outputs.includes(filterKey)) : RP_SOURCES;
  const visibleUsedBy = filterKey ? RP_USED_BY.filter((s) => s.outputs.includes(filterKey)) : RP_USED_BY;
  const selfLabel = filterKey
    ? `This record · ${labelFromKey(filterKey)} output`
    : 'This record · 3 outputs';

  const renderRow = (s, i) => (
    <li key={i}>
      <a className="rp-lin__row" href="#" onClick={(e) => e.preventDefault()}>
        <span className="rp-lin__ico"><LineageFileIcon kind={s.kind} /></span>
        <span className="rp-lin__t">{s.t}</span>
        <span className="rp-lin__ext" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14L21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></svg>
        </span>
      </a>
    </li>
  );

  return (
    <PanelShell title="Data Lineage" onClose={onClose} toolbar={toolbar}>
      <div className="rp-lin">
        <div className="rp-lin__group">
          <div className="rp-lin__title">Sources <span className="rp-lin__count">{visibleSources.length}</span></div>
          <ul className="rp-lin__list">
            {visibleSources.map(renderRow)}
          </ul>
        </div>

        <div className="rp-lin__arrow" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="m6 13 6 6 6-6"/></svg>
        </div>

        <div className="rp-lin__self">
          <div className="rp-lin__selficon">
            <svg viewBox="0 0 28 28" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5.83416 17.5001H12.8342M1.14844 21L5.82285 7H26.85L22.1755 21H1.14844Z"/></svg>
          </div>
          <div className="rp-lin__selfbody">
            <div className="rp-lin__selft">Cedar Narrows WST — Project Overview</div>
            <div className="rp-lin__selfs">{selfLabel}</div>
          </div>
        </div>

        <div className="rp-lin__arrow" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="m6 13 6 6 6-6"/></svg>
        </div>

        <div className="rp-lin__group">
          <div className="rp-lin__title">Used by <span className="rp-lin__count">{visibleUsedBy.length}</span></div>
          <ul className="rp-lin__list">
            {visibleUsedBy.map(renderRow)}
          </ul>
        </div>
      </div>
    </PanelShell>
  );
}

/* =========================================================================
   4. VERSION HISTORY PANEL
   ========================================================================= */
const RP_VERSIONS = [
  {
    month: 'April 2026',
    items: [
      { d: 'Apr 21 · 12:05 AM', who: 'James Anderson', output: 'dashboard', current: true },
      { d: 'Apr 20 · 9:03 AM', who: 'James Anderson', output: 'report' },
      { d: 'Apr 19 · 12:05 AM', who: 'James Anderson', output: 'dashboard' },
      { d: 'Apr 18 · 4:21 PM', who: 'Vera Hanna', output: 'slide' },
      { d: 'Apr 17 · 9:03 AM', who: 'James Anderson', output: 'report' },
      { d: 'Apr 15 · 12:05 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
    ],
  },
  {
    month: 'March 2026',
    items: [
      { d: 'Mar 28, 12:05 AM', who: 'James Anderson', output: 'dashboard' },
      { d: 'Mar 22, 2:14 PM', who: 'Vera Hanna', output: 'slide' },
      { d: 'Mar 15, 9:03 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
      { d: 'Mar 12, 11:40 AM', who: 'James Anderson', output: 'report' },
      { d: 'Mar 7, 12:05 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
      { d: 'Mar 3, 12:05 AM', who: 'James Anderson', output: 'report' },
      { d: 'Mar 2, 12:05 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
    ],
  },
  {
    month: 'February 2026',
    items: [
      { d: 'Feb 28, 10:05 AM', who: 'James Anderson', output: 'dashboard' },
      { d: 'Feb 24, 9:03 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
      { d: 'Feb 18, 3:48 PM', who: 'Vera Hanna', output: 'slide' },
      { d: 'Feb 7, 12:05 AM', who: 'Proxa AI auto recalculation', output: 'dashboard', ai: true },
    ],
  },
];

function VersionItemMenu() {
  const [open, setOpen] = useStateRP(false);
  const wrapRef = useRefRP(null);

  useEffectRP(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  return (
    <div className="rp-ver__menu-wrap" ref={wrapRef}>
      <button
        type="button"
        className="rp-ver__menu-btn"
        aria-label="More"
        onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}>
        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="5" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></svg>
      </button>
      {open && (
        <div className="rp-ver__menu" role="menu" onClick={(e) => e.stopPropagation()}>
          <button className="rp-ver__menu-item" role="menuitem" onClick={() => setOpen(false)}>
            <span className="rp-ver__menu-ico">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7V3h4"/><path d="M21 17v4h-4"/><path d="m21 3-7 7"/><path d="m10 14-7 7"/></svg>
            </span>
            View full screen
          </button>
          <button className="rp-ver__menu-item" role="menuitem" onClick={() => setOpen(false)}>
            <span className="rp-ver__menu-ico">
              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            </span>
            Restore this version
          </button>
        </div>
      )}
    </div>
  );
}

function RecordVersionHistoryPanel({ onClose }) {
  const ctx = useOutput();
  const output = ctx?.output || 'dashboard';
  const isEmpty = ctx?.isEmpty;
  const [scope, setScope] = useStateRP(labelFromKey(output));
  const [author, setAuthor] = useStateRP('All authors');
  const [openMonths, setOpenMonths] = useStateRP({ 'April 2026': true, 'March 2026': true, 'February 2026': true });

  if (isEmpty) {
    return (
      <PanelShell title="Version History" onClose={onClose}>
        <div className="rp-ver">
          <section className="rp-ver__group">
            <ul className="rp-ver__list">
              <li className="rp-ver__row is-current">
                <div className="rp-ver__rowmain">
                  <div className="rp-ver__d">
                    Just now
                    <span className="rp-ver__curr"> (Current version)</span>
                  </div>
                  <div className="rp-ver__who">
                    <span className="rp-ver__whoico">
                      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
                    </span>
                    James Anderson
                    <span className="rp-ver__dot">·</span>
                    <span className="rp-ver__output">Record created</span>
                  </div>
                </div>
              </li>
            </ul>
          </section>
          <div className="rp__empty rp__empty--inline">
            <div className="rp__empty-s">Each time the agent regenerates an artifact, or someone makes a manual edit, a new version will land here.</div>
          </div>
        </div>
      </PanelShell>
    );
  }

  const toggle = (m) => setOpenMonths((s) => ({ ...s, [m]: !s[m] }));

  const toolbar = (
    <React.Fragment>
      <FilterSelect value={scope} onChange={setScope} options={OUTPUT_FILTER_OPTIONS} />
      <FilterSelect value={author} onChange={setAuthor} options={['All authors', 'James Anderson', 'Vera Hanna', 'Proxa AI auto recalculation']} />
    </React.Fragment>
  );

  const filterKey = keyFromLabel(scope); // null when 'All outputs'
  const filteredGroups = RP_VERSIONS
    .map((g) => ({
      ...g,
      items: g.items.filter((it) =>
        (!filterKey || it.output === filterKey) &&
        (author === 'All authors' || it.who === author)
      ),
    }))
    .filter((g) => g.items.length > 0);

  return (
    <PanelShell title="Version History" onClose={onClose} toolbar={toolbar}>
      <div className="rp-ver">
        {filteredGroups.length === 0 && (
          <div className="rp-ver__empty">No versions match the current filters.</div>
        )}
        {filteredGroups.map((group) => (
          <section className="rp-ver__group" key={group.month}>
            <button
              type="button"
              className="rp-ver__monthhead"
              onClick={() => toggle(group.month)}
              aria-expanded={openMonths[group.month]}>
              <span className={`rp-ver__caret ${openMonths[group.month] ? 'is-open' : ''}`}>
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </span>
              <span className="rp-ver__monthlabel">{group.month}</span>
              <span className="rp-ver__monthcount">{group.items.length}</span>
            </button>
            {openMonths[group.month] && (
              <ul className="rp-ver__list">
                {group.items.map((it, i) => (
                  <li key={i} className={`rp-ver__row ${it.current ? 'is-current' : ''}`}>
                    <div className="rp-ver__rowmain">
                      <div className="rp-ver__d">
                        {it.d}
                        {it.current && <span className="rp-ver__curr"> (Current version)</span>}
                      </div>
                      <div className="rp-ver__who">
                        <span className="rp-ver__whoico">
                          {it.ai ? (
                            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
                          ) : (
                            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
                          )}
                        </span>
                        {it.who}
                        <span className="rp-ver__dot">·</span>
                        <span className="rp-ver__output">{labelFromKey(it.output)}</span>
                      </div>
                    </div>
                    <VersionItemMenu />
                  </li>
                ))}
              </ul>
            )}
          </section>
        ))}
      </div>
    </PanelShell>
  );
}

Object.assign(window, {
  RecordDetailsPanel,
  RecordCommentsPanel,
  RecordLineagePanel, // legacy — overridden by src/lineage_panel.jsx
  RecordVersionHistoryPanel,
  OutputProvider,
  useOutput,
  OUTPUT_LABELS,
  RP_COMMENTS_COUNT: RP_COMMENTS.length,
  // Shared building blocks for src/lineage_panel.jsx
  PanelShell,
  FilterSelect,
  OUTPUT_FILTER_OPTIONS,
  labelFromKey,
  keyFromLabel,
});