// Primus IQ — Paste Text Input Modal

const spInputShell = (children, onClose) => (
  <div onClick={onClose} style={{
    position: 'absolute', inset: 0, zIndex: 70,
    background: 'rgba(26,22,20,0.42)', backdropFilter: 'blur(4px)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    animation: 'fadein 0.18s ease-out',
  }}>
    {children}
  </div>
);

const spFieldLabel = {
  fontSize: 11, fontWeight: 700, color: 'var(--mute)',
  letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6, display: 'block',
};
const spTextField = {
  width: '100%', height: 40, padding: '0 12px', borderRadius: 9,
  border: '1px solid var(--line-2)', fontSize: 13, fontFamily: 'inherit',
  outline: 'none', color: 'var(--ink)', background: 'white', boxSizing: 'border-box',
};

const TextInputModal = ({ open, onClose, onConfirm }) => {
  const [title, setTitle] = React.useState('');
  const [content, setContent] = React.useState('');
  React.useEffect(() => { if (open) { setTitle(''); setContent(''); } }, [open]);
  if (!open) return null;
  const ready = content.trim().length > 0;
  const submit = () => { if (ready) onConfirm({ title: title.trim() || 'Untitled note', content }); };

  return spInputShell((
    <div onClick={e => e.stopPropagation()} style={{
      width: 560, maxWidth: '94%', background: 'var(--bg-card)', borderRadius: 18,
      boxShadow: '0 30px 80px rgba(26,22,20,0.30), 0 0 0 1px var(--line)',
      animation: 'rise 0.22s ease-out', display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--line)' }}>
        <h2 className="serif" style={{ fontSize: 18, fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>Add text</h2>
        <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 3 }}>Paste notes or any text — it’s saved as a document you can tag.</div>
      </div>
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <label style={spFieldLabel}>Title</label>
          <input value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. CFO interview notes" style={spTextField} />
        </div>
        <div>
          <label style={spFieldLabel}>Content</label>
          <textarea
            value={content}
            onChange={e => setContent(e.target.value)}
            placeholder="Paste or type your text here…"
            style={{ ...spTextField, height: 200, padding: '10px 12px', resize: 'vertical', lineHeight: 1.5 }}
          />
        </div>
      </div>
      <div style={{ padding: '14px 24px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
        <button onClick={onClose} className="btn-secondary" style={{ height: 36 }}>Cancel</button>
        <button onClick={submit} disabled={!ready} className="btn-primary" style={{ height: 36, opacity: ready ? 1 : 0.5 }}>Continue</button>
      </div>
    </div>
  ), onClose);
};

Object.assign(window, {
  TextInputModal,
});