// Primus IQ — URL 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 UrlInputModal = ({ open, onClose, onConfirm }) => {
  const [url, setUrl] = React.useState('');
  const [title, setTitle] = React.useState('');
  React.useEffect(() => { if (open) { setUrl(''); setTitle(''); } }, [open]);
  if (!open) return null;
  const trimmed = url.trim();
  const ready = /^https?:\/\/.+/i.test(trimmed);
  const submit = () => { if (ready) onConfirm({ url: trimmed, title: title.trim() }); };

  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 a URL</h2>
        <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 3 }}>The link is saved as a reference for the research pipeline to fetch.</div>
      </div>
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <label style={spFieldLabel}>URL</label>
          <input
            value={url}
            onChange={e => setUrl(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') submit(); }}
            placeholder="https://example.com/report"
            style={spTextField}
          />
          {trimmed && !ready && <div style={{ fontSize: 11, color: 'var(--maroon)', marginTop: 5 }}>Enter a full URL starting with http:// or https://</div>}
        </div>
        <div>
          <label style={spFieldLabel}>Title <span style={{ textTransform: 'none', fontWeight: 400, color: 'var(--mute-2)' }}>(optional)</span></label>
          <input value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. World Bank GDP outlook" style={spTextField} />
        </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, {
  UrlInputModal,
});