import React from "react";

export default function QueueTab({
  hasSelectedTask,
  queueStats,
  queueSearch,
  setQueueSearch,
  queuePage,
  setQueuePage,
  queuePageCount,
  pagedQueue,
  accountById,
  formatAccountLabel,
  formatTimestamp
}) {
  const formatUserWithUsername = (item) => {
    const id = item.user_id != null ? String(item.user_id) : "—";
    const username = item.username ? String(item.username).replace(/^@/, "") : "";
    return username ? `${id} (@${username})` : id;
  };

  if (!hasSelectedTask) {
    return (
      <section className="card logs">
        <div className="row-header">
          <h3>Очередь</h3>
        </div>
        <div className="hint">Выберите задачу, чтобы посмотреть очередь.</div>
      </section>
    );
  }

  return (
    <section className="card logs">
      <div className="row-header">
        <h3>Очередь</h3>
      </div>
      <div className="row-inline">
        <input
          type="text"
          value={queueSearch}
          onChange={(event) => {
            setQueueSearch(event.target.value);
            setQueuePage(1);
          }}
          placeholder="Поиск по очереди"
        />
        <div className="pager">
          <button
            className="secondary"
            type="button"
            onClick={() => setQueuePage((prev) => Math.max(1, prev - 1))}
            disabled={queuePage === 1}
          >
            Назад
          </button>
          <span>{queuePage}/{queuePageCount}</span>
          <button
            className="secondary"
            type="button"
            onClick={() => setQueuePage((prev) => Math.min(queuePageCount, prev + 1))}
            disabled={queuePage === queuePageCount}
          >
            Вперед
          </button>
        </div>
      </div>
      <div className="status-caption">
        В очереди: {queueStats?.total ?? 0} · username: {queueStats?.withUsername ?? 0} · access_hash: {queueStats?.withAccessHash ?? 0} · пустые: {queueStats?.withoutData ?? 0}
      </div>
      <div className="log-table">
        <div className="log-head">
          <span>Пользователь</span>
          <span>Источник</span>
          <span>Наблюдатель</span>
          <span>Попытки</span>
          <span>Добавлен</span>
        </div>
        {pagedQueue.length === 0 && (
          <div className="log-empty">Очередь пуста.</div>
        )}
        {pagedQueue.map((item) => {
          const watcher = item.watcher_account_id ? accountById.get(item.watcher_account_id) : null;
          const watcherLabel = watcher ? formatAccountLabel(watcher) : (item.watcher_account_id || "—");
          return (
            <div className="log-row" key={item.id}>
              <div>{formatUserWithUsername(item)}</div>
              <div>{item.source_chat || "—"}</div>
              <div>{watcherLabel}</div>
              <div>{item.attempts ?? 0}</div>
              <div>{formatTimestamp(item.created_at)}</div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
