import React from "react";

export default function QuickActionsBar({
  selectedTaskName,
  autosaveNote,
  taskStatus,
  hasSelectedTask,
  canSaveTask,
  taskActionLoading,
  saveTask,
  parseHistory,
  joinGroupsForTask,
  checkAll,
  startTask,
  stopTask,
  moreActionsOpen,
  setMoreActionsOpen,
  moreActionsRef,
  clearQueue,
  startAllTasks,
  stopAllTasks,
  clearDatabase,
  resetSessions,
  pauseReason,
  setActiveTab,
  tasksLength,
  runTestSafe
}) {
  return (
    <section className="card action-bar">
      <div className="row-header">
        <div className="row-header-main">
          <h3>Быстрые действия</h3>
          <div className="status-caption">
            Задача: {selectedTaskName}
            {autosaveNote && <span className="autosave-note">{autosaveNote}</span>}
          </div>
        </div>
        <div className={`status-pill ${taskStatus.running ? "ok" : "off"}`}>
          {taskStatus.running ? "Запущено" : "Остановлено"}
        </div>
      </div>
      <div className="row-inline action-buttons">
        <button className="secondary" onClick={() => saveTask("bar")} disabled={!canSaveTask}>Сохранить</button>
        <button className="secondary" onClick={() => parseHistory("bar")} disabled={!hasSelectedTask}>Собрать историю</button>
        <button className="secondary" onClick={() => joinGroupsForTask("bar")} disabled={!hasSelectedTask}>
          Добавить ботов в Telegram группы
        </button>
        <button className="secondary" onClick={() => checkAll("bar")} disabled={!hasSelectedTask}>Проверить всё</button>
        <button className="secondary" onClick={runTestSafe} disabled={!hasSelectedTask}>Тестовый прогон</button>
        {taskStatus.running ? (
          <button className="danger cta" onClick={() => stopTask("bar")} disabled={!hasSelectedTask || taskActionLoading}>
            <span className="cta-icon">[■]</span>
            {taskActionLoading ? "Остановка..." : "Остановить"}
          </button>
        ) : (
          <button className="primary cta" onClick={() => startTask("bar")} disabled={!hasSelectedTask || taskActionLoading}>
            <span className="cta-icon">[&gt;]</span>
            {taskActionLoading ? "Запуск..." : "Запустить"}
          </button>
        )}
      </div>
      <details className="more-actions" open={moreActionsOpen} ref={moreActionsRef}>
        <summary
          className="secondary"
          onClick={(event) => {
            event.preventDefault();
            setMoreActionsOpen((prev) => !prev);
          }}
        >
          Ещё
        </summary>
        <div className="more-actions-panel">
          <button
            className="secondary"
            onClick={() => {
              clearQueue("bar");
              setMoreActionsOpen(false);
            }}
            disabled={!hasSelectedTask}
          >
            Очистить очередь
          </button>
          <button
            type="button"
            className="secondary"
            onClick={() => {
              startAllTasks();
              setMoreActionsOpen(false);
            }}
            disabled={!tasksLength}
          >
            Запустить все
          </button>
          <button
            type="button"
            className="secondary"
            onClick={() => {
              stopAllTasks();
              setMoreActionsOpen(false);
            }}
            disabled={!tasksLength}
          >
            Остановить все
          </button>
          <button
            type="button"
            className="danger"
            onClick={() => {
              clearDatabase();
              setMoreActionsOpen(false);
            }}
          >
            Очистить БД
          </button>
          <button
            type="button"
            className="danger ghost"
            onClick={() => {
              resetSessions();
              setMoreActionsOpen(false);
            }}
          >
            Сбросить сессии
          </button>
        </div>
      </details>
      {!taskStatus.running && pauseReason && (
        <div className="pause-reason">
          Пауза: {pauseReason}
          <button
            type="button"
            className="ghost tiny"
            onClick={() => setActiveTab("accounts")}
          >
            Исправить
          </button>
        </div>
      )}
    </section>
  );
}
