// Data Import — super-admin-only file upload + transfer of super-admin role
function DataImport({ currentUser, users, showrooms, onTransferAdmin, onImport }) {
  const [showTransfer, setShowTransfer] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const [importing, setImporting] = React.useState(false);
  const [history, setHistory] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('kub_import_history') || '[]'); }
    catch (e) { return []; }
  });
  const fileInputRef = React.useRef(null);

  const onFilePick = (e) => {
    const picked = Array.from(e.target.files);
    setFiles(prev => [...prev, ...picked]);
    e.target.value = ''; // allow re-picking same file
  };
  const removeFile = (idx) => setFiles(prev => prev.filter((_, i) => i !== idx));

  const runImport = () => {
    if (files.length === 0) return;
    setImporting(true);
    // Simulate parsing (in real version, this calls a server-side or in-browser xlsx parser)
    setTimeout(() => {
      const summary = files.map(f => ({
        filename: f.name,
        size: f.size,
        importedAt: new Date().toISOString(),
        importedBy: currentUser.name,
        // Pretend parse results
        newContacts: Math.floor(20 + Math.random() * 80),
        newDeals: Math.floor(5 + Math.random() * 30),
        duplicates: Math.floor(2 + Math.random() * 12),
      }));
      const newHistory = [...summary, ...history].slice(0, 50);
      setHistory(newHistory);
      try { localStorage.setItem('kub_import_history', JSON.stringify(newHistory)); } catch (e) {}
      setFiles([]);
      setImporting(false);
      if (onImport) onImport(summary);
    }, 1400);
  };

  const otherLeadership = users.filter(u => u.role === 'leadership' && u.id !== currentUser.id);

  return (
    <div>
      <div className="card" style={{ marginBottom: 16, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14, background: 'oklch(0.97 0.04 25)', border: '1px solid oklch(0.85 0.08 25)' }}>
        <div style={{
          width: 32, height: 32, borderRadius: 16,
          background: 'var(--accent)',
          color: 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <Icon name="alert" size={16} color="white"/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent-ink)', marginBottom: 2 }}>
            Super-admin only
          </div>
          <div style={{ fontSize: 12, color: 'oklch(0.35 0.1 25)' }}>
            You ({currentUser.name}) are the only user who can upload spreadsheet files to bring in new data during the transition. Once everyone is using the platform directly, this area can be retired. You can transfer this responsibility to another leadership user any time.
          </div>
        </div>
        <button className="btn sm" onClick={() => setShowTransfer(true)} style={{ flexShrink: 0 }}>
          <Icon name="users" size={12}/> Transfer super-admin
        </button>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-hd">
          <div>
            <div className="card-title">Upload spreadsheet files</div>
            <div className="card-sub">.xlsx files exported from your showroom Google Sheets. New contacts and deals get merged in; duplicates are skipped by phone number.</div>
          </div>
        </div>
        <div style={{ padding: 18 }}>
          <div
            onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('drop-active'); }}
            onDragLeave={(e) => e.currentTarget.classList.remove('drop-active')}
            onDrop={(e) => {
              e.preventDefault();
              e.currentTarget.classList.remove('drop-active');
              const dropped = Array.from(e.dataTransfer.files).filter(f => f.name.toLowerCase().endsWith('.xlsx') || f.name.toLowerCase().endsWith('.csv'));
              setFiles(prev => [...prev, ...dropped]);
            }}
            onClick={() => fileInputRef.current?.click()}
            style={{
              border: '2px dashed var(--border-strong)',
              borderRadius: 10,
              padding: '32px 20px',
              textAlign: 'center',
              cursor: 'pointer',
              background: 'var(--surface-2)',
              transition: 'border-color 0.15s, background 0.15s',
            }}
          >
            <div style={{ width: 44, height: 44, margin: '0 auto 10px', borderRadius: 22, background: 'var(--surface-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="download" size={20} color="var(--ink-2)" style={{ transform: 'rotate(180deg)' }}/>
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>Drop spreadsheet files here</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>or click to browse · .xlsx and .csv accepted</div>
            <input
              ref={fileInputRef}
              type="file"
              accept=".xlsx,.csv"
              multiple
              style={{ display: 'none' }}
              onChange={onFilePick}
            />
          </div>

          {files.length > 0 && (
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 500, marginBottom: 8 }}>
                {files.length} file{files.length !== 1 ? 's' : ''} ready to import
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {files.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 6, background: 'var(--surface)' }}>
                    <Icon name="table" size={14} color="var(--ink-3)"/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 500 }}>{f.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{(f.size / 1024).toFixed(1)} KB</div>
                    </div>
                    <button className="btn icon sm" onClick={() => removeFile(i)}>
                      <Icon name="close" size={12}/>
                    </button>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
                <button className="btn" onClick={() => setFiles([])} disabled={importing}>Clear all</button>
                <button
                  className="btn primary"
                  onClick={runImport}
                  disabled={importing}
                  style={{ marginLeft: 'auto' }}
                >
                  {importing ? <><Icon name="clock" size={12}/> Importing…</> : <><Icon name="check" size={12}/> Import {files.length} file{files.length !== 1 ? 's' : ''}</>}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="card">
        <div className="card-hd">
          <div>
            <div className="card-title">Import history</div>
            <div className="card-sub">Every import is logged with timestamp and operator</div>
          </div>
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>File</th>
                <th className="num-col">Size</th>
                <th className="num-col">New contacts</th>
                <th className="num-col">New deals</th>
                <th className="num-col">Duplicates skipped</th>
                <th>Imported by</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody>
              {history.length === 0 ? (
                <tr><td colSpan="7" className="empty">No imports yet. Drop files above to bring in new data.</td></tr>
              ) : history.map((h, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Icon name="table" size={12} color="var(--ink-3)"/>
                      <span style={{ fontSize: 12.5 }}>{h.filename}</span>
                    </div>
                  </td>
                  <td className="num-col"><span className="num">{(h.size / 1024).toFixed(1)} KB</span></td>
                  <td className="num-col"><span className="num" style={{ color: 'var(--won)' }}>+{h.newContacts}</span></td>
                  <td className="num-col"><span className="num" style={{ color: 'var(--won)' }}>+{h.newDeals}</span></td>
                  <td className="num-col"><span className="num" style={{ color: 'var(--ink-3)' }}>{h.duplicates}</span></td>
                  <td style={{ fontSize: 12 }}>{h.importedBy}</td>
                  <td style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{new Date(h.importedAt).toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' })}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {showTransfer && (
        <TransferAdminModal
          currentUser={currentUser}
          candidates={otherLeadership}
          onClose={() => setShowTransfer(false)}
          onConfirm={(newAdminId) => { onTransferAdmin(newAdminId); setShowTransfer(false); }}
        />
      )}
    </div>
  );
}

function TransferAdminModal({ currentUser, candidates, onClose, onConfirm }) {
  const [selected, setSelected] = React.useState('');
  const [confirmText, setConfirmText] = React.useState('');

  return (
    <div>
      <div className="detail-overlay" onClick={onClose} style={{ zIndex: 52 }}/>
      <div className="invite-modal" style={{ zIndex: 53, width: 540 }}>
        <div style={{ padding: '18px 22px 14px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>Transfer super-admin</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>
                The new person will get exclusive access to upload data files. You'll keep your leadership access but lose the import area.
              </div>
            </div>
            <button className="detail-close" style={{ marginLeft: 'auto' }} onClick={onClose}>
              <Icon name="close" size={16}/>
            </button>
          </div>
        </div>
        <div style={{ padding: '18px 22px', maxHeight: '60vh', overflowY: 'auto' }}>
          <div className="detail-section">
            <h4>Transfer to</h4>
            {candidates.length === 0 ? (
              <div className="empty" style={{ padding: 14 }}>
                No other leadership users yet. Add one in Team & Access first.
              </div>
            ) : (
              <div className="reassign-list">
                {candidates.map(u => (
                  <div
                    key={u.id}
                    className={`reassign-row ${selected === u.id ? 'on' : ''}`}
                    onClick={() => setSelected(u.id)}
                  >
                    <span className={`radio ${selected === u.id ? 'on' : ''}`}>
                      {selected === u.id && <span className="radio-dot"></span>}
                    </span>
                    <span className="avatar sm" style={u.avatarColor ? { background: u.avatarColor } : null}>
                      {u.name.split(' ').map(s => s[0]).slice(0, 2).join('')}
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 500, fontSize: 13 }}>{u.name}</div>
                      <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{u.title} · {u.email}</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
          {selected && (
            <div className="detail-section">
              <h4>Confirm</h4>
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginBottom: 10 }}>
                Type <strong>TRANSFER</strong> below to confirm — this will immediately move super-admin access away from you and to <strong>{candidates.find(c => c.id === selected)?.name}</strong>.
              </div>
              <input
                value={confirmText}
                onChange={(e) => setConfirmText(e.target.value)}
                placeholder="TRANSFER"
                style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 6, fontSize: 13, outline: 'none' }}
              />
            </div>
          )}
        </div>
        <div style={{ padding: '14px 22px', borderTop: '1px solid var(--border)', background: 'var(--surface-2)', display: 'flex', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancel</button>
          <button
            className="btn"
            style={{ marginLeft: 'auto', background: confirmText === 'TRANSFER' && selected ? 'var(--lost)' : 'var(--surface)', color: confirmText === 'TRANSFER' && selected ? 'white' : 'var(--ink-3)', borderColor: confirmText === 'TRANSFER' && selected ? 'var(--lost)' : 'var(--border)' }}
            disabled={confirmText !== 'TRANSFER' || !selected}
            onClick={() => onConfirm(selected)}
          >
            <Icon name="arrow-right" size={12}/> Transfer super-admin
          </button>
        </div>
      </div>
    </div>
  );
}

window.DataImport = DataImport;