/* global React, Icon, BrandMark, SignalLineChart, useStore, aiReply, aiPrompts */
const { useState, useRef, useEffect } = React;
const PSEV = { red: "var(--red)", amber: "var(--amber)", green: "var(--green)" };
const PSEVW = { red: "критично", amber: "внимание", green: "рост" };
const PST = window.SignalStatus;

function PhStatus({ s }) {
  const m = PST[s.status];
  return <span className="pa-st-badge" style={{ color: m.color, borderColor: `color-mix(in srgb, ${m.color} 40%, transparent)` }}>{s.status === "in_work" ? "в работе" : m.label}{s.escalated && s.status === "in_work" ? " · эск." : ""}</span>;
}

function PhoneApp() {
  const store = useStore();
  const st = store.get();
  const [tab, setTab] = useState("feed");   // feed | tasks | chat
  const [openId, setOpenId] = useState(null);
  const [sevFilter, setSevFilter] = useState(null);

  const openSig = st.signals.filter((s) => store.isOpen(s));
  let feed = openSig.filter((s) => !s.snoozed);
  if (sevFilter) feed = feed.filter((s) => s.severity === sevFilter);
  const order = { new: 0, in_work: 1 };
  const sev = { red: 0, amber: 1, green: 2 };
  feed = [...feed].sort((a, b) => (order[a.status] - order[b.status]) || (sev[a.severity] - sev[b.severity]));

  const counts = {
    red: openSig.filter((s) => s.severity === "red").length,
    amber: openSig.filter((s) => s.severity === "amber").length,
    green: openSig.filter((s) => s.severity === "green").length,
  };
  const inWork = st.signals.filter((s) => s.status === "in_work");
  const resolved = st.signals.filter((s) => store.isResolved(s));
  const now = new Date();
  const hh = String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");

  function toggle(id) { setOpenId(openId === id ? null : id); if (openId !== id) store.markRead(id); }

  return (
    <div className="pa">
      <div className="pa-status"><span>{hh}</span><span className="r">{st.activeRole} · LTE ▰▰▰<Icon name="shield" size={12} /></span></div>

      {tab === "feed" ? (
        <div className="pa-body">
          <div className="pa-head"><span className="pa-mk"><BrandMark size={18} /></span><div><b>Сигнал</b><small>AI центр · {st.activeRole}</small></div><span className="live"><i />сейчас</span></div>
          <div className="pa-strip">
            <button className={sevFilter==="red"?"on":""} onClick={()=>setSevFilter(sevFilter==="red"?null:"red")}><b style={{color:"var(--red)"}}>{counts.red}</b>критично</button>
            <button className={sevFilter==="amber"?"on":""} onClick={()=>setSevFilter(sevFilter==="amber"?null:"amber")}><b style={{color:"var(--amber)"}}>{counts.amber}</b>внимание</button>
            <button className={sevFilter==="green"?"on":""} onClick={()=>setSevFilter(sevFilter==="green"?null:"green")}><b style={{color:"var(--green)"}}>{counts.green}</b>рост</button>
          </div>
          <div className="pa-seclbl"><span>{sevFilter ? "Фильтр активен" : "Сигналы по важности"}</span>{sevFilter ? <span style={{ color: "var(--cyan)", cursor: "pointer" }} onClick={() => setSevFilter(null)}>сбросить</span> : <span>{feed.length}</span>}</div>
          {feed.map((s) => <PhoneCard key={s.id} s={s} store={store} open={openId === s.id} onToggle={() => toggle(s.id)} goChat={() => setTab("chat")} />)}
          {feed.length === 0 ? <div className="wa-empty" style={{ marginTop: 24 }}>Открытых сигналов нет 🟢<br/>Всё под контролем.</div> : null}
        </div>
      ) : tab === "tasks" ? (
        <div className="pa-body">
          <div className="pa-head"><span className="pa-mk"><Icon name="check" size={18} /></span><div><b>Поручения</b><small>{inWork.length} в работе · {resolved.length} решено</small></div></div>
          {inWork.length === 0 && resolved.length === 0 ? (
            <div className="wa-empty" style={{ marginTop: 30 }}>Пока нет поручений.<br/>Откройте сигнал и возьмите в работу.</div>
          ) : null}
          {inWork.length ? <div className="pa-seclbl"><span>В работе</span><span>{inWork.length}</span></div> : null}
          {inWork.map((s) => <PhoneCard key={s.id} s={s} store={store} open={openId === s.id} onToggle={() => toggle(s.id)} goChat={() => setTab("chat")} compact />)}
          {resolved.length ? <div className="pa-seclbl" style={{ marginTop: 8 }}><span>Решённые</span><span>{resolved.length}</span></div> : null}
          {resolved.map((s) => <PhoneCard key={s.id} s={s} store={store} open={openId === s.id} onToggle={() => toggle(s.id)} goChat={() => setTab("chat")} compact />)}
        </div>
      ) : (
        <PhoneChat store={store} st={st} />
      )}

      <nav className="pa-nav">
        <button className={tab==="feed"?"on":""} onClick={()=>setTab("feed")}><Icon name="signal" size={20} />Сигналы{counts.red?<span className="nb">{counts.red}</span>:null}</button>
        <button className={tab==="tasks"?"on":""} onClick={()=>setTab("tasks")}><Icon name="check" size={20} />Поручения{inWork.length?<span className="nb" style={{background:"var(--cyan)"}}>{inWork.length}</span>:null}</button>
        <button className={tab==="chat"?"on":""} onClick={()=>setTab("chat")}><Icon name="brain" size={20} />AI чат</button>
      </nav>
    </div>
  );
}

// Инлайн-ввод комментария (закрыть / отклонить / эскалация)
function CommentBox({ mode, action, onSubmit, onCancel }) {
  const [text, setText] = useState("");
  const cfg = {
    close: { title: "Что сделано?", ph: "Например: цены пересчитаны, маржа восстановлена…", quick: [action + " — выполнено", "Решено, под контролем"], cta: "Закрыть", color: "var(--green)", req: true },
    reject: { title: "Почему отклоняете?", ph: "Например: ложное срабатывание, уже учтено…", quick: ["Ложное срабатывание", "Уже учтено в плане"], cta: "Отклонить", color: "var(--text-3)", req: true },
    escalate: { title: "Кому/почему эскалация?", ph: "Например: вынести на правление…", quick: ["Вынести на правление", "Нужно решение собственника"], cta: "Эскалировать", color: "var(--red)", req: false },
  }[mode];
  const ok = !cfg.req || text.trim().length >= 3;
  return (
    <div className="pa-cbox">
      <b>{cfg.title}</b>
      <textarea rows={2} placeholder={cfg.ph} value={text} onChange={(e) => setText(e.target.value)} autoFocus />
      <div className="pa-cbox-quick">{cfg.quick.map((q) => <button key={q} onClick={() => setText(q)}>{q}</button>)}</div>
      <div className="pa-cbox-acts">
        <button className="pa-btn" onClick={onCancel}>Отмена</button>
        <button className="pa-btn primary" style={{ background: cfg.color, opacity: ok ? 1 : 0.5 }} disabled={!ok} onClick={() => onSubmit(text.trim())}>{cfg.cta}</button>
      </div>
    </div>
  );
}

function PhoneCard({ s, store, open, onToggle, goChat, compact }) {
  const [cmode, setCmode] = useState(null);
  const resolved = store.isResolved(s);
  const last = s.journal[s.journal.length - 1] || {};
  function run(mode, text) {
    if (mode === "close") store.closeSignal(s.id, text);
    else if (mode === "reject") store.rejectSignal(s.id, text);
    else if (mode === "escalate") store.escalateSignal(s.id, text);
    setCmode(null);
  }
  return (
    <div className={`pa-card ${s.severity} ${s.status === "new" ? "unread" : ""} ${resolved ? "resolved" : ""}`}>
      <div onClick={onToggle}>
        <div className="top"><span className="src">{s.source}</span><PhStatus s={s} /></div>
        <h3>{s.title}</h3>
        {!compact ? (
          <div className="mid">
            <span className="kpi"><b style={{ color: PSEV[s.severity] }}>{s.metric}{s.unit}</b><small>{s.delta}</small></span>
            <div style={{ flex: 1, maxWidth: 130 }}><SignalLineChart series={s.series} target={s.target} eventIndex={s.event} eventLabel="" labels={[]} unit={s.unit.trim()==="%"?"%":s.unit} betterDown={s.unit.trim()!=="%"} height={48} /></div>
          </div>
        ) : (
          <div className="pa-rec">{resolved ? <><Icon name="check" size={12} color="var(--green)" />{last.comment || "решено"}</> : <><Icon name="zap" size={12} color="var(--cyan)" />{s.action}</>}</div>
        )}
      </div>
      <div className={`pa-exp ${open ? "open" : ""}`}>
        <div className="pa-g">
          <div><span>Причина</span><b>{s.cause}</b></div>
          <div className="money"><span>Риск · AI {s.confidence}%</span><b>{s.risk}</b></div>
          <div><span>Рекомендация</span><b>{s.action} · {s.owner}</b></div>
        </div>
        {s.journal && s.journal.length ? (
          <div className="pa-journal">{s.journal.map((j, i) => <div key={i} className="pa-jrow"><i style={{ background: j.action === "closed" ? "var(--green)" : j.action === "rejected" ? "var(--text-3)" : j.action === "escalated" ? "var(--red)" : "var(--cyan)" }} />{({ taken: "Взят в работу", closed: "Закрыт", rejected: "Отклонён", escalated: "Эскалация", reopened: "В работе" })[j.action]}{j.comment ? `: «${j.comment}»` : ""}</div>)}</div>
        ) : null}

        {cmode ? <CommentBox mode={cmode} action={s.action} onSubmit={(t) => run(cmode, t)} onCancel={() => setCmode(null)} /> : (
          <div className="pa-act">
            {resolved ? (
              <button className="pa-btn" onClick={() => store.reopen(s.id)}><Icon name="arrow" size={15} />Вернуть в работу</button>
            ) : s.status === "new" ? (
              <>
                <button className="pa-btn primary" onClick={() => store.takeIntoWork(s.id)}><Icon name="zap" size={15} />Взять в работу</button>
                <div className="pa-act-row">
                  <button className="pa-btn sm" onClick={() => setCmode("reject")}>Отклонить</button>
                  <button className="pa-btn sm" onClick={() => setCmode("escalate")}>Эскалация</button>
                </div>
              </>
            ) : (
              <>
                <button className="pa-btn primary" style={{ background: "var(--green)" }} onClick={() => setCmode("close")}><Icon name="check" size={15} />Закрыть с комментарием</button>
                <div className="pa-act-row">
                  <button className="pa-btn sm" onClick={() => setCmode("escalate")}>Эскалация</button>
                  <button className="pa-btn sm" onClick={goChat}>Спросить AI</button>
                </div>
              </>
            )}
          </div>
        )}
      </div>
      <div className="pa-hint" onClick={onToggle}>{open ? "▴ свернуть" : (resolved ? "▾ решение и журнал" : "▾ причина, риск и действие")}</div>
    </div>
  );
}

function PhoneChat({ store, st }) {
  const ref = useRef(null);
  const top = [...st.signals].filter((s)=>store.isOpen(s)).sort((a,b)=>({red:0,amber:1,green:2}[a.severity]-{red:0,amber:1,green:2}[b.severity]))[0] || st.signals[0];
  const sig = top;
  const [msgs, setMsgs] = useState(sig ? [{ from: "system", text: `Главный сигнал: ${sig.title}. Спросите о причине или действии.` }] : []);
  const [draft, setDraft] = useState(""); const [typing, setTyping] = useState(false);
  useEffect(() => { if (ref.current) ref.current.scrollTo({ top: ref.current.scrollHeight, behavior: "smooth" }); }, [msgs, draft, typing]);
  function ask(q) {
    if (typing || !sig) return;
    const a = aiReply(sig, q);
    setMsgs((c) => [...c, { from: "user", text: q }]); setTyping(true);
    setTimeout(() => { let i = 0; const t = setInterval(() => { i += 2; setDraft(a.slice(0, i)); if (i >= a.length) { clearInterval(t); setMsgs((c) => [...c, { from: "system", text: a }]); setDraft(""); setTyping(false); } }, 16); }, 320);
  }
  return (
    <div className="pa-body">
      <div className="pa-head"><span className="pa-mk"><Icon name="brain" size={18} /></span><div><b>AI чат</b><small>{typing ? "печатает…" : "на связи"}</small></div></div>
      <div className="pa-chat-msgs" ref={ref}>
        {msgs.map((m, i) => <div key={i} className={`pa-msg ${m.from}`}>{m.text}</div>)}
        {typing ? <div className="pa-msg system">{draft || <span className="typing-dots"><i/><i/><i/></span>}</div> : null}
      </div>
      <div className="pa-prompts">{aiPrompts().map((p) => <button key={p} onClick={() => ask(p)} disabled={typing}>{p}</button>)}</div>
    </div>
  );
}

window.PhoneApp = PhoneApp;