import React from "react";

export default function NowStatusCard({
  nowLine,
  nowExpanded,
  setNowExpanded,
  primaryIssue,
  openFixTab,
  monitorLabels,
  inviteLabels,
  roleSummary,
  taskStatus,
  groupVisibility,
  lastEvents,
  formatTimestamp
}) {
  return (
    <section className="card now-status">
      <div className="now-line">
        <div className="now-text">{nowLine}</div>
        <button
          type="button"
          className="ghost"
          onClick={() => setNowExpanded(!nowExpanded)}
        >
          {nowExpanded ? "Скрыть детали" : "Подробнее"}
        </button>
      </div>
      {primaryIssue && (
        <div className="primary-issue">
          Причина: {primaryIssue}
          <button type="button" className="ghost tiny" onClick={openFixTab}>
            Исправить
          </button>
        </div>
      )}
      {nowExpanded && (
        <div className="now-details">
          <div>Мониторит: {monitorLabels.length ? monitorLabels.join(", ") : "—"}</div>
          <div>Инвайтят: {inviteLabels.length ? inviteLabels.join(", ") : "—"}</div>
          <div>Схема: мониторинг {roleSummary.monitor.length} · инвайт {roleSummary.invite.length} · подтверждение {roleSummary.confirm.length}</div>
          <div>Последнее сообщение: {formatTimestamp(taskStatus.monitorInfo ? taskStatus.monitorInfo.lastMessageAt : "")}</div>
          <div>Источник: {taskStatus.monitorInfo && taskStatus.monitorInfo.lastSource ? taskStatus.monitorInfo.lastSource : "—"}</div>
          {taskStatus.readiness && (
            <div className={`notice inline ${taskStatus.readiness.ok ? "success" : "warn"}`}>
              Готовность: {taskStatus.readiness.ok ? "Да" : "Нет"}
              {!taskStatus.readiness.ok && taskStatus.readiness.reasons && (
                <div className="pre-line">{taskStatus.readiness.reasons.join("\n")}</div>
              )}
            </div>
          )}
          {taskStatus.lastStopReason && (
            <div className="notice inline warn">
              Последняя остановка: {taskStatus.lastStopReason}
              {taskStatus.lastStopAt ? ` (${formatTimestamp(taskStatus.lastStopAt)})` : ""}
            </div>
          )}
          {taskStatus.warnings && taskStatus.warnings.length > 0 && (
            <div className="notice inline warn">
              {taskStatus.warnings.map((warning, index) => (
                <div key={`warn-${index}`}>{warning}</div>
              ))}
            </div>
          )}
          {groupVisibility.length > 0 && groupVisibility.some((item) => item.hidden) && (
            <div className="notice inline warn">
              В некоторых группах скрыты участники — инвайт возможен только по username.
              <div className="visibility-list">
                {groupVisibility
                  .filter((item) => item.hidden)
                  .map((item) => (
                    <div key={item.source} className="visibility-item">
                      {item.title ? `${item.title} (${item.source})` : item.source}
                    </div>
                  ))}
              </div>
            </div>
          )}
          <div className="now-events">
            Последние события:
            {lastEvents.length === 0 && <div className="status-caption">—</div>}
            {lastEvents.map((event) => {
              const firstLine = event.message ? String(event.message).split("\n")[0] : "";
              return (
                <div key={event.id} className="status-caption">
                  {formatTimestamp(event.createdAt)} • {event.eventType}{firstLine ? ` • ${firstLine}` : ""}
                </div>
              );
            })}
          </div>
        </div>
      )}
    </section>
  );
}
