// Data Lineage panel v2 — an orchestration surface, not just a link list.
// Shows the full chain Sources → AI Agent (multi-step) → This record →
// Outputs → Used by, with per-node status, an inline agent run log,
// orchestration actions (re-run / schedule / edit instructions), and a
// problem banner that surfaces at the top of the record when the pipeline
// needs attention.
//
// Rendered as a vertical pipeline flow with explicit connectors.
//
// Loaded AFTER record_panels.jsx: overrides window.RecordLineagePanel.

const { useState: useStateLX, useEffect: useEffectLX } = React;

/* ===== Shared store (variant + run simulation), survives panel remounts ===== */
const lxStore = {
  state: {
    variant: 'pipeline',
    running: false,   // re-run simulation in progress
    runStep: -1,      // 0..2 active step while running
    ranNow: false,    // a manual run completed this session
    bannerDismissed: false,
  },
  listeners: new Set(),
  set(patch) {
    this.state = Object.assign({}, this.state, patch);
    this.listeners.forEach((fn) => fn(this.state));
  },
};
function useLxStore() {
  const [s, setS] = useStateLX(lxStore.state);
  useEffectLX(() => {
    const fn = (st) => setS(st);
    lxStore.listeners.add(fn);
    return () => lxStore.listeners.delete(fn);
  }, []);
  return s;
}

/* ===== Run simulation ===== */
let lxRunTimers = [];
function lxRunAgentNow() {
  if (lxStore.state.running) return;
  lxRunTimers.forEach(clearTimeout);
  lxRunTimers = [];
  lxStore.set({ running: true, runStep: 0 });
  lxRunTimers.push(setTimeout(() => lxStore.set({ runStep: 1 }), 1400));
  lxRunTimers.push(setTimeout(() => lxStore.set({ runStep: 2 }), 2900));
  lxRunTimers.push(setTimeout(() => lxStore.set({ running: false, runStep: -1, ranNow: true }), 4200));
}

/* ===== Demo data ===== */
const LX_SOURCES = [
  { id: 's-safety', t: 'Safety-Stats-March-2026.xlsx', kind: 'sheet', outputs: ['dashboard', 'report', 'slide'], sync: 'Synced today 12:05 AM' },
  { id: 's-pipe', t: 'AWST_Pipe_Install_Tracker.xlsx', kind: 'sheet', outputs: ['dashboard', 'report', 'slide'], sync: 'Synced today 9:32 AM' },
  { id: 's-cost', t: 'Cost-Tracker-March-2026.xlsx', kind: 'sheet', outputs: ['dashboard', 'report', 'slide'], sync: 'Synced today 9:58 AM' },
  { id: 's-comm', t: 'AWST_Commercial_Register.xlsx', kind: 'sheet', outputs: ['dashboard', 'report'], sync: 'Synced today 9:58 AM' },
  { id: 's-monthly', t: '2026-03 Monthly Report-R0.pdf', kind: 'doc', outputs: ['dashboard', 'report', 'slide'], sync: 'Synced Apr 2', stale: { note: 'Revision R1 uploaded 3 hrs ago — not processed', queued: 'Queued for tonight’s 12:00 AM run' } },
  { id: 's-w220', t: 'AWST_Weekly Report_220_29Mar2026.pdf', kind: 'doc', outputs: ['dashboard', 'report'], sync: 'Synced today 12:05 AM' },
  { id: 's-daily', t: 'AWST Daily Shift Report 12010 — South.pdf', kind: 'doc', outputs: ['dashboard'], sync: 'Synced today 12:05 AM' },
];

const LX_USED_BY = [
  { t: 'MV-Monthly-Submission-Mar2026.pdf', kind: 'doc', outputs: ['dashboard', 'report'], state: 'ok', note: 'Refreshed from this record 2 hrs ago' },
  { t: 'AWST-Q1-2026-Executive-Summary.html', kind: 'doc', outputs: ['report', 'slide'], state: 'stale', note: 'Not refreshed since this record last changed' },
  { t: 'TAGP-GP-Meeting-14-Deck.pptx', kind: 'doc', outputs: ['slide'], state: 'ok', note: 'Refreshed Mar 30' },
];

const LX_RUNS = [
  { d: 'Today · 12:05 AM', result: 'partial', note: '11 fields applied · 3 held for review' },
  { d: 'Apr 20 · 12:04 AM', result: 'ok', note: '9 fields updated' },
  { d: 'Apr 19 · 12:03 AM', result: 'ok', note: 'No changes in sources' },
  { d: 'Apr 18 · 12:05 AM', result: 'fail', note: 'Egnyte timeout — retried 6:00 AM ✓' },
  { d: 'Apr 17 · 12:04 AM', result: 'ok', note: '12 fields updated' },
];

/* Agent steps for the three display modes */
function lxSteps(s, pendingCount) {
  if (s.running) {
    const labels = [
      { t: 'Check & fetch sources', d: 'Checking 7 files on Egnyte…' },
      { t: 'Extract & compare data', d: 'Reading new versions…' },
      { t: 'Update record', d: 'Applying changes…' },
    ];
    return labels.map((l, i) => ({
      t: l.t,
      d: i === s.runStep ? l.d : (i < s.runStep ? 'Done' : 'Waiting…'),
      state: i < s.runStep ? 'ok' : (i === s.runStep ? 'run' : 'idle'),
      time: i <= s.runStep ? 'Now' : '',
    }));
  }
  if (s.ranNow) {
    return [
      { t: 'Check & fetch sources', d: '7 files checked · 1 new version (Monthly R1)', state: 'ok', time: 'Just now' },
      { t: 'Extract & compare data', d: '2 fields extracted from Monthly R1', state: 'ok', time: 'Just now' },
      { t: 'Update record', d: pendingCount > 0 ? `2 fields applied · ${pendingCount} earlier changes still awaiting review` : '2 fields applied · no exceptions', state: pendingCount > 0 ? 'warn' : 'ok', time: 'Just now' },
    ];
  }
  return [
    { t: 'Check & fetch sources', d: '7 files checked · 2 new versions found', state: 'ok', time: '12:02 AM' },
    { t: 'Extract & compare data', d: '14 fields extracted & compared with record', state: 'ok', time: '12:04 AM' },
    { t: 'Update record', d: '11 fields applied · 3 held for your review', state: 'warn', time: '12:05 AM' },
  ];
}

/* ===== Small bits ===== */
function LxDot({ state }) {
  return <span className={`lx-dot lx-dot--${state}`} aria-hidden="true"></span>;
}

function LxFileIcon({ 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"></rect><path d="M3 10h18M3 15h18M9 4v16M15 4v16"></path></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><path d="M14 2v6h6M8 13h8M8 17h5"></path></svg>
  );
}

function LxStepMark({ state }) {
  if (state === 'ok') {
    return (
      <span className="lx-step__mark lx-step__mark--ok">
        <svg viewBox="0 0 16 16" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8.5l3.5 3.5L13 4.5"></path></svg>
      </span>
    );
  }
  if (state === 'warn') {
    return (
      <span className="lx-step__mark lx-step__mark--warn">
        <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 6v7"></path><circle cx="12" cy="17.5" r="0.6" fill="currentColor"></circle></svg>
      </span>
    );
  }
  if (state === 'run') {
    return <span className="lx-step__mark lx-step__mark--run"><span className="lx-spin"></span></span>;
  }
  return <span className="lx-step__mark lx-step__mark--idle"></span>;
}

/* Per-source resolved status */
function lxSourceStatus(src, pendingBySrc, s) {
  const pend = pendingBySrc[src.t] || 0;
  if (pend > 0) return { state: 'conflict', label: `${pend} field ${pend === 1 ? 'change' : 'changes'} pending review`, review: pend };
  if (src.stale && !s.ranNow) return { state: 'stale', label: src.stale.note, sub: src.stale.queued };
  if (src.stale && s.ranNow) return { state: 'ok', label: 'Synced just now · R1 processed' };
  return { state: 'ok', label: src.sync };
}

/* ===== Shared: health strip ===== */
function LxHealth({ pendingCount, staleCount, s, onReview }) {
  const ok = pendingCount === 0 && staleCount === 0;
  if (ok) {
    return (
      <div className="lx-health lx-health--ok">
        <LxDot state="ok" />
        <div className="lx-health__main">
          <strong>Pipeline healthy</strong>
          <span>All sources synced · outputs up to date · last run {s.ranNow ? 'just now' : 'today 12:05 AM'}</span>
        </div>
      </div>
    );
  }
  const bits = [];
  if (pendingCount > 0) bits.push(`${pendingCount} field ${pendingCount === 1 ? 'change' : 'changes'} pending review`);
  if (staleCount > 0) bits.push(`${staleCount} source not processed`);
  return (
    <div className="lx-health lx-health--warn">
      <LxDot state="conflict" />
      <div className="lx-health__main">
        <strong>Needs attention</strong>
        <span>{bits.join(' · ')}</span>
      </div>
      {pendingCount > 0 && (
        <button type="button" className="lx-btn lx-btn--sm" onClick={onReview}>Review changes</button>
      )}
    </div>
  );
}

/* ===== Shared: agent card (steps + run log) ===== */
function LxAgentCard({ s, pendingCount, defaultLogOpen = false }) {
  const [logOpen, setLogOpen] = useStateLX(defaultLogOpen);
  const steps = lxSteps(s, pendingCount);
  const runs = s.ranNow
    ? [{ d: 'Just now · manual run', result: 'ok', note: 'Monthly R1 processed · 2 fields updated' }].concat(LX_RUNS)
    : LX_RUNS;
  const headSub = s.running
    ? 'Running now…'
    : s.ranNow
      ? 'Last run just now · manual'
      : 'Last run today 12:05 AM · nightly schedule';
  const chip = s.running
    ? { cls: 'run', label: 'Running' }
    : s.ranNow
      ? { cls: 'ok', label: 'Success' }
      : { cls: 'warn', label: 'Partial' };

  return (
    <div className="lx-node lx-node--agent">
      <div className="lx-node__head">
        <span className="lx-agent__badge" aria-hidden="true"><ProxaP size={13} color="currentColor" /></span>
        <div className="lx-node__headtxt">
          <div className="lx-node__t">AI Agent — Source sync</div>
          <div className="lx-node__s">{headSub}</div>
        </div>
        <span className={`lx-chip lx-chip--${chip.cls}`}>{chip.label}</span>
      </div>
      <ol className="lx-steps">
        {steps.map((st, i) => (
          <li key={i} className={`lx-step lx-step--${st.state}`}>
            <LxStepMark state={st.state} />
            <div className="lx-step__main">
              <div className="lx-step__t">{st.t}</div>
              <div className="lx-step__d">{st.d}</div>
            </div>
            <span className="lx-step__time">{st.time}</span>
          </li>
        ))}
      </ol>
      <button type="button" className="lx-runlog__toggle" onClick={() => setLogOpen((o) => !o)} aria-expanded={logOpen}>
        <span className={`lx-caret ${logOpen ? 'is-open' : ''}`}>
          <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
        </span>
        Run history
        <span className="lx-runlog__count">{runs.length} runs</span>
      </button>
      {logOpen && (
        <ul className="lx-runlog">
          {runs.map((r, i) => (
            <li key={i} className="lx-run">
              <LxDot state={r.result === 'ok' ? 'ok' : r.result === 'partial' ? 'conflict' : 'fail'} />
              <span className="lx-run__d">{r.d}</span>
              <span className="lx-run__note">{r.note}</span>
              <a className="lx-run__link" href="#" onClick={(e) => e.preventDefault()}>View changes</a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/* ===== Shared: source / used-by rows ===== */
function LxSourceRow({ src, status, onReview }) {
  return (
    <li className={`lx-src ${status.state !== 'ok' ? 'lx-src--' + status.state : ''}`}>
      <span className="lx-src__ico"><LxFileIcon kind={src.kind} /></span>
      <div className="lx-src__main">
        <div className="lx-src__t">{src.t}</div>
        <div className="lx-src__s">
          <LxDot state={status.state} />
          <span>{status.label}</span>
        </div>
        {status.sub && <div className="lx-src__sub">{status.sub}</div>}
      </div>
      {status.review ? (
        <button type="button" className="lx-chip lx-chip--warn lx-chip--btn" onClick={() => onReview(src.t)}>Review {status.review}</button>
      ) : (
        <span className="lx-src__ext" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path></svg>
        </span>
      )}
    </li>
  );
}

function LxUsedRow({ u }) {
  return (
    <li className="lx-src">
      <span className="lx-src__ico"><LxFileIcon kind={u.kind} /></span>
      <div className="lx-src__main">
        <div className="lx-src__t">{u.t}</div>
        <div className="lx-src__s">
          <LxDot state={u.state === 'ok' ? 'ok' : 'stale'} />
          <span>{u.note}</span>
        </div>
      </div>
      <span className="lx-src__ext" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"></path></svg>
      </span>
    </li>
  );
}

/* ===== Shared: record node with output statuses ===== */
function LxRecordNode({ s, ctx, filterKey }) {
  const outputs = [
    { key: 'dashboard', label: 'Dashboard', state: 'ok', note: s.ranNow ? 'Updated just now' : 'Updated today 12:05 AM' },
    { key: 'report', label: 'Report', state: 'ok', note: s.ranNow ? 'Updated just now' : 'Updated today 12:05 AM' },
    { key: 'slide', label: 'Slide', state: s.ranNow ? 'ok' : 'stale', note: s.ranNow ? 'Refreshed just now' : 'Not refreshed since Mar 28 · pending changes affect 1 stat' },
  ].filter((o) => !filterKey || o.key === filterKey);
  return (
    <div className="lx-node lx-node--self">
      <div className="lx-node__head">
        <span className="lx-self__badge" aria-hidden="true">
          <svg viewBox="0 0 28 28" width="15" height="15" 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"></path></svg>
        </span>
        <div className="lx-node__headtxt">
          <div className="lx-node__t">Cedar Narrows WST — Project Overview</div>
          <div className="lx-node__s">This record · {filterKey ? '1 output shown' : '3 outputs'}</div>
        </div>
      </div>
      <ul className="lx-outs">
        {outputs.map((o) => (
          <li key={o.key}>
            <button type="button" className="lx-out" onClick={() => ctx && ctx.setOutput && ctx.setOutput(o.key)} title={`Open ${o.label}`}>
              <LxDot state={o.state} />
              <span className="lx-out__t">{o.label}</span>
              <span className="lx-out__s">{o.note}</span>
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function LxConnector() {
  return (
    <div className="lx-conn" aria-hidden="true">
      <span className="lx-conn__line"></span>
      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
    </div>
  );
}

/* =========================================================================
   VARIANT A — Pipeline (vertical flow)
   ========================================================================= */
function LxVariantPipeline({ s, ctx, filterKey, visibleSources, visibleUsedBy, pendingBySrc, pendingCount, openReview }) {
  return (
    <React.Fragment>
      <section className="lx-group">
        <div className="lx-group__head">
          <span className="lx-group__t">Sources</span>
          <span className="lx-group__count">{visibleSources.length}</span>
          <span className="lx-group__via">files · via Egnyte sync</span>
        </div>
        <ul className="lx-list">
          {visibleSources.map((src) => (
            <LxSourceRow key={src.id} src={src} status={lxSourceStatus(src, pendingBySrc, s)} onReview={openReview} />
          ))}
        </ul>
      </section>

      <LxConnector />
      <LxAgentCard s={s} pendingCount={pendingCount} />
      <LxConnector />
      <LxRecordNode s={s} ctx={ctx} filterKey={filterKey} />
      <LxConnector />

      <section className="lx-group">
        <div className="lx-group__head">
          <span className="lx-group__t">Used by</span>
          <span className="lx-group__count">{visibleUsedBy.length}</span>
          <span className="lx-group__via">downstream records</span>
        </div>
        <ul className="lx-list">
          {visibleUsedBy.map((u) => <LxUsedRow key={u.t} u={u} />)}
        </ul>
      </section>
    </React.Fragment>
  );
}

/* =========================================================================
   MAIN PANEL
   ========================================================================= */
function RecordLineagePanel({ onClose }) {
  const ctx = useOutput();
  const su = useSourceUpdates();
  const s = useLxStore();
  const output = (ctx && ctx.output) || 'dashboard';
  const isEmpty = ctx && ctx.isEmpty;
  const [scope, setScope] = useStateLX(labelFromKey(output));

  if (isEmpty) {
    return (
      <PanelShell title="Data Lineage" onClose={onClose} className="rp--wide">
        <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, this panel becomes the control surface for the whole pipeline — sources, agent runs, and downstream records.</div>
        </div>
      </PanelShell>
    );
  }

  // Live pending counts from the Source Updates flow, grouped per file.
  const updates = (su && su.updates) || [];
  const pendingBySrc = {};
  updates.forEach((u) => {
    if (u.status === 'pending') pendingBySrc[u.sourceFile] = (pendingBySrc[u.sourceFile] || 0) + 1;
  });
  const pendingCount = (su && su.pendingCount) || 0;
  const staleCount = s.ranNow ? 0 : 1;

  const filterKey = keyFromLabel(scope);
  const visibleSources = filterKey ? LX_SOURCES.filter((x) => x.outputs.includes(filterKey)) : LX_SOURCES;
  const visibleUsedBy = filterKey ? LX_USED_BY.filter((x) => x.outputs.includes(filterKey)) : LX_USED_BY;

  const openReview = (file) => {
    onClose();
    if (su) su.openPanel(typeof file === 'string' ? file : undefined);
  };
  const editInstructions = () => {
    onClose();
    if (ctx && ctx.onOpenAgentChat) ctx.onOpenAgentChat();
  };

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

  const footer = (
    <div className="lx-foot">
      <div className="lx-foot__sched">
        <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="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
        <span>Runs nightly at 12:00 AM</span>
        <a href="#" className="lx-linkbtn" onClick={(e) => e.preventDefault()}>Edit schedule</a>
      </div>
      <div className="lx-foot__btns">
        <button type="button" className="lx-btn lx-btn--ghost" onClick={editInstructions}>Edit instructions</button>
        <button type="button" className="lx-btn lx-btn--primary" onClick={lxRunAgentNow} disabled={s.running}>
          {s.running ? 'Running…' : 'Re-run agent now'}
        </button>
      </div>
    </div>
  );

  const variantProps = { s, ctx, filterKey, visibleSources, visibleUsedBy, pendingBySrc, pendingCount, staleCount, openReview };

  return (
    <PanelShell title="Data Lineage" onClose={onClose} toolbar={toolbar} footer={footer} className="rp--wide">
      <div className="lx" data-variant={s.variant}>
        <LxHealth pendingCount={pendingCount} staleCount={staleCount} s={s} onReview={openReview} />
        <LxVariantPipeline {...variantProps} />
      </div>
    </PanelShell>
  );
}

/* =========================================================================
   PROBLEM BANNER — shown above the record only when the pipeline needs
   attention (pending review / unprocessed sources). Quiet otherwise.
   ========================================================================= */
function LineageProblemBanner() {
  const ctx = useOutput();
  const su = useSourceUpdates();
  const s = useLxStore();
  if (!ctx || !su) return null;
  // Only meaningful on the demo record that actually has tracked updates.
  const isDemo = (su.allCount || 0) > 0;
  const pendingCount = su.pendingCount || 0;
  const staleCount = isDemo && !s.ranNow ? 1 : 0;
  if (s.bannerDismissed || (pendingCount === 0 && staleCount === 0)) return null;

  const bits = [];
  if (pendingCount > 0) bits.push(`${pendingCount} field ${pendingCount === 1 ? 'change' : 'changes'} pending review`);
  if (staleCount > 0) bits.push('1 source not processed');

  return (
    <div className="lxb" role="status">
      <span className="lxb__ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg>
      </span>
      <div className="lxb__txt">
        <strong>Data pipeline needs attention</strong>
        <span className="lxb__sep">—</span>
        <span>{bits.join(' · ')}</span>
        <span className="lxb__chain">Egnyte → AI Agent → This record · last run {s.ranNow ? 'just now' : 'today 12:05 AM'}</span>
      </div>
      <div className="lxb__actions">
        {pendingCount > 0 && (
          <button type="button" className="lxb__btn lxb__btn--primary" onClick={() => su.openPanel()}>Review changes</button>
        )}
        <button type="button" className="lxb__btn" onClick={() => ctx.setOpenPanel('lineage')}>View lineage</button>
        <button type="button" className="lxb__x" aria-label="Dismiss" onClick={() => lxStore.set({ bannerDismissed: true })}>
          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12"></path></svg>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, {
  RecordLineagePanel, // overrides the legacy panel from record_panels.jsx
  LineageProblemBanner,
});