// QuickLog — a real action-logging modal.
//
// Opened from:
//   • the Insights screen's "Log something" / "Plan an action" buttons
//   • each Axis Detail page
//   • the dashboard CTA ribbon
//
// Behavior:
//   1. Pull actions filtered by axis from /api/v1/master-equation/actions
//   2. Let the user pick one; render a small dynamic form for the
//      action's `user_inputs` (signal IDs that require a numeric value)
//   3. POST to /api/v1/master-equation/me/signal with the form values
//   4. Trigger a vault refresh so every other component re-renders
//      with the new axis scores immediately.
window.QuickLog = function QuickLog({ axisCode, onClose }) {
  const [actions,    setActions]    = React.useState(null);
  const [selectedId, setSelectedId] = React.useState(null);
  const [inputs,     setInputs]     = React.useState({});
  const [busy,       setBusy]       = React.useState(false);
  const [error,      setError]      = React.useState(null);
  const [success,    setSuccess]    = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const j = await window.CHVault.actions(axisCode || null);
        if (dead) return;
        setActions(j.actions || []);
      } catch (e) {
        if (!dead) { setError(e.message || 'Could not load actions'); setActions([]); }
      }
    })();
    return () => { dead = true; };
  }, [axisCode]);

  const selected = (actions || []).find(a => a.id === selectedId);

  async function submit(e) {
    e.preventDefault();
    if (!selected) return;
    setBusy(true); setError(null); setSuccess(null);
    try {
      // Coerce inputs to numbers (the backend wants float).
      const numericInputs = {};
      for (const sig of (selected.user_inputs || [])) {
        const v = inputs[sig];
        if (v === undefined || v === '') throw new Error(`Enter a value for ${sig}`);
        const n = Number(v);
        if (!Number.isFinite(n)) throw new Error(`${sig} must be a number`);
        numericInputs[sig] = n;
      }
      const resp = await window.CHVault.logAction(selected.id, numericInputs);
      setSuccess(`Recorded · ${resp.persisted || 0} signal${(resp.persisted || 0) === 1 ? '' : 's'} written`);
      // Refresh global vault state so every component re-renders.
      await window.CHVault.refresh();
      setTimeout(() => onClose && onClose(), 1100);
    } catch (e) {
      setError(e.message || 'Logging failed');
    }
    setBusy(false);
  }

  const backdrop = { position: 'fixed', inset: 0, background: 'rgba(8,12,18,0.55)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999 };
  const panel = { width: '100%', maxWidth: 520, maxHeight: '85vh', overflow: 'auto', background: 'var(--bg-parchment)', borderRadius: 16, border: '1px solid var(--border-1)', padding: 28, boxShadow: 'var(--elev-2)' };
  const eyebrow = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-clinical)' };
  const cta = (disabled) => ({ flex: 1, padding: '12px 16px', borderRadius: 10, background: disabled ? 'var(--border-2)' : 'var(--accent-clinical)', color: 'white', border: 'none', fontWeight: 600, fontSize: 13.5, cursor: disabled ? 'wait' : 'pointer' });
  const cancel = { flex: 1, padding: '12px 16px', borderRadius: 10, background: 'transparent', color: 'var(--fg-1)', border: '1px solid var(--border-1)', fontSize: 13.5, cursor: 'pointer' };
  const input = { width: '100%', boxSizing: 'border-box', background: 'var(--bg-bone)', border: '1px solid var(--border-1)', borderRadius: 8, padding: '10px 12px', color: 'var(--fg-1)', fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none' };

  return (
    <div style={backdrop} onClick={(e) => { if (e.target === e.currentTarget) onClose && onClose(); }}>
      <div style={panel}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={eyebrow}>Quick log{axisCode ? ` · ${axisCode}` : ''}</div>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--fg-3)', fontSize: 18, cursor: 'pointer' }}>×</button>
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, margin: '4px 0 14px', color: 'var(--fg-1)' }}>
          {selected ? selected.name : 'What did you do?'}
        </h2>

        {error   && <div style={{ padding: 12, background: 'rgba(229,72,77,0.08)', border: '1px solid rgba(229,72,77,0.3)', borderRadius: 8, marginBottom: 14, color: 'var(--accent-coral)', fontSize: 13 }}>{error}</div>}
        {success && <div style={{ padding: 12, background: 'rgba(43,159,107,0.08)', border: '1px solid rgba(43,159,107,0.3)', borderRadius: 8, marginBottom: 14, color: 'var(--accent-clinical)', fontSize: 13 }}>{success}</div>}

        {actions === null && (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', fontSize: 11 }}>Loading actions…</div>
        )}

        {actions && !selected && actions.length === 0 && (
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--fg-2)', padding: 16 }}>
            No actions are mapped to this axis yet. Open the <a href="https://conceptualhealth.com/ui_kits/master-equation/action-axis-map.yaml" style={{ color: 'var(--accent-clinical)' }}>action-axis-map.yaml</a> to see the catalog.
          </div>
        )}

        {actions && !selected && actions.length > 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {actions.map(a => (
              <button key={a.id} onClick={() => { setSelectedId(a.id); setInputs({}); }} style={{ all: 'unset', display: 'block', cursor: 'pointer', padding: 14, borderRadius: 10, border: '1px solid var(--border-1)', background: 'var(--bg-bone)' }}>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--fg-1)' }}>{a.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--fg-3)', marginTop: 4 }}>
                  Axes: {a.axes.join(' · ')}
                  {a.hcr_lanes && a.hcr_lanes.length > 0 ? `  ·  earns ${a.hcr_lanes.join(', ')}` : ''}
                </div>
              </button>
            ))}
          </div>
        )}

        {selected && (
          <form onSubmit={submit}>
            <div style={{ fontSize: 13, color: 'var(--fg-2)', marginBottom: 14 }}>
              Writes {selected.signals.length} signal{selected.signals.length === 1 ? '' : 's'} to axes {selected.axes.join(', ')}.
              {selected.hcr_lanes && selected.hcr_lanes.length > 0 && ` Earns HCR in ${selected.hcr_lanes.join(' + ')}.`}
            </div>

            {(selected.user_inputs || []).length === 0 ? (
              <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--fg-2)', padding: '8px 0 16px' }}>
                No inputs required — this action is one-tap.
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 16 }}>
                {selected.user_inputs.map(sig => (
                  <label key={sig} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{sig}</span>
                    <input style={input} type="number" step="any" required value={inputs[sig] ?? ''} onChange={(e) => setInputs(p => ({ ...p, [sig]: e.target.value }))} />
                  </label>
                ))}
              </div>
            )}

            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
              <button type="button" style={cancel} onClick={() => setSelectedId(null)} disabled={busy}>← Back</button>
              <button type="submit" style={cta(busy)} disabled={busy}>{busy ? 'Logging…' : 'Log it →'}</button>
            </div>
          </form>
        )}

        <div style={{ marginTop: 18, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--fg-3)', textAlign: 'center' }}>
          Backed by master-equation/action-axis-map.yaml · X-CH-Source: web
        </div>
      </div>
    </div>
  );
};