// Source Updates flow.
// When an upstream source (e.g. an Excel workbook) is edited, AI detects which
// fields in this Record changed and surfaces them as pending updates that the
// user can Accept or Decline — per-field, or in bulk per source.
//
// Components exported on window:
//   SourceUpdatesProvider   wraps a Record subtree; holds pending state
//   useSourceUpdates        access full context
//   useSourceUpdate(id)     hook per single update
//   SourceUpdatedBadge      indicator pill/dot in the record header
//   SourceUpdatedDot        inline marker on a changed value
//   StatTileWithUpdate      drop-in StatTile wrapper that handles the
//                           pending/accepted/declined value display
//   RecordSourceUpdatesPanel side panel listing all pending changes

const { useState: useStateSU, useContext: useContextSU, useMemo: useMemoSU,
  useEffect: useEffectSU, useRef: useRefSU, createContext: createContextSU } = React;

/* ===== Mock data: what AI detected ===== */

const SU_SEED_UPDATES = [
  {
    id: 'u-lti',
    sourceFile: 'Safety-Stats-March-2026.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: KPIs · Row 4',
    sourceBy: 'Vera Hanna',
    sourceAgo: '12 min ago',
    field: 'Lost-time incidents (March)',
    location: 'Safety KPIs',
    oldValue: '0',
    newValue: '1',
    affectedOutputs: ['dashboard', 'report'],
    status: 'pending',
  },
  {
    id: 'u-hrs',
    sourceFile: 'Safety-Stats-March-2026.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: KPIs · Row 7',
    sourceBy: 'Vera Hanna',
    sourceAgo: '12 min ago',
    field: 'Hours worked (March)',
    location: 'Safety KPIs',
    oldValue: '20,407',
    newValue: '20,612',
    affectedOutputs: ['dashboard'],
    status: 'pending',
  },
  {
    id: 'u-nlti',
    sourceFile: 'Safety-Stats-March-2026.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: KPIs · Row 11',
    sourceBy: 'Vera Hanna',
    sourceAgo: '12 min ago',
    field: 'NLTI rate (March)',
    location: 'Safety KPIs',
    oldValue: '0.00',
    newValue: '4.85',
    affectedOutputs: ['dashboard', 'report', 'slide'],
    status: 'pending',
  },
  {
    id: 'u-pipe',
    sourceFile: 'AWST_Pipe_Install_Tracker.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: Joints · Cell B142',
    sourceBy: 'Proxa AI auto-extract',
    sourceAgo: '1 hr ago',
    field: 'Welded pipe installed (PTD)',
    location: 'Pipe installation · Tunnel pipe progress',
    oldValue: '380 m',
    newValue: '412 m',
    affectedOutputs: ['dashboard', 'report', 'slide'],
    status: 'pending',
  },
  {
    id: 'u-weldqc',
    sourceFile: 'AWST_Pipe_Install_Tracker.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: QC · Row 8',
    sourceBy: 'Proxa AI auto-extract',
    sourceAgo: '1 hr ago',
    field: 'Weld QC acceptance rate',
    location: 'Pipe installation',
    oldValue: '96.4%',
    newValue: '97.1%',
    affectedOutputs: ['dashboard', 'report'],
    status: 'pending',
  },
  {
    id: 'u-eac',
    sourceFile: 'Cost-Tracker-March-2026.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: Summary · Row 3',
    sourceBy: 'James Anderson',
    sourceAgo: '2 hrs ago',
    field: 'Cost @ Completion (EAC)',
    location: 'Financial position',
    oldValue: '$312M',
    newValue: '$308M',
    affectedOutputs: ['dashboard', 'report', 'slide'],
    status: 'pending',
  },
  {
    id: 'u-pco008',
    sourceFile: 'AWST_Commercial_Register.xlsx',
    sourceKind: 'xlsx',
    sourcePages: 'Sheet: Open items · Row 8',
    sourceBy: 'James Anderson',
    sourceAgo: '2 hrs ago',
    field: 'PCO-008 status',
    location: 'Open commercial items',
    oldValue: 'In negotiation',
    newValue: 'Partial payment agreed',
    affectedOutputs: ['dashboard', 'report'],
    status: 'pending',
  },
];

/* ===== Context ===== */

const SourceUpdatesContext = createContextSU(null);

function SourceUpdatesProvider({ children, initialUpdates }) {
  const seed = Array.isArray(initialUpdates) ? initialUpdates : SU_SEED_UPDATES;
  const [updates, setUpdates] = useStateSU(seed);
  const [panelOpen, setPanelOpen] = useStateSU(false);
  // Optional filter: a specific source file name, or 'All sources'.
  const [sourceFilter, setSourceFilter] = useStateSU('All sources');
  // Track recently-resolved ids so we can flash a highlight in the dashboard.
  const [flashIds, setFlashIds] = useStateSU([]);

  const setStatus = (id, status) => {
    setUpdates((arr) => arr.map((u) => (u.id === id ? { ...u, status } : u)));
    setFlashIds((arr) => [...arr, id]);
    setTimeout(() => {
      setFlashIds((arr) => arr.filter((x) => x !== id));
    }, 1600);
  };

  const accept = (id) => setStatus(id, 'accepted');
  const decline = (id) => setStatus(id, 'declined');
  const undo = (id) => setUpdates((arr) => arr.map((u) => (u.id === id ? { ...u, status: 'pending' } : u)));

  const acceptAll = () => updates.forEach((u) => { if (u.status === 'pending') accept(u.id); });
  const declineAll = () => updates.forEach((u) => { if (u.status === 'pending') decline(u.id); });

  // Reset entirely — useful for demo to replay
  const reset = () => setUpdates(seed.map((u) => ({ ...u })));

  const pendingCount = updates.filter((u) => u.status === 'pending').length;
  const hasAnyUnresolved = pendingCount > 0;
  const allCount = updates.length;
  const resolvedCount = updates.filter((u) => u.status !== 'pending').length;

  // Group by source file for the panel layout
  const grouped = useMemoSU(() => {
    const byFile = {};
    updates.forEach((u) => {
      if (!byFile[u.sourceFile]) byFile[u.sourceFile] = { sourceFile: u.sourceFile, sourceKind: u.sourceKind, sourceBy: u.sourceBy, sourceAgo: u.sourceAgo, items: [] };
      byFile[u.sourceFile].items.push(u);
    });
    return Object.values(byFile);
  }, [updates]);

  // Distinct source files, in first-seen order, for the filter dropdown.
  const sourceFiles = useMemoSU(() => {
    const seen = [];
    updates.forEach((u) => { if (!seen.includes(u.sourceFile)) seen.push(u.sourceFile); });
    return seen;
  }, [updates]);

  const value = {
    updates, grouped, sourceFiles,
    pendingCount, resolvedCount, allCount, hasAnyUnresolved,
    flashIds,
    accept, decline, acceptAll, declineAll, undo, reset,
    panelOpen, setPanelOpen,
    sourceFilter, setSourceFilter,
    // openPanel(file?) — optionally pre-select a source filter.
    openPanel: (file) => {
      setSourceFilter(file && sourceFiles.includes(file) ? file : 'All sources');
      setPanelOpen(true);
    },
    closePanel: () => setPanelOpen(false),
  };

  return <SourceUpdatesContext.Provider value={value}>{children}</SourceUpdatesContext.Provider>;
}

function useSourceUpdates() {
  const ctx = useContextSU(SourceUpdatesContext);
  if (!ctx) {
    // graceful no-op when not wrapped (e.g. on screens other than the record)
    return null;
  }
  return ctx;
}

function useSourceUpdate(id) {
  const ctx = useSourceUpdates();
  if (!ctx || !id) return null;
  return ctx.updates.find((u) => u.id === id) || null;
}

/* ===== Inline dot marker (used inside changed cells) ===== */

function SourceUpdatedDot({ update, title }) {
  const ctx = useSourceUpdates();
  if (!update || !ctx) return null;
  if (update.status !== 'pending') return null;
  const tip = title || `Source updated · ${update.oldValue} → ${update.newValue} · click to review`;
  return (
    <button
      type="button"
      className="su-dot"
      title={tip}
      aria-label={tip}
      onClick={(e) => { e.stopPropagation(); ctx.openPanel(); }}>
      <span className="su-dot__inner" aria-hidden="true" />
    </button>
  );
}

/* ===== StatTile wrapper that consumes a single update ===== */

function StatTileWithUpdate({ updateId, defaultValue, label, sub, tone }) {
  const ctx = useSourceUpdates();
  const showMarkers = false;
  const update = updateId ? (ctx ? ctx.updates.find((u) => u.id === updateId) : null) : null;
  const flashing = update && ctx && ctx.flashIds.includes(update.id);

  let shown = defaultValue;
  let stateClass = '';
  if (update) {
    if (update.status === 'accepted') {
      shown = update.newValue;
      stateClass = 'stat-tile--accepted';
    } else if (update.status === 'declined') {
      shown = update.oldValue;
      stateClass = 'stat-tile--declined';
    } else if (showMarkers) {
      shown = update.oldValue;
      stateClass = 'stat-tile--pending';
    } else {
      // markers off + pending: still show old value (no diff hint)
      shown = update.oldValue;
      stateClass = '';
    }
  }

  const showDot = update && update.status === 'pending' && showMarkers;
  const showGhost = update && update.status === 'pending' && showMarkers;

  return (
    <div className={`stat-tile ${tone ? `stat-tile--${tone}` : ''} ${stateClass} ${flashing ? 'is-flash' : ''}`}>
      <div className="stat-tile__label">
        <span className="stat-tile__labeltext">{label}</span>
        {showDot && <SourceUpdatedDot update={update} />}
      </div>
      <div className="stat-tile__value">
        {shown}
        {showGhost && (
          <span className="stat-tile__ghost" aria-hidden="true">→&nbsp;{update.newValue}</span>
        )}
      </div>
      {sub && <div className="stat-tile__sub">{sub}</div>}
    </div>
  );
}

/* ===== Indicator badge in the record header =====
   'pill'  — pill with count + label  e.g.  "↻ 3 updates"
*/

function SourceUpdatedBadge({ variant }) {
  const ctx = useSourceUpdates();
  const v = variant || 'pill';
  if (!ctx) return null;
  const { pendingCount, openPanel } = ctx;

  // Hide entirely once everything is resolved
  if (pendingCount === 0) return null;

  if (v === 'dot') {
    return (
      <button
        type="button"
        className="su-badge su-badge--dot"
        onClick={openPanel}
        title={`${pendingCount} source ${pendingCount === 1 ? 'update' : 'updates'} · click to review`}
        aria-label="Review source updates">
        <span className="su-badge__dot" aria-hidden="true" />
        <span className="su-badge__dotcount">{pendingCount}</span>
      </button>
    );
  }

  return (
    <button
      type="button"
      className="su-badge su-badge--pill"
      onClick={openPanel}
      aria-label="Review source updates">
      <span className="su-badge__ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 12a9 9 0 0 1 15.5-6.4L21 8" />
          <path d="M21 3v5h-5" />
          <path d="M21 12a9 9 0 0 1-15.5 6.4L3 16" />
          <path d="M3 21v-5h5" />
        </svg>
      </span>
      <span className="su-badge__count">{pendingCount}</span>
      <span className="su-badge__label">{pendingCount === 1 ? 'update' : 'updates'}</span>
      <span className="su-badge__pulse" aria-hidden="true" />
    </button>
  );
}

/* ===== Panel shell (mirrors RP styles from record_panels.jsx) ===== */

function SUPanelShell({ title, onClose, toolbar, footer, children }) {
  useEffectSU(() => {
    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 su-panel" 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">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </header>
        {toolbar && <div className="rp__toolbar su-panel__toolbar">{toolbar}</div>}
        <div className="rp__body">{children}</div>
        {footer && <div className="rp__foot su-panel__foot">{footer}</div>}
      </aside>
    </React.Fragment>
  );
}

/* ===== Per-row Accept/Decline/Undo ===== */

function SUFieldRow({ update }) {
  const ctx = useSourceUpdates();
  if (!ctx) return null;

  const pending = update.status === 'pending';
  const accepted = update.status === 'accepted';
  const declined = update.status === 'declined';
  const outputs = update.affectedOutputs || [];
  const OUT_LABEL = { dashboard: 'Dashboard', report: 'Report', slide: 'Slide' };

  return (
    <div className={`su-row su-row--${update.status}`}>
      <div className="su-row__main">
        <div className="su-row__head">
          <div className="su-row__field">{update.field}</div>
          <div className="su-row__loc">{update.location}</div>
        </div>

        <div className="su-row__diff">
          <span className="su-row__was" aria-label="Previous value">
            <span className="su-row__chiplabel">was</span>
            <span className="su-row__chipval">{update.oldValue}</span>
          </span>
          <span className="su-row__arrow" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
          <span className={`su-row__now ${accepted ? 'is-final' : ''} ${declined ? 'is-rejected' : ''}`} aria-label="New value">
            <span className="su-row__chiplabel">now</span>
            <span className="su-row__chipval">{update.newValue}</span>
          </span>
        </div>

        {outputs.length > 0 && (
          <div className="su-row__affects">
            <span className="su-row__affectslabel">Affects:</span>
            <span className="su-row__affectslist">
              {outputs.map((o) => OUT_LABEL[o] || o).join(', ')}
            </span>
          </div>
        )}
      </div>

      <div className="su-row__actions">
        {pending && (
          <React.Fragment>
            <button type="button" className="su-btn su-btn--decline" onClick={() => ctx.decline(update.id)}>Decline</button>
            <button type="button" className="su-btn su-btn--accept"  onClick={() => ctx.accept(update.id)}>Accept</button>
          </React.Fragment>
        )}
        {!pending && (
          <div className="su-row__resolved">
            <span className={`su-row__resolvedtag su-row__resolvedtag--${update.status}`}>
              {accepted ? (
                <React.Fragment>
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                  Accepted
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
                  Declined
                </React.Fragment>
              )}
            </span>
            <button type="button" className="su-undo" onClick={() => ctx.undo(update.id)}>Undo</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ===== Source group card ===== */

function SUSourceGroup({ group }) {
  const ctx = useSourceUpdates();
  if (!ctx) return null;

  const pendingItems = group.items.filter((u) => u.status === 'pending');
  const groupAcceptAll = () => pendingItems.forEach((u) => ctx.accept(u.id));
  const groupDeclineAll = () => pendingItems.forEach((u) => ctx.decline(u.id));

  return (
    <section className="su-group">
      <header className="su-group__head">
        <div className="su-group__fileico" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" 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>
        </div>
        <div className="su-group__titles">
          <div className="su-group__file">{group.sourceFile}</div>
          <div className="su-group__meta">
            Updated by {group.sourceBy} · {group.sourceAgo}
            <span className="su-group__dot">·</span>
            <span>{group.items.length} {group.items.length === 1 ? 'change' : 'changes'}</span>
          </div>
        </div>
        {pendingItems.length > 1 && (
          <div className="su-group__bulk">
            <button type="button" className="su-linkbtn" onClick={groupDeclineAll}>Decline all</button>
            <button type="button" className="su-linkbtn su-linkbtn--strong" onClick={groupAcceptAll}>Accept all</button>
          </div>
        )}
      </header>

      <div className="su-group__rows">
        {group.items.map((u) => <SUFieldRow key={u.id} update={u} />)}
      </div>
    </section>
  );
}

/* ===== Main panel ===== */

function RecordSourceUpdatesPanel({ onClose }) {
  const ctx = useSourceUpdates();
  if (!ctx) return null;

  const { grouped, pendingCount, resolvedCount, allCount, acceptAll, declineAll, reset,
    sourceFiles, sourceFilter, setSourceFilter } = ctx;

  const filterActive = sourceFilter && sourceFilter !== 'All sources';
  const visibleGroups = filterActive ? grouped.filter((g) => g.sourceFile === sourceFilter) : grouped;
  const filterOptions = ['All sources'].concat(sourceFiles);

  // Counts scoped to the current filter (drives the summary line).
  const scopedItems = visibleGroups.reduce((arr, g) => arr.concat(g.items), []);
  const scopedPending = scopedItems.filter((u) => u.status === 'pending').length;
  const scopedResolved = scopedItems.length - scopedPending;

  const toolbar = (
    <div className="su-panel__bar">
      <FilterSelect value={sourceFilter} onChange={setSourceFilter} options={filterOptions} />
      <div className="su-panel__bulk">
        {scopedPending > 0 ? (
          <React.Fragment>
            <button type="button" className="su-btn su-btn--ghost" onClick={declineAll}>Decline all</button>
            <button type="button" className="su-btn su-btn--accept" onClick={acceptAll}>Accept all</button>
          </React.Fragment>
        ) : (
          <button type="button" className="su-btn su-btn--ghost" onClick={reset}>Reset demo</button>
        )}
      </div>
    </div>
  );

  const summary = (
    <div className="su-panel__summaryline">
      {scopedPending > 0
        ? <React.Fragment><strong>{scopedPending}</strong> pending {scopedPending === 1 ? 'change' : 'changes'} · {scopedResolved} resolved{filterActive ? ' · in this source' : ''}</React.Fragment>
        : <React.Fragment>All {filterActive ? scopedItems.length : allCount} changes resolved{filterActive ? ' · in this source' : ''}</React.Fragment>}
      {filterActive && (
        <button type="button" className="su-linkbtn" onClick={() => setSourceFilter('All sources')}>Show all sources</button>
      )}
    </div>
  );

  const footer = (
    <div className="su-panel__footnote">
      <span className="su-panel__footico" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="12" height="12" 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>
      </span>
      Detected by Proxa AI · monitoring 7 sources across 3 outputs
    </div>
  );

  return (
    <SUPanelShell title="Source updates" onClose={onClose} toolbar={toolbar} footer={footer}>
      <div className="su-panel__intro">
        Upstream data has changed since this record was last updated. Review what's
        different and choose what to bring in.
      </div>
      {summary}
      <div className="su-panel__groups">
        {visibleGroups.length > 0
          ? visibleGroups.map((g) => <SUSourceGroup key={g.sourceFile} group={g} />)
          : <div className="su-panel__empty">No changes from this source.</div>}
      </div>
    </SUPanelShell>
  );
}

Object.assign(window, {
  SourceUpdatesProvider,
  useSourceUpdates,
  useSourceUpdate,
  SourceUpdatedBadge,
  SourceUpdatedDot,
  StatTileWithUpdate,
  RecordSourceUpdatesPanel,
});