import React from "react";

export default function SidebarOverview({
  taskSummary,
  globalStatus,
  selectedTaskName,
  competitorGroups,
  assignedAccountCount,
  taskStatus,
  notificationsOpen,
  setNotificationsOpen,
  infoOpen,
  setInfoOpen,
  bellRef,
  notificationsCount
}) {
  return (
    <details className="card collapsible overview compact" open>
      <summary>
        <div className="row-header">
          <div className="row-header-main">
            <h3>Общий обзор</h3>
          </div>
          <div className="row-inline overview-actions">
            <div className="notification-bell" ref={bellRef}>
              <button
                type="button"
                className={`icon-btn secondary ${notificationsOpen ? "active" : ""}`}
                onClick={() => setNotificationsOpen((prev) => !prev)}
              >
                🔔
              </button>
              {notificationsCount > 0 && (
                <span className="bell-badge">{notificationsCount}</span>
              )}
            </div>
            <button
              type="button"
              className={`icon-btn secondary ${infoOpen ? "active" : ""}`}
              onClick={() => setInfoOpen(true)}
            >
              ℹ️
            </button>
          </div>
        </div>
      </summary>
      <div className="summary-grid">
        <div className="summary-card">
          <div className="live-label">Всего задач</div>
          <div className="summary-value">{taskSummary.total}</div>
        </div>
        <div className="summary-card">
          <div className="live-label">Сессии</div>
          <div className="summary-value">
            {globalStatus.connectedSessions}/{globalStatus.totalAccounts}
          </div>
        </div>
      </div>
      <div className="summary-row">
        <div className="summary-compact">
          <span>Задача:</span> {selectedTaskName}
        </div>
        <div className="summary-compact">
          <span>Конкуренты:</span> {competitorGroups.length}
        </div>
        <div className="summary-compact">
          <span>Аккаунты:</span> {assignedAccountCount}
        </div>
        <div className="summary-compact">
          <span>Лимит:</span> {taskStatus.dailyUsed}/{taskStatus.dailyLimit}
        </div>
      </div>
    </details>
  );
}
