// results-widget.jsx — живой виджет результатов опроса

const MIN_RESULTS_TO_SHOW = 5;

function ResultsWidget({ visible }) {
  if (!visible) return null;

  const [data, setData]       = React.useState(null);
  const [error, setError]     = React.useState(false);
  const [refreshAt, setRefreshAt] = React.useState(Date.now());

  React.useEffect(() => {
    let alive = true;
    fetch("/api/results.php")
      .then(r => r.json())
      .then(d => { if (alive && d && d.ok) setData(d); else if (alive) setError(true); })
      .catch(() => { if (alive) setError(true); });
    return () => { alive = false; };
  }, [refreshAt]);

  // Авто-обновление раз в 60 секунд (полезно во время защиты)
  React.useEffect(() => {
    const id = setInterval(() => setRefreshAt(Date.now()), 60_000);
    return () => clearInterval(id);
  }, []);

  // Время последнего обновления — относительное
  const updatedHuman = data?.updated ? humanizeTime(data.updated) : null;
  const total = data?.count || 0;
  const words = data?.top_words || [];
  const choices = data?.choices || {};
  const maxCount = words.length ? words[0].count : 1;
  const choiceCards = [
    { id: "q1", title: "Покупали удобрения" },
    { id: "q2", title: "Траты за сезон" },
    { id: "q3", title: "Куда уходят очистки" },
    { id: "q4", title: "Где живут" }
  ].filter((card) => choices[card.id] && choices[card.id].length);

  if (!error && data === null) return null;
  if (!error && total < MIN_RESULTS_TO_SHOW) return null;

  return (
    <section id="results" className="section-bg-card">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">живые результаты</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Что отвечают<br/>
              <span style={{ color: "var(--accent)" }}>прямо сейчас</span>
            </h2>
          </div>
          <p className="lead">
            Опрос идёт в открытом доступе. Здесь — счётчик ответов и самые
            частые слова из открытых полей, агрегированные по всему массиву.
            Виджет обновляется автоматически — раз в минуту.
          </p>
        </div>

        {error && (
          <div className="results-empty">
            <p>Не удалось загрузить результаты. Это значит, что бэкенд недоступен —
            или вы открыли локальную версию сайта. На ekokrug.ru виджет работает.</p>
          </div>
        )}

        {!error && (
          <>
            <div className="results-grid">
              {/* Большой счётчик */}
              <div className="results-counter">
                <div className="mono r-label">всего ответов</div>
                <div className="r-num">
                  {data === null ? "—" : total.toLocaleString("ru-RU")}
                </div>
                <div className="r-foot mono">
                  {data === null ? (
                    <span>загружаем…</span>
                  ) : total === 0 ? (
                    <span>Ждём первых ответов</span>
                  ) : (
                    <span>
                      <span className="live-dot"/>обновлено {updatedHuman || "только что"}
                    </span>
                  )}
                </div>
              </div>

              {/* Облако тегов из открытых полей */}
              <div className="results-words">
                <div className="r-words-head">
                  <div className="mono r-label">слова, которые повторялись</div>
                  <div className="mono r-sub">из открытых ответов</div>
                </div>

                {data === null && (
                  <div className="r-cloud-skel">
                    {[34,52,28,46,40,22,48,30,36,26].map((w, i) => (
                      <span key={i} className="r-skel" style={{ width: `${w}px`, height: "22px" }}/>
                    ))}
                  </div>
                )}

                {data && words.length === 0 && (
                  <div className="r-empty-words">
                    <p>Пока недостаточно ответов с открытым текстом, чтобы выделить
                    частые темы. Виджет автоматически наполнится по мере поступления.</p>
                    <a href="#survey" className="btn btn-primary" style={{ marginTop: 16 }}>
                      Пройти опрос <span className="arrow">→</span>
                    </a>
                  </div>
                )}

                {data && words.length > 0 && (
                  <div className="r-cloud">
                    {words.map((w, i) => {
                      const t = w.count / maxCount;             // 0..1
                      const size = 14 + Math.round(t * 30);     // 14..44px
                      const weight = t > 0.6 ? 600 : t > 0.3 ? 500 : 400;
                      const opacity = 0.55 + t * 0.45;
                      return (
                        <span key={w.word} className="r-tag"
                              style={{ fontSize: size, fontWeight: weight, opacity,
                                       animationDelay: `${i * 0.05}s` }}>
                          {w.word}
                          <em className="r-tag-n">{w.count}</em>
                        </span>
                      );
                    })}
                  </div>
                )}
              </div>
            </div>

            {choiceCards.length > 0 && (
              <div className="results-choice-grid">
                {choiceCards.map((card) => (
                  <ChoiceCard key={card.id} title={card.title} rows={choices[card.id]} total={total} />
                ))}
              </div>
            )}
          </>
        )}

        <div className="results-foot">
          <span className="chip"><span className="dot"/>анонимные данные</span>
          <span className="mono">обновление каждые 60 сек · итоги — через 2 недели</span>
          <a href="#survey" className="r-link mono">→ присоединиться к опросу</a>
        </div>
      </div>
    </section>
  );
}

// Возвращает «12 минут назад», «вчера в 14:30» и т.п.
function humanizeTime(iso) {
  try {
    const t = new Date(iso).getTime();
    if (isNaN(t)) return null;
    const diff = (Date.now() - t) / 1000;
    if (diff < 60)    return "только что";
    if (diff < 3600)  return `${Math.floor(diff / 60)} мин назад`;
    if (diff < 86400) return `${Math.floor(diff / 3600)} ч назад`;
    const d = new Date(iso);
    return d.toLocaleDateString("ru-RU", { day: "2-digit", month: "short" });
  } catch (e) { return null; }
}

window.ResultsWidget = ResultsWidget;

function ChoiceCard({ title, rows, total }) {
  const max = rows.length ? rows[0].count : 1;
  return (
    <div className="results-choice-card">
      <div className="mono r-label">{title}</div>
      <div className="results-choice-bars">
        {rows.slice(0, 5).map((row) => {
          const pct = total > 0 ? Math.round((row.count / total) * 100) : 0;
          const width = (row.count / max) * 100;
          return (
            <div className="result-choice-row" key={row.label}>
              <div className="result-choice-meta">
                <span>{row.label}</span>
                <b>{pct}%</b>
              </div>
              <div className="r-bar-track">
                <div className="r-bar-fill" style={{ width: `${width}%` }} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}