// Primus IQ — Add Sources Modal

const SourceBtn = ({ icon, label, onClick }) => (
  <button onClick={onClick} style={{
    padding: '10px 8px', borderRadius: 10,
    background: 'white', border: '1px solid var(--line-2)',
    cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
    fontFamily: 'inherit', transition: 'all 0.15s',
  }}
  onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--maroon-20)'; e.currentTarget.style.background = 'var(--maroon-wash)'; }}
  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line-2)';    e.currentTarget.style.background = 'white'; }}
  >
    {icon}
    <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)' }}>{label}</span>
  </button>
);

const UploadIcon = () => (
  <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
    <path d="M11 14V4M6.5 8.5L11 4l4.5 4.5" stroke="var(--maroon)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M4 14v3a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 18 17v-3" stroke="var(--maroon)" strokeWidth="1.6" strokeLinecap="round"/>
  </svg>
);
const TextIcon = () => (
  <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
    <rect x="3.5" y="3.5" width="15" height="15" rx="2.5" stroke="var(--maroon)" strokeWidth="1.6"/>
    <path d="M7 8h8M7 11h8M7 14h5" stroke="var(--maroon)" strokeWidth="1.6" strokeLinecap="round"/>
  </svg>
);
const UrlIcon = () => (
  <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
    <path d="M9 13a3.5 3.5 0 0 0 5 0l2.5-2.5a3.5 3.5 0 0 0-5-5L10 7"
          stroke="var(--maroon)" strokeWidth="1.6" strokeLinecap="round"/>
    <path d="M13 9a3.5 3.5 0 0 0-5 0l-2.5 2.5a3.5 3.5 0 0 0 5 5L12 15"
          stroke="var(--maroon)" strokeWidth="1.6" strokeLinecap="round"/>
  </svg>
);
const SharepointIcon = () => (
  <svg width="18" height="18" viewBox="0 0 22 22" fill="none">
    <path d="M11 3a8 8 0 0 1 0 16M11 3v16M3 11a8 8 0 0 0 16 0M3 11a8 8 0 0 1 16 0" stroke="var(--maroon)" strokeWidth="1.4"/>
  </svg>
);

const AddSourcesModal = ({ open, onClose, onFilesSelected, onSharePoint, onTextInput, onUrlInput, sourceContext = 'library' }) => {
  const [dragHover, setDragHover] = React.useState(false);
  if (!open) return null;
  const subtitle = sourceContext === 'library'
    ? 'Add to the firm-wide Library — everything is searchable across projects.'
    : 'Add to this project. Files only chat inside this project unless you share them.';

  const handleFiles = (files) => {
    onClose();
    onFilesSelected(files);
  };

  return (
    <ModalShell onClose={onClose} width={620} title="Add sources" subtitle={subtitle} headerBorder={false}>
      <div style={{ padding: '8px 24px 24px' }}>
        <label
          onDragEnter={e => { e.preventDefault(); setDragHover(true); }}
          onDragOver={e => { e.preventDefault(); setDragHover(true); }}
          onDragLeave={() => setDragHover(false)}
          onDrop={e => { e.preventDefault(); setDragHover(false); handleFiles(Array.from(e.dataTransfer.files)); }}
          style={{
            height: 240, borderRadius: 14,
            border: `1.5px dashed ${dragHover ? 'var(--maroon)' : 'var(--line-2)'}`,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', transition: 'all 0.15s',
            background: dragHover ? 'var(--maroon-wash)' : 'var(--bg-soft)',
            position: 'relative',
          }}
        >
          <input type="file" multiple onChange={e => handleFiles(Array.from(e.target.files))} style={{
            position: 'absolute', inset: 0, opacity: 0, cursor: 'pointer',
          }}/>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: 'white', border: '1px solid var(--line)',
            display: 'grid', placeItems: 'center',
            marginBottom: 12, boxShadow: 'var(--shadow-xs)',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M12 16V5M7 10l5-5 5 5" stroke="var(--maroon)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
              <path d="M4 16v2.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V16" stroke="var(--maroon)" strokeWidth="1.7" strokeLinecap="round"/>
            </svg>
          </div>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', marginBottom: 4 }}>Drop files here, or click to browse</div>
          <div style={{ fontSize: 12, color: 'var(--mute)' }}>PDF, DOCX, PPTX, XLSX, MP4, images · up to 50 files</div>
        </label>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 14 }}>
          <SourceBtn icon={<UploadIcon/>} label="Upload" onClick={() => {
            const inp = document.createElement('input');
            inp.type = 'file'; inp.multiple = true;
            inp.onchange = e => handleFiles(Array.from(e.target.files));
            inp.click();
          }}/>
          <SourceBtn icon={<TextIcon/>}       label="Text input" onClick={() => { onClose(); onTextInput && onTextInput(); }}/>
          <SourceBtn icon={<UrlIcon/>}        label="URL"        onClick={() => { onClose(); onUrlInput && onUrlInput(); }}/>
          <SourceBtn icon={<SharepointIcon/>} label="SharePoint" onClick={() => { onClose(); onSharePoint && onSharePoint(); }}/>
        </div>

        <div style={{
          marginTop: 14, padding: '10px 12px', borderRadius: 9,
          background: 'var(--maroon-wash)', border: '1px solid var(--maroon-10)',
          fontSize: 12, color: 'var(--ink-2)', display: 'flex', gap: 8, alignItems: 'center',
        }}>
          <span style={{ color: 'var(--maroon)', fontWeight: 600 }}>Next:</span>
          You'll set Confidentiality status and Practice for each file before it's saved.
        </div>
      </div>
    </ModalShell>
  );
};

Object.assign(window, {
  SourceBtn,
  UploadIcon,
  TextIcon,
  UrlIcon,
  SharepointIcon,
  AddSourcesModal,
});