// Inline edit mode for the Project Overview record.
//
// Wrap any semantic block in <EditableBlock fields={...} initialValues={...}>:
//   - Hover shows a soft halo + pencil affordance.
//   - Click opens a right-side Edit panel with a form whose fields write back
//     to the block live (no save button — "Saved" indicator).
//   - Fields can declare a `source` ({ file, pages, by, ago, agent, excerpts })
//     which renders as a pill under the input and a SOURCE TRACE popover on
//     hover.
//   - Fields can declare an `updateId` (also routable via `updates={{...}}`)
//     that ties them to an entry in the SourceUpdates context. When that
//     entry is pending, the chip shows a green pulsing dot; clicking the
//     chip reveals an inline was→now diff with Accept / Decline actions.
//   - When the user manually edits a field whose source value is locked in,
//     the chip switches to a "detached" state: muted, with an unlink icon
//     and a "Revert to source value" affordance that restores the original.
//
// Children may be either JSX or a render function (values) => JSX so that
// updates flow back into the rendered content immediately.

const {
  useState: useStateEM,
  useRef: useRefEM,
  useEffect: useEffectEM,
  useLayoutEffect: useLayoutEffectEM,
  useMemo: useMemoEM,
} = React;

/* ===== Icons (small, local) ===== */
function PencilIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 20h9" />
      <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
    </svg>
  );
}
function FileIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <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 2v6h6" />
      <path d="M9 13h6M9 17h4" />
    </svg>
  );
}
function XlsxIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="4" width="18" height="16" rx="2" />
      <path d="M3 10h18M3 15h18M9 4v16M15 4v16" />
    </svg>
  );
}
function SourceFileIcon({ kind, size = 13 }) {
  if (kind === 'xlsx' || kind === 'sheet') return <XlsxIcon size={size} />;
  return <FileIcon size={size} />;
}
function ExtIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <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>
  );
}
function RefreshIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <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>
  );
}
function CheckIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M20 6L9 17l-5-5" />
    </svg>
  );
}
function UnlinkIcon({ size = 13 }) {
  // Lucide "unlink": two C-shapes with a diagonal break
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M18.84 12.25l1.72-1.71a4.99 4.99 0 0 0-7.07-7.07l-1.71 1.71" />
      <path d="M5.16 11.75l-1.72 1.71a4.99 4.99 0 0 0 7.07 7.07l1.71-1.71" />
      <line x1="3" y1="3" x2="21" y2="21" />
    </svg>
  );
}
function RevertIcon({ size = 12 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 7v6h6" />
      <path d="M3 13a9 9 0 1 0 3-7L3 9" />
    </svg>
  );
}
function ArrowIcon({ size = 13 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  );
}

/* ===== Relative-time helper (for "Edited by you · 2m ago") ===== */
function fmtAgo(ts) {
  if (!ts) return '';
  const d = Date.now() - ts;
  if (d < 8000) return 'just now';
  if (d < 60_000) return Math.round(d / 1000) + 's ago';
  if (d < 3_600_000) return Math.round(d / 60_000) + 'm ago';
  if (d < 86_400_000) return Math.round(d / 3_600_000) + 'h ago';
  return Math.round(d / 86_400_000) + 'd ago';
}

/* ===== Source pages popover (hover) ===== */
function SourceTrace({ source }) {
  return (
    <div className="src-trace" role="tooltip" onClick={(e) => e.stopPropagation()}>
      <div className="src-trace__head">
        <div className="src-trace__headtop">
          <span className="src-trace__kicker">SOURCE TRACE</span>
          <span className="src-trace__ext" aria-hidden="true"><ExtIcon size={14} /></span>
        </div>
        <div className="src-trace__filerow">
          <span className="src-trace__fileico" aria-hidden="true"><SourceFileIcon kind={source.kind} size={14} /></span>
          <div className="src-trace__title">{source.file}</div>
        </div>
        <div className="src-trace__meta">{source.by} · {source.ago}</div>
      </div>

      <div className="src-trace__excerpts">
        {(source.excerpts || []).map((ex, i) => (
          <div key={i} className="src-trace__ex">
            <div className="src-trace__exlabel">{ex.label}</div>
            {ex.kind === 'table' ? (
              <div className="src-trace__table-wrap">
                <table className="src-trace__table">
                  {ex.headers && (
                    <thead>
                      <tr>
                        {ex.headers.map((h, j) => (
                          <th key={j} className={typeof ex.rows?.[0]?.[j] === 'number' ? 'r' : ''}>{h}</th>
                        ))}
                      </tr>
                    </thead>
                  )}
                  <tbody>
                    {(ex.rows || []).map((row, ri) => (
                      <tr key={ri} className={row.__highlight ? 'is-highlight' : ''}>
                        {row.map((cell, ci) => (
                          <td key={ci} className={typeof cell === 'number' ? 'r tnum' : ''}>{cell}</td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <p className="src-trace__extext">{ex.text}</p>
            )}
          </div>
        ))}
      </div>

      <div className="src-trace__foot">
        <span className="src-trace__footico"><RefreshIcon size={12} /></span>
        Extracted by {source.agent || 'node agent'} · {source.extractedAgo || '3 days ago'}
      </div>
    </div>
  );
}

/* ===== Source badge (pill under field) =====
   States:
   - normal:   attached, no update    → standard pill
   - updated:  pending source update  → standard pill + pulsing green dot,
                                        click opens inline accept/decline
   - detached: user has overridden    → muted pill, strikethrough on filename,
                                        unlink icon, "Edited by you · ago" +
                                        Revert to source value
   detached + updated can stack: muted pill with the dot still showing.
*/
function SourceBadge({
  source,
  detached = false,
  editedAt = null,
  updateId = null,
  onRevert,
  onAcceptUpdate,
  tick = 0,                 // re-render hint from parent for relative time
}) {
  const [hover, setHover] = useStateEM(false);
  const [coords, setCoords] = useStateEM({ top: 0, left: 0 });
  const [expanded, setExpanded] = useStateEM(false);
  const badgeRef = useRefEM(null);
  const wrapRef = useRefEM(null);
  const timer = useRefEM(null);

  // Pull update record from SourceUpdates context (if any)
  const useSourceUpdate = window.useSourceUpdate;
  const useSourceUpdates = window.useSourceUpdates;
  const update = useSourceUpdate ? useSourceUpdate(updateId) : null;
  const ctx = useSourceUpdates ? useSourceUpdates() : null;
  const hasPendingUpdate = !!(update && update.status === 'pending');

  // Auto-collapse if the update gets resolved elsewhere
  useEffectEM(() => {
    if (!hasPendingUpdate && expanded) setExpanded(false);
  }, [hasPendingUpdate, expanded]);

  const POPOVER_W = 320;
  const GAP = 12;

  const computePos = () => {
    if (!badgeRef.current) return;
    const r = badgeRef.current.getBoundingClientRect();
    const panel = document.querySelector('.ed-panel');
    const panelLeft = panel ? panel.getBoundingClientRect().left : r.left;
    let left = panelLeft - GAP - POPOVER_W;
    if (left < 8) left = 8;
    let top = r.top - 24;
    const maxTop = window.innerHeight - 420;
    if (top > maxTop) top = Math.max(8, maxTop);
    if (top < 8) top = 8;
    setCoords({ top, left });
  };

  const openHover = () => {
    // Don't open popover while inline expansion is showing — avoid double UI
    if (expanded) return;
    if (timer.current) clearTimeout(timer.current);
    computePos();
    setHover(true);
  };
  const closeHover = () => {
    timer.current = setTimeout(() => setHover(false), 80);
  };

  useEffectEM(() => () => { if (timer.current) clearTimeout(timer.current); }, []);

  const handleChipClick = (e) => {
    e.stopPropagation();
    if (!hasPendingUpdate) return;
    setHover(false);
    setExpanded((v) => !v);
  };

  const handleAccept = (e) => {
    e.stopPropagation();
    if (!update || !ctx) return;
    const newVal = update.newValue;
    ctx.accept(update.id);
    if (onAcceptUpdate) onAcceptUpdate(newVal);
    setExpanded(false);
  };
  const handleDecline = (e) => {
    e.stopPropagation();
    if (!update || !ctx) return;
    ctx.decline(update.id);
    setExpanded(false);
  };

  const handleRevert = (e) => {
    e.stopPropagation();
    if (onRevert) onRevert();
  };

  // For relative-time recomputation — ref the prop so React notices the tick
  void tick;

  return (
    <React.Fragment>
      <div
        ref={wrapRef}
        className="src-badge-wrap"
        data-detached={detached || undefined}
        data-updated={hasPendingUpdate || undefined}
        data-expanded={expanded || undefined}
        onMouseEnter={openHover}
        onMouseLeave={closeHover}>
        <div className="src-badge-row">
          <button
            ref={badgeRef}
            type="button"
            className="src-badge"
            onClick={handleChipClick}
            aria-label={`Source: ${source.file}${hasPendingUpdate ? ' · update available' : ''}${detached ? ' · detached' : ''}`}
            aria-expanded={hasPendingUpdate ? expanded : undefined}>
            <span className="src-badge__ico" aria-hidden="true">
              {detached ? <UnlinkIcon size={13} /> : <SourceFileIcon kind={source.kind} size={13} />}
            </span>
            <span className="src-badge__file">{source.file}</span>
            {source.pages && <span className="src-badge__pages">{source.pages}</span>}
            {hasPendingUpdate && (
              <span className="src-badge__updot" aria-hidden="true">
                <span className="src-badge__updot-pulse" />
              </span>
            )}
          </button>
        </div>

        {detached && (
          <div className="src-badge__detached-meta">
            <span className="src-badge__detached-text">
              Edited by you{editedAt ? ` · ${fmtAgo(editedAt)}` : ''}
            </span>
            <span className="src-badge__detached-sep" aria-hidden="true">·</span>
            <button
              type="button"
              className="src-badge__revert"
              onClick={handleRevert}>
              Undo
            </button>
          </div>
        )}

        {expanded && hasPendingUpdate && (
          <div className="src-badge__update" role="region" aria-label="Source update">
            <div className="src-badge__update-head">
              <span className="src-badge__update-ico" aria-hidden="true"><RefreshIcon size={12} /></span>
              <span className="src-badge__update-title">Source has a new value</span>
              <span className="src-badge__update-meta">· {update.sourceBy} · {update.sourceAgo}</span>
            </div>
            <div className="src-badge__update-diff">
              <span className="src-badge__update-was">
                <span className="src-badge__update-chiplabel">was</span>
                <span className="src-badge__update-chipval">{update.oldValue}</span>
              </span>
              <span className="src-badge__update-arrow" aria-hidden="true"><ArrowIcon size={12} /></span>
              <span className="src-badge__update-now">
                <span className="src-badge__update-chiplabel">now</span>
                <span className="src-badge__update-chipval">{update.newValue}</span>
              </span>
            </div>
            <div className="src-badge__update-actions">
              <button
                type="button"
                className="src-badge__update-btn src-badge__update-btn--decline"
                onClick={handleDecline}>
                Decline
              </button>
              <button
                type="button"
                className="src-badge__update-btn src-badge__update-btn--accept"
                onClick={handleAccept}>
                Accept
              </button>
            </div>
          </div>
        )}
      </div>

      {hover && ReactDOM.createPortal(
        <div
          className="src-trace-portal"
          style={{ top: coords.top, left: coords.left }}
          onMouseEnter={openHover}
          onMouseLeave={closeHover}
          onClick={(e) => e.stopPropagation()}>
          <SourceTrace source={source} />
        </div>,
        document.body
      )}
    </React.Fragment>
  );
}

/* ===== Auto-growing textarea (no inner scroll) ===== */
function AutoTextarea({ id, value, onChange, className, rows = 4, spellCheck = 'false' }) {
  const ref = useRefEM(null);

  const resize = () => {
    const el = ref.current;
    if (!el) return;
    el.style.height = 'auto';
    // +2 to swallow any rounding so we never trigger an internal scrollbar
    el.style.height = (el.scrollHeight + 2) + 'px';
  };

  useLayoutEffectEM(() => { resize(); }, [value]);
  useEffectEM(() => {
    // Re-fit on window resize (width changes wrap differently)
    const onR = () => resize();
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);

  return (
    <textarea
      ref={ref}
      id={id}
      className={className}
      rows={rows}
      value={value ?? ''}
      onChange={onChange}
      spellCheck={spellCheck}
      onInput={resize} />
  );
}

/* ===== Right-side edit panel ===== */
function EditFieldsPanel({ fields, values, sourceValues, editedAt, onChange, onRevert, onAcceptUpdate, onClose }) {
  const [savedTick, setSavedTick] = useStateEM(0);
  const [saving, setSaving] = useStateEM(false);
  const [timeTick, setTimeTick] = useStateEM(0); // drives fmtAgo refresh
  const tHide = useRefEM(null);

  useEffectEM(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  // Tick relative-time once every 15s
  useEffectEM(() => {
    const t = setInterval(() => setTimeTick((n) => n + 1), 15000);
    return () => clearInterval(t);
  }, []);

  const flashSaving = () => {
    setSaving(true);
    if (tHide.current) clearTimeout(tHide.current);
    tHide.current = setTimeout(() => {
      setSaving(false);
      setSavedTick((n) => n + 1);
    }, 420);
  };

  const handleChange = (id, v) => {
    onChange(id, v);
    flashSaving();
  };

  return ReactDOM.createPortal(
    <React.Fragment>
      <div className="ed-scrim" onClick={(e) => { e.stopPropagation(); onClose(); }} />
      <aside
        className="ed-panel"
        role="dialog"
        aria-label="Edit block"
        onClick={(e) => e.stopPropagation()}
        onMouseDown={(e) => e.stopPropagation()}>
        <header className="ed-panel__head">
          <div className="ed-panel__title">Edit</div>
          <div className="ed-panel__head-right">
            <span className={`ed-panel__saved ${saving ? 'is-saving' : ''}`} key={savedTick}>
              {saving ? (
                <React.Fragment>
                  <span className="ed-panel__saving-dot" aria-hidden="true" />
                  Saving…
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <span className="ed-panel__saved-ico"><CheckIcon size={12} /></span>
                  Saved
                </React.Fragment>
              )}
            </span>
            <button
              className="iconbtn ed-panel__close"
              onClick={(e) => { e.stopPropagation(); 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>
          </div>
        </header>

        <div className="ed-panel__body">
          {fields.map((f) => {
            const detached = !!f.source && (values[f.id] ?? '') !== (sourceValues[f.id] ?? '');
            return (
              <div key={f.id} className={`ed-field ${detached ? 'ed-field--detached' : ''}`}>
                <label className="ed-field__label" htmlFor={`ed-${f.id}`}>{f.label}</label>
                {f.kind === 'textarea' ? (
                  <AutoTextarea
                    id={`ed-${f.id}`}
                    className="ed-field__input ed-field__input--ta"
                    rows={f.rows || 4}
                    value={values[f.id] ?? ''}
                    onChange={(e) => handleChange(f.id, e.target.value)} />
                ) : (
                  <input
                    id={`ed-${f.id}`}
                    className="ed-field__input"
                    type="text"
                    value={values[f.id] ?? ''}
                    onChange={(e) => handleChange(f.id, e.target.value)}
                    spellCheck="false" />
                )}
                {f.source && (
                  <SourceBadge
                    source={f.source}
                    detached={detached}
                    editedAt={editedAt[f.id]}
                    updateId={f.updateId}
                    onRevert={() => onRevert(f.id)}
                    onAcceptUpdate={(newVal) => onAcceptUpdate(f.id, newVal)}
                    tick={timeTick} />
                )}
                {f.hint && !f.source && <div className="ed-field__hint">{f.hint}</div>}
              </div>
            );
          })}
        </div>
      </aside>
    </React.Fragment>,
    document.body
  );
}

/* ===== EditableBlock — wraps content + adds hover/edit affordance ===== */
function EditableBlock({
  fields = [],
  initialValues,
  sources = {},
  updates = {},
  children,
  className = '',
  pencilAlign = 'top-right',
}) {
  // Resolve defaults once at mount
  const initialDefaults = useMemoEM(() => {
    if (initialValues) return { ...initialValues };
    const out = {};
    fields.forEach((f) => { out[f.id] = f.default ?? ''; });
    return out;
  }, []);

  const [values, setValues] = useStateEM(initialDefaults);
  // sourceValues = the canonical "what's currently lined up with the source"
  // for each field. Starts equal to initial defaults. Moves when a source
  // update is accepted for that field. Diverges from `values` whenever the
  // user manually edits — that divergence is what flags "detached".
  const [sourceValues, setSourceValues] = useStateEM(initialDefaults);
  const [editedAt, setEditedAt] = useStateEM({});
  const [editing, setEditing] = useStateEM(false);

  // Decorate fields with source + updateId from sibling props
  const decoratedFields = useMemoEM(() => fields.map((f) => {
    const out = { ...f };
    if (!out.source && sources[f.id]) out.source = sources[f.id];
    if (!out.updateId && updates[f.id]) out.updateId = updates[f.id];
    return out;
  }), [fields, sources, updates]);

  // Pull source-updates context (may be null outside Record)
  const useSourceUpdates = window.useSourceUpdates;
  const ctx = useSourceUpdates ? useSourceUpdates() : null;

  // Sync when an update is accepted elsewhere (e.g. the global panel) so the
  // input doesn't show a stale value. We track which updates we've already
  // applied so we don't fight the user's subsequent edits.
  const syncedRef = useRefEM({});
  useEffectEM(() => {
    if (!ctx) return;
    decoratedFields.forEach((f) => {
      if (!f.updateId) return;
      const u = ctx.updates.find((x) => x.id === f.updateId);
      if (!u) return;

      if (u.status === 'accepted' && !syncedRef.current[f.updateId]) {
        syncedRef.current[f.updateId] = true;
        setSourceValues((sv) => {
          const prev = sv[f.id];
          // Only sync if we're still on the old source value
          if (prev !== u.oldValue && prev !== u.newValue) return sv;
          // If user hasn't detached, also move the visible value
          setValues((v) => {
            if (v[f.id] === prev) {
              setEditedAt((e) => ({ ...e, [f.id]: null }));
              return { ...v, [f.id]: u.newValue };
            }
            return v;
          });
          return { ...sv, [f.id]: u.newValue };
        });
      } else if (u.status !== 'accepted' && syncedRef.current[f.updateId]) {
        // undone — allow re-sync next time it accepts
        syncedRef.current[f.updateId] = false;
      }
    });
  }, [ctx?.updates, decoratedFields]);

  const update = (id, v) => {
    setValues((s) => ({ ...s, [id]: v }));
    setEditedAt((s) => {
      const sv = sourceValues[id];
      // Reverting to source via typing also clears "edited" stamp
      if ((v ?? '') === (sv ?? '')) return { ...s, [id]: null };
      return { ...s, [id]: Date.now() };
    });
  };

  const revert = (id) => {
    setValues((s) => ({ ...s, [id]: sourceValues[id] }));
    setEditedAt((s) => ({ ...s, [id]: null }));
  };

  // Accept an inline update for a specific field — bumps sourceValue + value
  const acceptUpdate = (id, newVal) => {
    setSourceValues((s) => ({ ...s, [id]: newVal }));
    setValues((s) => ({ ...s, [id]: newVal }));
    setEditedAt((s) => ({ ...s, [id]: null }));
  };

  const content = typeof children === 'function' ? children(values) : children;

  const open = (e) => {
    if (e) e.stopPropagation();
    setEditing(true);
  };
  const onKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
      e.preventDefault();
      setEditing(true);
    }
  };

  return (
    <div
      className={`editable ${className} ${editing ? 'is-editing' : ''} ed-pencil--${pencilAlign}`}
      onClick={open}
      onKeyDown={onKeyDown}
      role="button"
      tabIndex={0}
      aria-label="Edit block">
      <div className="editable__content">{content}</div>
      <button
        type="button"
        className="editable__pencil"
        aria-label="Edit"
        onClick={open}
        tabIndex={-1}>
        <PencilIcon size={13} />
      </button>
      {editing && (
        <EditFieldsPanel
          fields={decoratedFields}
          values={values}
          sourceValues={sourceValues}
          editedAt={editedAt}
          onChange={update}
          onRevert={revert}
          onAcceptUpdate={acceptUpdate}
          onClose={() => setEditing(false)} />
      )}
    </div>
  );
}

Object.assign(window, {
  EditableBlock,
  SourceBadge,
  SourceTrace,
  AutoTextarea,
});