/* 業務OS — 業務キュー tab (team-wide task queue with filters + sortable table) */

function QueueTab() {
  const D = window.GYOMU;
  const [filter, setFilter] = useState('all');
  const [sort, setSort] = useState('priority');
  const [selected, setSelected] = useState(null);

  const filters = [
    { key: 'all', label: 'すべて' },
    { key: 'mine', label: '自分' },
    { key: 'ai', label: 'AI実行' },
    { key: 'waiting', label: '待機' },
    { key: 'done', label: '完了' },
  ];

  let rows = [...D.queue];
  if (filter === 'mine') rows = rows.filter(r => r.assignee === D.user.name);
  if (filter === 'ai') rows = rows.filter(r => r.mode === 'ai');
  if (filter === 'waiting') rows = rows.filter(r => r.status === '待機');
  if (filter === 'done') rows = rows.filter(r => r.status === '完了');

  if (sort === 'priority') rows.sort((a, b) => (a.p > b.p ? 1 : -1));
  if (sort === 'due') rows.sort((a, b) => a.due.localeCompare(b.due));
  if (sort === 'assignee') rows.sort((a, b) => a.assignee.localeCompare(b.assignee));

  const sel = rows.find(r => r.id === selected);

  const ThSort = ({ field, children }) => (
    <th onClick={() => setSort(field)} style={{
      cursor: 'pointer', userSelect: 'none', color: sort === field ? 'var(--accent)' : undefined,
    }}>{children}{sort === field ? ' ↓' : ''}</th>
  );

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', letterSpacing: '-.01em', marginBottom: 4 }}>業務キュー</div>
          <div style={{ fontSize: 11, color: 'var(--text-2)' }}>チーム全体のタスク管理 — AI業務OSが分類・優先順位付けを実施</div>
        </div>

        {/* Filters */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
          {filters.map(f => <FilterChip key={f.key} label={f.label} active={filter === f.key} onClick={() => setFilter(f.key)} />)}
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 10, color: 'var(--text-3)', alignSelf: 'center', fontFamily: 'var(--font-mono)' }}>{rows.length} 件</span>
        </div>

        {/* Table */}
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border-subtle)', borderRadius: 6, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
            <thead>
              <tr style={{ borderBottom: '2px solid var(--border)' }}>
                <ThSort field="priority">優先度</ThSort>
                <th style={{ textAlign: 'left' }}>タスク</th>
                <ThSort field="assignee">担当</ThSort>
                <th>部門</th>
                <th>モード</th>
                <th>ステータス</th>
                <ThSort field="due">期限</ThSort>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.id} onClick={() => setSelected(selected === r.id ? null : r.id)}
                  style={{ cursor: 'pointer', background: selected === r.id ? 'var(--accent-soft)' : undefined, transition: 'background .1s' }}
                  onMouseEnter={e => { if (selected !== r.id) e.currentTarget.style.background = 'var(--surface-hover)'; }}
                  onMouseLeave={e => { if (selected !== r.id) e.currentTarget.style.background = ''; }}>
                  <td><PriorityBadge p={r.p} /></td>
                  <td>
                    <div style={{ fontWeight: 500, color: 'var(--text-0)', marginBottom: 1 }}>{r.title}</div>
                    <CategoryLabel cat={r.cat} />
                  </td>
                  <td style={{ whiteSpace: 'nowrap' }}>
                    <span style={{ color: r.assignee === 'AI' ? 'var(--info)' : 'var(--text-1)', fontWeight: 500 }}>{r.assignee}</span>
                  </td>
                  <td style={{ color: 'var(--text-2)', fontSize: 10 }}>{r.dept}</td>
                  <td><ModeBadge mode={r.mode} label={{ ai: 'AI実行', approve: '人承認', collaborate: '協業', human: '人判断' }[r.mode]} /></td>
                  <td><StatusBadge status={r.status} /></td>
                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{r.due}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Detail panel */}
      {sel && (
        <div style={{ borderTop: '2px solid var(--accent)', padding: '12px 16px', background: 'var(--surface)', flexShrink: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <PriorityBadge p={sel.p} />
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>{sel.title}</span>
            <ModeBadge mode={sel.mode} label={{ ai: 'AI実行', approve: '人承認', collaborate: '協業', human: '人判断' }[sel.mode]} />
            <div style={{ flex: 1 }} />
            <StatusBadge status={sel.status} />
          </div>
          <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-2)' }}>
            <span>担当: <strong style={{ color: 'var(--text-0)' }}>{sel.assignee}</strong></span>
            <span>部門: {sel.dept}</span>
            <span>作成: <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>{sel.created}</span></span>
            <span>期限: <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10 }}>{sel.due}</span></span>
            <span>ソース: {sel.src}</span>
          </div>
        </div>
      )}
    </div>
  );
}

window.QueueTab = QueueTab;