// force-intake-queue.jsx - in-memory test-day queue for existing Force panels.
function ForceIntakeQueue({ items = [], athletes = [], onAddFiles, onUpdate, onOpen, onRemove, onClear }) {
  const inputRef = React.useRef(null);
  const labels = {
    blocked: ['待匹配', '#b45309'],
    ready: ['可处理', '#2563eb'],
    processing: ['读取中', '#7c3aed'],
    review_required: ['待审核', '#b45309'],
    error: ['读取失败', '#dc2626'],
    completed: ['已保存', '#15803d'],
  };
  const readyCount = items.filter(item => item.status === 'ready').length;
  const doneCount = items.filter(item => item.status === 'completed').length;
  const queueBusy = items.some(item => item.status === 'processing');
  return (
    <section data-testid="force-intake-queue" style={{ margin: '12px 20px 0', border: '1px solid var(--border)', borderRadius: 10, background: 'var(--panel)', overflow: 'hidden' }}>
      <div style={{ minHeight: 48, padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: items.length ? '1px solid var(--border)' : 0 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 700 }}>测试日批量队列</div>
          <div style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>
            多文件只排队；每项仍需在原分析工作台审核并保存。{items.length ? ` ${doneCount}/${items.length} 已完成 · ${readyCount} 可处理` : ''}
          </div>
        </div>
        {items.length > 0 && <button type="button" className="btn ghost" onClick={onClear}>清空队列</button>}
        <button type="button" className="btn" onClick={() => inputRef.current?.click()}>选择多个文件</button>
        <input ref={inputRef} data-testid="force-intake-files" type="file" multiple accept=".xlsx,.xls,.csv,.txt" style={{ display: 'none' }} onChange={event => {
          const files = Array.from(event.target.files || []);
          if (files.length) onAddFiles(files);
          event.target.value = '';
        }} />
      </div>
      {items.length > 0 && (
        <div style={{ maxHeight: 260, overflow: 'auto' }}>
          {items.map(item => {
            const state = labels[item.status] || [item.status, 'var(--muted)'];
            const blocked = queueBusy || !item.type || !item.athleteId || item.status === 'completed';
            return (
              <div key={item.id} data-queue-item={item.id} style={{ display: 'grid', gridTemplateColumns: 'minmax(180px,1fr) 110px minmax(150px,210px) 90px auto', gap: 8, alignItems: 'center', padding: '8px 12px', borderTop: '1px solid var(--border)' }}>
                <div style={{ minWidth: 0 }}>
                  <div title={item.name} style={{ fontSize: 11.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</div>
                  {item.issues?.length > 0 && <div style={{ fontSize: 9.5, color: '#b45309', marginTop: 2 }}>{item.issues.map(issue => issue.message).join('；')}</div>}
                </div>
                <select aria-label={`${item.name} 测试类型`} value={item.type || ''} disabled={item.status === 'processing' || item.status === 'completed'} onChange={e => onUpdate(item.id, { type: e.target.value })} style={{ fontSize: 11 }}>
                  <option value="">选择测试</option><option value="cmj">CMJ</option><option value="sj">SJ</option><option value="imtp">IMTP</option>
                </select>
                <select aria-label={`${item.name} 运动员`} value={item.athleteId || ''} disabled={item.status === 'processing' || item.status === 'completed'} onChange={e => onUpdate(item.id, { athleteId: e.target.value })} style={{ fontSize: 11 }}>
                  <option value="">选择运动员</option>
                  {athletes.filter(a => a && a.id && a.id !== 'all').map(a => <option key={a.id} value={a.id}>{a.name || a.id}</option>)}
                </select>
                <span style={{ fontSize: 10.5, color: state[1], fontWeight: 650 }}>{state[0]}</span>
                <div style={{ display: 'flex', gap: 5 }}>
                  <button type="button" className="btn ghost" disabled={blocked} onClick={() => onOpen(item.id)}>{item.status === 'review_required' ? '继续审核' : '打开'}</button>
                  <button type="button" className="btn ghost" disabled={item.status === 'processing'} onClick={() => onRemove(item.id)}>移除</button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}