/* global React */

// ────────────────────────────────────────────────────────────
// HOME — вариант C: «Лента-минимализм»
// Без карты-героя. Чистая хронология сгруппированная по дням МСК,
// крупная типографика, inline-сейсмограммы под каждой строкой.
// «Терминал учёного».
// ────────────────────────────────────────────────────────────
window.HomeScreenC = ({ T, dark, onOpenEvent }) => {
  const data = window.DATA.useDataState();
  const events = data.events;

  if (!events.length) {
    return (
      <div style={{ padding: 32, textAlign: "center", color: T.textMuted, fontSize: 13 }}>
        События ещё не загружены.
      </div>
    );
  }

  const ru24    = events.filter((e) => e.isRu && e.minutesAgo < 24*60).length;
  const world24 = events.filter((e) => e.minutesAgo < 24*60).length;
  const recent24 = events.filter((e) => e.minutesAgo < 24*60);
  const maxMag  = recent24.length > 0 ? Math.max(...recent24.map((e) => e.mag)) : 0;

  // Группировка по дням МСК
  const groupKey = (ev) => {
    const d = new Date(ev.timeUtc);
    return new Intl.DateTimeFormat("ru-RU", {
      day: "2-digit", month: "long", timeZone: "Europe/Moscow",
    }).format(d).toUpperCase();
  };
  const groups = [];
  const seen = new Map();
  for (const ev of events) {
    const key = groupKey(ev);
    if (!seen.has(key)) {
      seen.set(key, []);
      groups.push({ label: key, items: seen.get(key) });
    }
    seen.get(key).push(ev);
  }

  return (
    <div style={{ background: T.bg, color: T.text, paddingBottom: 32 }}>
      {/* Шапка-метрика */}
      <div style={{
        padding: "14px 16px", borderBottom: `1px solid ${T.borderSoft}`,
        background: T.surface,
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 10, marginBottom: 12,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 11, color: T.textDim,
        }}>
          <window.LivePulse color={T.ok} />
          <span style={{ letterSpacing: 0.4 }}>МОНИТОРИНГ АКТИВЕН</span>
          <span style={{ marginLeft: "auto", color: T.textMuted }}>USGS · EMSC</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          fontFamily: '"JetBrains Mono", monospace' }}>
          <Metric T={T} label="РОССИЯ / СНГ" value={ru24} hint="за 24 ч" />
          <Metric T={T} label="МИР" value={world24} hint="за 24 ч" />
          <Metric T={T} label="МАКС M" value={maxMag.toFixed(1)} hint="за 24 ч" highlight />
        </div>
      </div>

      {/* Группы по дням */}
      {groups.map((g) => (
        <div key={g.label} style={{ padding: "20px 16px 0" }}>
          <div style={{ fontSize: 10.5, letterSpacing: 1.6, color: T.textMuted,
            fontFamily: '"JetBrains Mono", monospace', marginBottom: 10, fontWeight: 600 }}>
            {g.label}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {g.items.map((ev) => (
              <BigEventRow key={ev.id} ev={ev} T={T} onClick={() => onOpenEvent(ev)} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const Metric = ({ T, label, value, hint, highlight }) => (
  <div>
    <div style={{ fontSize: 9.5, color: highlight ? T.accent : T.textMuted,
      letterSpacing: 0.8 }}>{label}</div>
    <div style={{ fontSize: 28, fontWeight: 600, lineHeight: 1, marginTop: 4,
      color: highlight ? T.accent : T.text }}>{value}</div>
    <div style={{ fontSize: 9.5, color: T.textMuted, marginTop: 4 }}>{hint}</div>
  </div>
);

const BigEventRow = ({ ev, T, onClick }) => (
  <div onClick={onClick} style={{
    cursor: "pointer", padding: "12px 0",
    borderBottom: `1px solid ${T.borderSoft}`,
  }}>
    <div style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
      <div style={{
        fontSize: 28, fontWeight: 700, color: window.magColor(ev.mag, T),
        fontFamily: '"JetBrains Mono", monospace', lineHeight: 1, minWidth: 56,
      }}>
        {ev.mag.toFixed(1)}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.3,
          color: T.text }}>
          {ev.place}
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 4, fontSize: 11,
          color: T.textDim, fontFamily: '"JetBrains Mono", monospace' }}>
          <span>{ev.flag}</span>
          <span>{ev.timeMsk} МСК</span>
          <span style={{ color: T.textMuted }}>·</span>
          <span>h={ev.depth.toFixed(1)} км</span>
          {ev.confirmed && <span style={{ color: T.ok, marginLeft: "auto" }}>✓ 2 ист.</span>}
        </div>
      </div>
    </div>
    <div style={{ marginTop: 8 }}>
      <window.SeismoLine T={T} w={344} h={20}
        seed={Math.floor(ev.mag * 17 + ev.lat)}
        intense={Math.min(ev.mag / 5, 1.2)} />
    </div>
  </div>
);