/* global React, ReactDOM, Icon, BrandMark, SignalLineChart, useCalm, ESCALATION */
const { useState } = React;
const CSEV = { red: "var(--red)", amber: "var(--amber)", green: "var(--green)" };

function greeting() { const h = new Date().getHours(); return h < 5 ? "Доброй ночи" : h < 12 ? "Доброе утро" : h < 18 ? "Добрый день" : "Добрый вечер"; }
function nowHHMM() { const d = new Date(); return String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0"); }

function MoodHero({ counts }) {
  const mood = counts.red > 0 ? "red" : counts.amber > 0 ? "amber" : "green";
  const map = {
    green: { icon: "check", h: "Всё в порядке", p: "Критичных сигналов нет. Можно заниматься делом — система сама позовёт, если что-то изменится." },
    amber: { icon: "bell", h: counts.amber + (counts.amber===1?" сигнал требует":" сигнала требуют") + " внимания", p: "Ничего критичного. Достаточно проверить и при необходимости позвонить ответственному." },
    red: { icon: "target", h: counts.red + (counts.red===1?" критичный сигнал":" критичных сигнала"), p: "Есть отклонение, на которое стоит вмешаться лично сегодня. Детали и действие — ниже." },
  };
  const m = map[mood], col = CSEV[mood];
  return (
    <div className={`ca-hero ${mood}`}>
      <div className="ca-greet">{greeting()} · {nowHHMM()} · утренняя сводка</div>
      <div className={`ca-orb ${mood !== "green" ? "pulse" : ""}`}>
        <i style={{ background: col }} />
        <span className="core" style={{ background: col, color: mood==="amber"?"#201100":"#04111d" }}><Icon name={m.icon} size={28} color={mood==="amber"?"#201100":"#04111d"} /></span>
      </div>
      <h2>{m.h}</h2>
      <p>{m.p}</p>
    </div>
  );
}

function Health({ counts }) {
  const pct = (n) => (counts.total ? (n / counts.total) * 100 : 0);
  return (
    <div className="ca-health">
      <div className="ca-health-h"><b>Светофор бизнеса</b><span>{counts.green} из {counts.total} в норме</span></div>
      <div className="ca-bar">
        {counts.green ? <i className="g" style={{ width: pct(counts.green) + "%" }} /> : null}
        {counts.amber ? <i className="a" style={{ width: pct(counts.amber) + "%" }} /> : null}
        {counts.red ? <i className="r" style={{ width: pct(counts.red) + "%" }} /> : null}
      </div>
      <div className="ca-legend">
        <span><i style={{ background: "var(--green)" }} />Норма {counts.green}</span>
        <span><i style={{ background: "var(--amber)" }} />Внимание {counts.amber}</span>
        <span><i style={{ background: "var(--red)" }} />Критично {counts.red}</span>
      </div>
    </div>
  );
}

function ProblemCard({ s, store }) {
  const esc = ESCALATION[s.severity];
  const acked = store.get().acknowledged.includes(s.id);
  return (
    <div className={`ca-card ${s.severity}`}>
      <div className="top"><span className="area">{s.area}</span><span className="src">{s.source}</span></div>
      <div className="ca-metric"><b style={{ color: CSEV[s.severity] }}>{s.metric}</b><small>{s.delta}</small></div>
      <div className="ca-esc" style={{ background: `color-mix(in srgb, ${esc.color} 12%, transparent)` }}>
        <span className="ei" style={{ background: esc.color, color: s.severity==="amber"?"#201100":"#04111d" }}><Icon name={esc.icon} size={17} color={s.severity==="amber"?"#201100":"#04111d"} /></span>
        <span className="et"><b style={{ color: esc.color }}>{esc.label}</b><small>{esc.text}</small></span>
      </div>
      <div className="ca-reason"><b>Причина.</b> {s.cause} <b style={{ color: "var(--amber)" }}>{s.risk}.</b></div>
      {s.owner && s.owner !== "—" ? (
        <div className="ca-owner"><Icon name="users" size={13} color="var(--text-3)" /><span>Ответственный: <b>{s.owner}</b></span></div>
      ) : null}
      <div className="ca-actions">
        <button className={`ca-btn ${acked ? "acked" : "primary"}`} style={!acked ? { background: esc.color } : {}} onClick={() => store.ack(s.id)}>
          <Icon name={acked ? "check" : esc.icon} size={14} color={acked?undefined:(s.severity==="amber"?"#201100":"#04111d")} />{acked ? "Принято в работу" : esc.label}
        </button>
      </div>
    </div>
  );
}

function CalmApp() {
  const store = useCalm();
  const st = store.get();
  const [tab, setTab] = useState("home");
  const sigs = store.withSev();
  const counts = store.counts();
  const problems = sigs.filter((s) => s.severity !== "green").sort((a,b)=> b.score - a.score);
  const calm = sigs.filter((s) => s.severity === "green");
  const mood = counts.red > 0 ? "red" : counts.amber > 0 ? "amber" : "green";

  return (
    <div className="cx-device">
      <div className={`cx-screen mood-${mood}`}>
        <div className="ca-status"><span>{nowHHMM()}</span><span>Собственник · LTE ▰▰▰</span></div>

        {tab === "home" ? (
          <div className="ca-body">
            <div className="ca-head"><span className="ca-mk"><BrandMark size={18} /></span><div><b>Сигнал</b><small>спокойный режим</small></div></div>
            <MoodHero counts={counts} />
            <Health counts={counts} />
            {problems.length ? (
              <>
                <div className="ca-seclbl">Что требует решения · {problems.length}</div>
                {problems.slice(0, 2).map((s) => <ProblemCard key={s.id} s={s} store={store} />)}
                {problems.length > 2 ? <button className="ca-btn" style={{ width: "100%", marginTop: 2 }} onClick={() => setTab("signals")}>Показать все · {problems.length}</button> : null}
              </>
            ) : (
              <div className="ca-seclbl">Тишина — это хорошо. Утром пришлём сводку.</div>
            )}
          </div>
        ) : tab === "signals" ? (
          <div className="ca-body">
            <div className="ca-head"><span className="ca-mk"><Icon name="signal" size={18} /></span><div><b>Сигналы</b><small>{problems.length ? problems.length+" требуют внимания" : "всё в норме"}</small></div></div>
            {problems.length === 0 ? (
              <div className="ca-hero green" style={{ marginTop: 8 }}><div className="ca-orb"><i style={{background:"var(--green)"}}/><span className="core" style={{background:"var(--green)"}}><Icon name="check" size={28} color="#04111d"/></span></div><h2>Чисто</h2><p>Ни одного сигнала выше нормы. Зелёные показатели не шумят специально.</p></div>
            ) : problems.map((s) => <ProblemCard key={s.id} s={s} store={store} />)}
            {calm.length ? <div className="ca-seclbl" style={{ marginTop: 16 }}>В норме · {calm.length} (молчат)</div> : null}
            {calm.map((s) => (
              <div className="ca-row" key={s.id} style={{ padding: "11px 14px", border: "1px solid var(--line)", borderRadius: 12, marginBottom: 8, background: "var(--surface)" }}>
                <span style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13 }}><i style={{ width: 8, height: 8, borderRadius: 999, background: "var(--green)" }} />{s.area}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-3)" }}>{s.metric}</span>
              </div>
            ))}
          </div>
        ) : (
          <Settings store={store} st={st} counts={counts} />
        )}

        <nav className="ca-nav">
          <button className={tab==="home"?"on":""} onClick={()=>setTab("home")}><Icon name="shield" size={20} />Сводка</button>
          <button className={tab==="signals"?"on":""} onClick={()=>setTab("signals")}><Icon name="signal" size={20} />Сигналы{counts.red?<span className="nb" style={{background:"var(--red)"}}>{counts.red}</span>:counts.amber?<span className="nb" style={{background:"var(--amber)"}}>{counts.amber}</span>:null}</button>
          <button className={tab==="settings"?"on":""} onClick={()=>setTab("settings")}><Icon name="settings" size={20} />Чуткость</button>
        </nav>
      </div>
    </div>
  );
}

function Settings({ store, st, counts }) {
  const previewCount = (lvl) => { const a = store.get().signals.map((s)=>window.calmSev(store.effScore(s), lvl)); return { r: a.filter(x=>x==="red").length, a: a.filter(x=>x==="amber").length, g: a.filter(x=>x==="green").length, t: a.length }; };
  return (
    <div className="ca-body">
      <div className="ca-head"><span className="ca-mk"><Icon name="settings" size={18} /></span><div><b>Уровень чуткости</b><small>сколько краснеет</small></div></div>
      <div className="ca-set-block">
        <b>Когда телефон должен «краснеть»</b>
        <p>У каждого свой порог. Настройте, насколько рано система поднимает тревогу — чтобы не было лишнего шума, но и не пропустить важное.</p>
        <div className="ca-levels">
          {store.levels.map((l) => {
            const pv = previewCount(l[0]);
            const on = st.level === l[0];
            return (
              <button key={l[0]} className={`ca-level ${on ? "on" : ""}`} onClick={() => store.setLevel(l[0])}>
                <span className="rb" />
                <span><b>{l[1]}</b><small>{l[2]}</small>
                  <span className="ca-preview"><span className="ca-mini-bar">
                    {pv.g?<i style={{background:"var(--green)",width:(pv.g/pv.t*100)+"%"}}/>:null}
                    {pv.a?<i style={{background:"var(--amber)",width:(pv.a/pv.t*100)+"%"}}/>:null}
                    {pv.r?<i style={{background:"var(--red)",width:(pv.r/pv.t*100)+"%"}}/>:null}
                  </span><span style={{whiteSpace:"nowrap"}}>{pv.r}🔴 {pv.a}🟡 {pv.g}🟢</span></span>
                </span>
              </button>
            );
          })}
        </div>
      </div>
      <div className="ca-set-block">
        <b>Утренняя сводка</b>
        <p>Короткое сообщение каждое утро: всё в порядке или на что обратить внимание.</p>
        <div className="ca-row" style={{ marginBottom: 14 }}>
          <span style={{ fontSize: 13.5 }}>Присылать сводку</span>
          <span className={`ca-switch ${st.digestOn ? "on" : ""}`} onClick={() => store.toggleDigest()}><i /></span>
        </div>
        <div className="ca-row">
          <span style={{ fontSize: 13.5, color: st.digestOn ? "var(--text)" : "var(--text-3)" }}>Время</span>
          <input className="ca-time" type="time" value={st.digestTime} disabled={!st.digestOn} onChange={(e) => store.setDigestTime(e.target.value)} />
        </div>
      </div>
      <div className="ca-set-block" style={{ textAlign: "center" }}>
        <p style={{ marginBottom: 12 }}>Сейчас: <b style={{color:"var(--red)"}}>{counts.red} критич.</b> · <b style={{color:"var(--amber)"}}>{counts.amber} внимание</b> · <b style={{color:"var(--green)"}}>{counts.green} норма</b></p>
        <button className="ca-btn" style={{ width: "100%" }} onClick={() => { if(confirm("Сбросить демо?")) store.reset(); }}><Icon name="arrow" size={14} />Сбросить демо</button>
      </div>
    </div>
  );
}

const CALM_PHIL = [
  { c: "var(--green)", ic: "check", t: "Зелёное — ничего не делать", s: "система молчит, всё в норме" },
  { c: "var(--amber)", ic: "phone", t: "Жёлтое — позвонить", s: "прояснить у ответственного" },
  { c: "var(--red)", ic: "target", t: "Красное — ехать разбираться", s: "вмешаться лично сегодня" },
];

function CalmRoot() {
  const store = useCalm();
  const st = store.get();
  const [theme, setTheme] = useState("dark");
  function toggle() { const t = theme === "dark" ? "light" : "dark"; setTheme(t); document.documentElement.setAttribute("data-theme", t); }
  return (
    <div className="phone-solo">
      <div className="app-bar">
        <a className="app-bar-btn back" href="/demo" title="Назад в демо"><span className="chev">←</span>Демо</a>
        <div className="app-bar-brand"><span className="app-bar-ic"><BrandMark size={18} /></span><div><b>Сигнал</b><small>спокойный режим</small></div></div>
        <div className="app-bar-acts">
          <a className="app-bar-btn label-hide" href="install.html"><Icon name="bell" size={15} /><span>Установить</span></a>
          <button className="app-bar-btn icon" onClick={toggle} title="Тема"><Icon name={theme === "dark" ? "sun" : "moon"} size={16} /></button>
        </div>
      </div>

      <div className="cx-scenario">
        <span className="cx-sc-lbl">Сценарий демо</span>
        {store.scenarios.map((sc) => (
          <button key={sc[0]} className={`cx-sc-btn ${st.scenario === sc[0] ? "on " + sc[0] : ""}`} onClick={() => store.setScenario(sc[0])} title={sc[2]}>
            <i className={"d " + sc[0]} />{sc[1]}
          </button>
        ))}
      </div>

      <CalmApp />

      <div className="cx-phil-strip">
        {CALM_PHIL.map((p) => (
          <div className="cx-phil-chip" key={p.t}>
            <span className="ic" style={{ background: `color-mix(in srgb, ${p.c} 16%, transparent)`, color: p.c }}><Icon name={p.ic} size={15} color={p.c} /></span>
            <div><b style={{ color: p.c }}>{p.t}</b><small>{p.s}</small></div>
          </div>
        ))}
      </div>
      <p className="ph-note">Тишина — хороший знак. Телефон «краснеет» только когда пора действовать. Демонстрационные данные, состояние сохраняется в браузере.</p>
    </div>
  );
}

window.CalmApp = CalmApp;
window.CalmRoot = CalmRoot;
window.CALM_PHIL = CALM_PHIL;
if (!window.__NO_CALM_AUTOMOUNT) {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("sw.js", { scope: "/app-demo/" }).catch(function (e) { console.warn("SW", e); });
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<CalmRoot />);
}