/* ============================================================
   screen_monitoring.jsx — Мониторинг изменений на сайте (M12) ⭐
   Лента diff-ов «было → стало»
   ============================================================ */
function Monitoring({ ctx }) {
  const [fType, setFType] = React.useState("all");
  const changes = ctx.activeSite === "all" ? DATA.changes : DATA.changes.filter(c => c.site === ctx.site);
  const typeLabels = { title: "Title", description: "Description", h1: "H1", noindex: "Noindex", robots: "robots.txt", canonical: "Canonical" };
  const types = ["all", ...Array.from(new Set(changes.map(c => c.type)))];
  const shown = fType === "all" ? changes : changes.filter(c => c.type === fType);
  const critical = changes.filter(c => c.sev === "critical").length;
  const siteOf = id => DATA.sites.find(s => s.id === id);

  return (
    <div className="grid" style={{ gap: 16 }}>
      {/* explainer */}
      <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 14, background: "var(--accent-softer)", borderColor: "#DCEAF7" }}>
        <span style={{ width: 40, height: 40, borderRadius: 11, background: "var(--accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 40px" }}><Icon name="shield" size={20} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 800 }}>Защита от «тихих катастроф»</div>
          <div style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 500, marginTop: 2 }}>Каждый день сверяем ключевые страницы со вчерашним снимком. Если клиент что-то сломал — узнаете первым.</div>
        </div>
        {critical > 0 && <span className="badge b-red"><Icon name="alert_octagon" size={12} />{critical} критич.</span>}
        <button className="btn btn-ghost btn-sm"><Icon name="refresh" size={14} />Проверить сейчас</button>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div className="chips">
          {types.map(t => <button key={t} className={"chip" + (fType === t ? " on" : "")} onClick={() => setFType(t)}>{t === "all" ? "Все изменения" : typeLabels[t] || t}</button>)}
        </div>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 700 }}>ежедневный снимок · {changes.length} {plural(changes.length, "изменение", "изменения", "изменений")} за неделю</span>
      </div>

      {/* timeline */}
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", left: 19, top: 8, bottom: 8, width: 2, background: "var(--border)" }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {shown.map((c, i) => {
            const m = severityMeta[c.sev];
            return (
              <div key={i} style={{ display: "flex", gap: 16, position: "relative" }}>
                <span style={{ width: 40, height: 40, borderRadius: 999, background: "var(--surface)", border: `2px solid ${m.color}`, color: m.color, display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 40px", zIndex: 1 }}>
                  <Icon name={c.type === "noindex" || c.type === "robots" ? "alert_octagon" : "edit"} size={18} />
                </span>
                <div className="card" style={{ flex: 1, borderLeft: `3px solid ${m.color}` }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 16px 8px" }}>
                    <span className={"badge b-" + m.cls}>{m.label}</span>
                    <span style={{ fontSize: 13.5, fontWeight: 800 }}>{c.type === "title" ? "Изменился Title" : c.type === "description" ? "Изменился Description" : c.type === "h1" ? "Изменился H1" : c.type === "noindex" ? "Добавлен noindex" : c.type === "robots" ? "Изменён robots.txt" : "Изменён canonical"}</span>
                    {ctx.activeSite === "all" && <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)" }}><Favicon site={siteOf(c.site)} size={15} radius={4} />{siteOf(c.site).title}</span>}
                    <span style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{c.page}</span>
                    <div style={{ flex: 1 }} />
                    <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>{c.date}</span>
                  </div>
                  <div style={{ padding: "4px 16px 14px", display: "flex", flexDirection: "column", gap: 6 }}>
                    <DiffLine kind="old" text={c.old} />
                    <DiffLine kind="new" text={c.new} />
                    {c.note && <div style={{ fontSize: 12, color: m.color, fontWeight: 700, marginTop: 4, display: "flex", alignItems: "center", gap: 6 }}><Icon name="info" size={13} />{c.note}</div>}
                  </div>
                  <div style={{ display: "flex", gap: 8, padding: "0 16px 14px" }}>
                    <button className="btn btn-soft btn-sm"><Icon name="plus" size={13} />Создать задачу</button>
                    <button className="btn btn-ghost btn-sm"><Icon name="refresh" size={13} />Вернуть как было</button>
                    <button className="btn btn-ghost btn-sm" style={{ color: "var(--ink-4)" }}>Это норм</button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function DiffLine({ kind, text }) {
  const old = kind === "old";
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 12.5, fontFamily: "ui-monospace, monospace", background: old ? "var(--red-soft)" : "var(--green-soft)", padding: "6px 10px", borderRadius: 7, lineHeight: 1.4 }}>
      <span style={{ color: old ? "var(--red)" : "var(--green-ink)", fontWeight: 800, flex: "0 0 auto" }}>{old ? "−" : "+"}</span>
      <span style={{ color: old ? "var(--red-ink)" : "var(--green-ink)", textDecoration: old ? "line-through" : "none", fontWeight: 600 }}>{text}</span>
    </div>
  );
}

window.Monitoring = Monitoring;