/* global React, V2Icon */ const { useState: useStateE } = React; function V2Editor({ draft, ai, onChangeBody, onSubmit, onDiscard, onCollapse, canCollapse, }) { const [showSource, setShowSource] = useStateE(false); const isReady = draft.state === 'ai_draft_ready' || draft.state === 'user_reviewed'; const polished = ai?.polished; const body = draft.body || polished; return (

{/* Status banner — AI-attributed */} {isReady && (

AI draft ready · review and edit before submitting

Generated from your source text + 6 patient context items

)} {showSource && (

Your source text · kept verbatim

{draft.sourceText || '(empty)'}

)} {/* Document */}

{/* Doc header */}

{draft.type} note · Day {draft.day || 3}

Started {draft.startedAt} · {draft.author || 'Dr. R. Patel'}

{isReady ? 'AI Draft · Editable' : 'Draft'}

{body ? ( <> onChangeBody({ plan: items })} /> ) : ( )}

{/* Footer actions */}

{canCollapse && ( )}

Autosaved

); } function EditableSection({ title, value, field, onChange }) { return (

{title}

onChange({ [field]: e.target.value })}
        rows={Math.max(2, Math.ceil(((value || '').length) / 70))}
        style={{
          width: '100%', resize: 'vertical',
          border: '1px solid transparent',
          background: 'transparent',
          padding: '4px 6px', borderRadius: 6,
          fontSize: 13, lineHeight: 1.55,
          color: 'var(--sage-800)',
          fontFamily: 'var(--font-sans)',
          outline: 0,
          minHeight: 28,
        }}
        onFocus={e => { e.target.style.background = 'var(--sage-50)'; e.target.style.borderColor = 'var(--sage-200)'; }}
        onBlur={e => { e.target.style.background = 'transparent'; e.target.style.borderColor = 'transparent'; }}
      />
    </div>
  );
}

function EditableList({ title, items, onChange }) {
  function update(i, val) {
    const next = items.slice();
    next[i] = val;
    onChange(next);
  }
  function remove(i) {
    onChange(items.filter((_, idx) => idx !== i));
  }
  function add() {
    onChange([...items, '']);
  }
  return (
    <div style={{ marginBottom: 8 }}>
      <h4 style={{
        margin: 0, marginBottom: 6,
        fontSize: 11, fontWeight: 700,
        color: 'var(--sage-500)',
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>{title}</h4>
      <ol style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
        {items.map((it, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 8,
            marginBottom: 4,
          }}>
            <span style={{
              flexShrink: 0,
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--sage-400)',
              padding: '4px 0',
              minWidth: 18,
            }}>{i + 1}.</span>
            <input
              value={it}
              onChange={e => update(i, e.target.value)}
              style={{
                flex: 1, border: '1px solid transparent',
                padding: '4px 6px', borderRadius: 6,
                background: 'transparent',
                fontSize: 13, color: 'var(--sage-800)',
                fontFamily: 'var(--font-sans)',
                outline: 0,
              }}
              onFocus={e => { e.target.style.background = 'var(--sage-50)'; e.target.style.borderColor = 'var(--sage-200)'; }}
              onBlur={e => { e.target.style.background = 'transparent'; e.target.style.borderColor = 'transparent'; }}
            />
            <button
              onClick={() => remove(i)}
              aria-label="Remove plan item"
              style={{
                background: 'transparent', border: 0,
                padding: 4, color: 'var(--sage-400)',
                cursor: 'pointer', display: 'flex',
                opacity: 0.6,
              }}
            >
              <V2Icon name="x" size={11} />
            </button>
          </li>
        ))}
      </ol>
      <button
        onClick={add}
        style={{
          display: 'flex', alignItems: 'center', gap: 5,
          padding: '4px 8px', marginLeft: 26, marginTop: 2,
          border: 0, background: 'transparent',
          color: 'var(--sage-500)', cursor: 'pointer',
          fontSize: 11.5, fontFamily: 'var(--font-sans)',
        }}
      >
        <V2Icon name="plus" size={11} /> Add plan item
      </button>
    </div>
  );
}

function BlankBody({ onChange }) {
  return (
    <div style={{
      padding: 24, textAlign: 'center',
      background: 'var(--sage-50)', borderRadius: 8,
      border: '1px dashed var(--sage-300)',
      color: 'var(--sage-500)', fontSize: 13,
    }}>
      Empty draft. Type below or click <em>Analyse</em> in the composer to generate a structured note.
    </div>
  );
}

function ghostE(color) {
  return {
    display: 'flex', alignItems: 'center', gap: 5,
    padding: '6px 10px', borderRadius: 6,
    border: '1px solid var(--sage-200)',
    background: '#fff', color, cursor: 'pointer',
    fontSize: 11.5, fontWeight: 500,
    fontFamily: 'var(--font-sans)',
  };
}

window.V2Editor = V2Editor;