// shared-ui.jsx — Shared UI primitives exported to window
const { useState, useRef, useEffect } = React;

const STATUS_STYLES = {
  Testing:       { bg: 'rgba(212,168,57,.15)',  color: '#d4a839' },
  Winner:        { bg: 'rgba(70,201,122,.15)',  color: '#46c97a' },
  Loser:         { bg: 'rgba(212,91,91,.15)',   color: '#d45b5b' },
  Draft:         { bg: 'rgba(106,106,136,.15)', color: '#6a6a88' },
  Scaling:       { bg: 'rgba(74,143,212,.15)',  color: '#4a8fd4' },
  Paused:        { bg: 'rgba(143,106,212,.15)', color: '#8f6ad4' },
  'Not Started': { bg: 'rgba(106,106,136,.1)',  color: '#50506a' },
  'In Progress': { bg: 'rgba(74,196,212,.15)',  color: '#4ac4d4' },
  Complete:      { bg: 'rgba(70,201,122,.15)',  color: '#46c97a' },
};

const TYPE_STYLES = {
  hook: { bg: 'rgba(212,168,57,.12)',  color: '#d4a839', label: 'Hook' },
  lead: { bg: 'rgba(74,143,212,.12)',  color: '#4a8fd4', label: 'Lead' },
  body: { bg: 'rgba(143,106,212,.12)', color: '#8f6ad4', label: 'Body' },
};

const COL_DOTS = {
  Testing: '#d4a839', Winner: '#46c97a', Loser: '#d45b5b',
  Draft: '#6a6a88', Scaling: '#4a8fd4', Paused: '#8f6ad4',
};

function StatusPill({ status }) {
  const s = STATUS_STYLES[status] || { bg: 'rgba(106,106,136,.1)', color: '#6a6a88' };
  return <span className="sp" style={{ background: s.bg, color: s.color }}>{status}</span>;
}

function TypeChip({ type }) {
  const t = TYPE_STYLES[type] || { bg: 'rgba(106,106,136,.12)', color: '#6a6a88', label: type };
  return <span className="type-chip" style={{ background: t.bg, color: t.color }}>{t.label}</span>;
}

function IdBadge({ id, onClick }) {
  return (
    <span
      className="idb"
      onClick={onClick}
      style={{ fontFamily: 'var(--sans)', ...(onClick ? { cursor: 'pointer', color: '#9090d4', textDecoration: 'underline' } : {}) }}
    >{id}</span>
  );
}

function Modal({ title, width = 640, onClose, footer, children }) {
  useEffect(() => {
    const h = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);
  return (
    <div className="overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal" style={{ width }}>
        <div className="modal-hd">
          <h2>{title}</h2>
          <button className="btn-icon" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-ft">{footer}</div>}
      </div>
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div>
      <label className="fl">{label}</label>
      {children}
    </div>
  );
}

function ConfirmModal({ message, onConfirm, onCancel }) {
  return (
    <div className="overlay" onClick={e => e.target === e.currentTarget && onCancel()}>
      <div className="modal" style={{ width: 380 }}>
        <div className="modal-hd"><h2>Confirm</h2><button className="btn-icon" onClick={onCancel}>✕</button></div>
        <div className="modal-body"><p style={{ color: '#a0a0c0', lineHeight: 1.6 }}>{message}</p></div>
        <div className="modal-ft">
          <button className="btn btn-ghost" onClick={onCancel}>Cancel</button>
          <button className="btn btn-danger-ghost" onClick={onConfirm}>Delete</button>
        </div>
      </div>
    </div>
  );
}

// Simple inline editable text
function InlineEdit({ value, onSave, style = {} }) {
  const [editing, setEditing] = useState(false);
  const [val, setVal] = useState(value);
  const ref = useRef();
  useEffect(() => setVal(value), [value]);
  const commit = () => { setEditing(false); if (val !== value) onSave(val); };
  if (!editing) return (
    <span
      style={{ cursor: 'text', ...style }}
      onClick={e => { e.stopPropagation(); setEditing(true); setTimeout(() => ref.current?.focus(), 0); }}
    >{value || <span style={{ color: '#3a3a58' }}>—</span>}</span>
  );
  return (
    <input
      ref={ref} className="inline-edit" value={val}
      onChange={e => setVal(e.target.value)}
      onBlur={commit}
      onKeyDown={e => { if (e.key === 'Enter') commit(); if (e.key === 'Escape') { setEditing(false); setVal(value); } }}
      onClick={e => e.stopPropagation()}
    />
  );
}

Object.assign(window, {
  STATUS_STYLES, TYPE_STYLES, COL_DOTS,
  StatusPill, TypeChip, IdBadge, Modal, Field, ConfirmModal, InlineEdit,
});