// ───────────────────────────────────────────────────────────────
// ПОКЕРНАЯ ЛА МАСИЯ — Mini App на React (JSX)
// Тот же интерфейс, что в артефакте: сукно, игральные карты дней,
// плюс таймлайн «Сегодня», чек-ины (утро/вечер) и чаты с агентами.
// ───────────────────────────────────────────────────────────────
const { useState, useEffect, useRef, useCallback } = React;

const tgApp = window.Telegram?.WebApp; tgApp?.ready(); tgApp?.expand();
const initData = tgApp?.initData || "";

const DAYS = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
const SUITS = ["♠", "♥", "♣", "♦"];
const DCOLOR = { катка: "var(--c-katka)", теория: "var(--c-teor)", разбор: "var(--c-teor)", ментал: "var(--c-mental)", фитнес: "var(--c-fit)", еда: "var(--c-food)" };
const AGENTS = [
  { id: "head", icon: "★", name: "Главный тренер", desc: "режим, допуск, дисциплина" },
  { id: "poker", icon: "♠", name: "Покерный тренер", desc: "сессии, теория, разборы" },
  { id: "mental", icon: "♥", name: "Ментал-коуч", desc: "анти-тильт, фокус" },
  { id: "fitness", icon: "♣", name: "Фитнес-тренер", desc: "тело, энергия, осанка" },
  { id: "food", icon: "♦", name: "Диетолог", desc: "топливо и концентрация" },
];
const RD_COLOR = { green: "var(--green)", yellow: "var(--gold)", red: "var(--red)", none: "#8A8F98" };

const t2m = (t) => { const m = /^(\d{1,2}):(\d{2})$/.exec((t || "").trim()); return m ? +m[1] * 60 + +m[2] : 9999; };
const bkey = (b) => `${b.d}|${b.t}|${b.title}`;
const fmtDur = (d) => (d >= 60 ? `${Math.floor(d / 60)}ч${d % 60 ? ` ${d % 60}м` : ""}` : `${d}м`);

async function api(path, body) {
  const r = await fetch("/api/" + path, {
    method: body ? "POST" : "GET",
    headers: { "Content-Type": "application/json", "x-init-data": initData },
    body: body ? JSON.stringify(body) : undefined,
  });
  const d = await r.json();
  if (!r.ok) throw new Error(d.error || "Ошибка сервера");
  return d;
}
const loadSeen = () => { try { return JSON.parse(localStorage.getItem("seen") || "{}"); } catch { return {}; } };
const saveSeen = (s) => { try { localStorage.setItem("seen", JSON.stringify(s)); } catch {} };

// ── Маленькие компоненты ──────────────────────────────────────
function Range({ label, value, min, max, step, suffix, onChange }) {
  return (
    <label>
      <span className="l">{label}: <b style={{ color: "var(--text)" }}>{value}{suffix}</b></span>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(+e.target.value)} />
    </label>
  );
}
function Marks({ st, onMark, cream }) {
  return (
    <span className="marks">
      <button className={st === "done" ? "don" : ""} onClick={() => onMark("done")}>✓</button>
      <button className={st === "skip" ? "skp" : ""} onClick={() => onMark("skip")}>✗</button>
    </span>
  );
}

// ── Таймлайн дня (вкладка «Сегодня») ──────────────────────────
function Timeline({ S, day, statusOf, onMark }) {
  const items = S.blocks.filter((b) => b.d === day).sort((a, b) => t2m(a.t) - t2m(b.t));
  if (!items.length) return <p className="muted" style={{ padding: "6px 0" }}>День восстановления — обязательных блоков нет.</p>;
  const isToday = day === S.msk.day;
  const nowM = t2m(S.msk.hm);
  let nowPlaced = !isToday;
  const rows = [];
  for (const b of items) {
    if (!nowPlaced && t2m(b.t) > nowM) {
      rows.push(<div className="nowline" key="now"><span className="lbl">{S.msk.hm}</span></div>);
      nowPlaced = true;
    }
    const st = statusOf(b);
    rows.push(
      <div className={`tlb ${st === "done" ? "done" : st === "skip" ? "skip" : ""}`} key={bkey(b)}>
        <span className="time mono">{b.t}</span>
        <span className="dot" style={{ background: DCOLOR[b.domain] || "var(--c-teor)" }} />
        <div className="body" style={{ borderLeftColor: DCOLOR[b.domain] || "var(--c-teor)" }}>
          <div className="t1"><span className="title">{b.title}</span><Marks st={st} onMark={(s) => onMark(b, s)} /></div>
          <div className="t2">{fmtDur(b.dur)}{b.note ? ` · ${b.note}` : ""}</div>
        </div>
      </div>
    );
  }
  if (!nowPlaced) rows.push(<div className="nowline" key="now"><span className="lbl">{S.msk.hm}</span></div>);
  return <div className="tl">{rows}</div>;
}

// ── Кремовая «игральная карта» дня (вкладка «Неделя») ─────────
function DayCard({ S, day, statusOf, onMark }) {
  const items = S.blocks.filter((b) => b.d === day).sort((a, b) => t2m(a.t) - t2m(b.t));
  const suit = SUITS[DAYS.indexOf(day) % 4];
  return (
    <div className="daycard" style={day === S.msk.day ? { outline: "2px solid var(--gold)" } : {}}>
      <div className="corner">{day}<div className={`suit ${["♥", "♦"].includes(suit) ? "red" : ""}`}>{suit}</div></div>
      <div className="inner">
        {!items.length && <div style={{ fontStyle: "italic", color: "#8a8475", fontSize: 14 }}>День восстановления.</div>}
        {items.map((b) => {
          const st = statusOf(b);
          return (
            <div className={`dayb ${st === "done" ? "done" : st === "skip" ? "skip" : ""}`} key={bkey(b)} style={{ borderLeftColor: DCOLOR[b.domain] || "var(--c-teor)" }}>
              <div className="t1">
                <span className="time">{b.t}</span>
                <span className="title">{b.title}</span>
                <Marks st={st} onMark={(s) => onMark(b, s)} cream />
              </div>
              <div className="t2">{fmtDur(b.dur)}{b.note ? ` · ${b.note}` : ""}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Профиль ───────────────────────────────────────────────────
const PF = [
  ["discipline", "Дисциплина и лимиты", "text"], ["weakSpots", "Слабые места в игре", "text"],
  ["volumeHours", "Катка, ч/нед", "number"], ["studyHours", "Теория, ч/нед", "number"],
  ["preferredTime", "Лучшее время игры", "select", ["утро", "день", "вечер", "ночь"]],
  ["dayOff", "Выходной", "select", DAYS],
  ["wakeTime", "Подъём (МСК)", "text"], ["eveningCheckin", "Вечерний чек-ин (МСК)", "text"],
  ["mentalIssues", "Ментальные проблемы", "text"],
  ["age", "Возраст", "number"], ["weight", "Вес, кг", "number"], ["height", "Рост, см", "number"],
  ["gym", "Зал", "select", ["да", "нет"]], ["healthLimits", "Ограничения здоровья", "text"],
  ["foodPrefs", "Предпочтения в еде", "text"], ["bodyGoal", "Цель по телу/энергии", "text"],
  ["mealsPerDay", "Приёмов пищи", "number"],
];

// ── Приложение ────────────────────────────────────────────────
function App() {
  const [S, setS] = useState(null);
  const [tab, setTab] = useState("today");
  const [err, setErr] = useState("");
  const [chatAgent, setChatAgent] = useState("head");
  const [chatInput, setChatInput] = useState("");
  const [chatBusy, setChatBusy] = useState(false);
  const [weekDay, setWeekDay] = useState(null);
  const [ciKind, setCiKind] = useState("morning");
  const [ciM, setCiM] = useState({ sleep: 7.5, energy: 7, mood: 7, tilt: 2, sick: false, note: "" });
  const [ciE, setCiE] = useState({ rating: 7, quality: 7, tiltNotes: "", lesson: "", plannedSleep: "01:00" });
  const [ciBusy, setCiBusy] = useState(false);
  const [ciReply, setCiReply] = useState("");
  const [profile, setProfile] = useState(null);
  const [building, setBuilding] = useState(false);
  const [buildProg, setBuildProg] = useState({});
  const [adjText, setAdjText] = useState("");
  const [adjBusy, setAdjBusy] = useState(false);
  const [adjReply, setAdjReply] = useState("");
  const [seen, setSeen] = useState(loadSeen());
  const msgsRef = useRef(null);

  const showErr = (m) => { setErr(m); setTimeout(() => setErr(""), 6000); };

  const refresh = useCallback(async () => {
    try {
      const d = await api("state");
      setS(d);
      setProfile((p) => p || d.profile);
      setWeekDay((w) => w || d.msk.day);
      if (d.checkIn?.morning) setCiM(d.checkIn.morning);
      if (d.checkIn?.evening) setCiE(d.checkIn.evening);
    } catch (e) { showErr(e.message); }
  }, []);
  useEffect(() => { refresh(); const id = setInterval(refresh, 60000); return () => clearInterval(id); }, [refresh]);
  useEffect(() => { msgsRef.current && (msgsRef.current.scrollTop = msgsRef.current.scrollHeight); }, [S, chatAgent, tab, chatBusy]);

  if (!S) return <main><div className="card"><span className="spin">♠</span> Загружаю штаб…</div></main>;

  const statusOf = (b) => { const k = Object.keys(S.blockStatus).find((k) => k.endsWith("|" + bkey(b))); return k ? S.blockStatus[k] : null; };
  const markSeen = (aid, st) => { const ns = { ...st, [aid]: (S.chats?.[aid] || []).length }; setSeen(ns); saveSeen(ns); };
  const unreadOf = (aid) => Math.max(0, (S.chats?.[aid] || []).length - (seen[aid] || 0));
  const totalUnread = AGENTS.reduce((n, a) => n + (tab === "chat" && chatAgent === a.id ? 0 : unreadOf(a.id)), 0);

  const go = (t) => { setTab(t); if (t === "chat") markSeen(chatAgent, seen); };

  const onMark = async (b, status) => {
    const cur = statusOf(b);
    const next = cur === status ? null : status;
    try {
      await api("block", { key: bkey(b), status: next });
      const ns = { ...S.blockStatus };
      const old = Object.keys(ns).find((k) => k.endsWith("|" + bkey(b)));
      if (old) delete ns[old];
      if (next) ns["x|" + bkey(b)] = next;
      setS({ ...S, blockStatus: ns });
    } catch (e) { showErr(e.message); }
  };

  const sendChat = async () => {
    const text = chatInput.trim();
    if (!text || chatBusy) return;
    const chats = { ...S.chats, [chatAgent]: [...(S.chats[chatAgent] || []), { role: "user", content: text }] };
    setS({ ...S, chats }); setChatInput(""); setChatBusy(true);
    let patch = {};
    try {
      const r = await api("chat", { agent: chatAgent, text });
      chats[chatAgent] = [...chats[chatAgent], { role: "assistant", content: r.reply }];
      // агент мог изменить план/статусы прямо из чата — подхватываем сразу
      if (r.blocks) patch.blocks = r.blocks;
      if (r.blockStatus) patch.blockStatus = r.blockStatus;
      if (r.applied && r.applied.length) tgApp?.HapticFeedback?.notificationOccurred("success");
    } catch (e) {
      chats[chatAgent] = [...chats[chatAgent], { role: "assistant", content: "⚠ " + e.message }];
    }
    setS((s) => ({ ...s, ...patch, chats: { ...chats } }));
    markSeen(chatAgent, seen);
    setChatBusy(false);
  };

  const submitCi = async () => {
    setCiBusy(true); setCiReply("");
    try {
      const data = ciKind === "morning" ? ciM : ciE;
      const r = await api("checkin", { kind: ciKind, data });
      setS({ ...S, checkIn: { ...S.checkIn, [ciKind]: data }, readiness: r.readiness });
      setCiReply("★ Главный тренер: " + r.reply);
    } catch (e) { showErr(e.message); }
    setCiBusy(false);
  };

  const build = async () => {
    setBuilding(true); setBuildProg({ poker: "working" });
    try {
      await api("profile", { profile });
      await api("build"); // штаб собирает неделю в фоне
      const t0 = Date.now();
      let done = false;
      while (Date.now() - t0 < 9 * 60 * 1000) {
        await new Promise((r) => setTimeout(r, 2500));
        const st = await api("build/status");
        if (st.progress) setBuildProg(st.progress);
        if (st.state === "done") { done = true; break; }
        if (st.state === "error") throw new Error(st.error || "штаб не смог собрать неделю");
      }
      if (!done) throw new Error("сборка заняла слишком долго, попробуй ещё раз");
      await refresh(); setTab("today");
      tgApp?.HapticFeedback?.notificationOccurred("success");
    } catch (e) { showErr("Сбой конвейера: " + e.message); }
    setBuilding(false);
  };

  const adjust = async () => {
    if (!adjText.trim() || adjBusy) return;
    setAdjBusy(true);
    try {
      const r = await api("adjust", { text: adjText.trim() });
      setS({ ...S, blocks: r.blocks }); setAdjReply("★ " + r.reply); setAdjText("");
    } catch (e) { showErr(e.message); }
    setAdjBusy(false);
  };

  const a = AGENTS.find((x) => x.id === chatAgent);
  const ciDone = S.checkIn?.[ciKind];

  return (
    <>
      <header>
        <div className="suits">♠ ♥ ♣ ♦ ШТАБ ИГРОКА · МСК <span className="mono">{S.msk.hm}</span></div>
        <h1>Покерная Ла Масия</h1>
        {!!S.blocks.length && (
          <div className="badge" style={{ color: RD_COLOR[S.readiness.level], borderColor: RD_COLOR[S.readiness.level] }}>
            <span className="dot" /> {S.readiness.label}
          </div>
        )}
      </header>

      <main>
        {err && <div className="err">{err}</div>}

        {tab === "today" && (!S.blocks.length ? (
          <div className="card">
            <h2>План ещё не собран</h2>
            <p className="muted">Заполните профиль и соберите неделю — штаб построит её под вас.</p>
            <button className="btn" style={{ marginTop: 10 }} onClick={() => go("profile")}>К профилю</button>
          </div>
        ) : (
          <>
            {!S.checkIn?.morning && (
              <div className="card" style={{ borderColor: "var(--gold)" }}>
                <h2>Утренний осмотр</h2>
                <p className="muted">Чек-ин ещё не пройден — без него нет допуска к столам.</p>
                <button className="btn" style={{ marginTop: 10 }} onClick={() => go("checkin")}>Пройти чек-ин</button>
              </div>
            )}
            <div className="card">
              <h2>Сегодня · {S.msk.day}</h2>
              <Timeline S={S} day={S.msk.day} statusOf={statusOf} onMark={onMark} />
              <div className="legend">
                <span><i style={{ background: "var(--c-katka)" }} />Катка</span>
                <span><i style={{ background: "var(--c-teor)" }} />Теория</span>
                <span><i style={{ background: "var(--c-mental)" }} />Ментал</span>
                <span><i style={{ background: "var(--c-fit)" }} />Фитнес</span>
                <span><i style={{ background: "var(--c-food)" }} />Питание</span>
              </div>
              <p className="dim" style={{ fontSize: 11.5, marginTop: 8 }}>Отмечайте блоки: ✓ сделано / ✗ пропуск — штаб это видит и реагирует.</p>
            </div>
          </>
        ))}

        {tab === "week" && (
          <>
            <div className="card">
              <h2>Неделя штаба</h2>
              {S.summary && <p className="muted">★ {S.summary}</p>}
              <div className="muted" style={{ marginTop: 6, fontSize: 12 }}>
                {S.agentOut?.poker?.focus && <div>♠ {S.agentOut.poker.focus}</div>}
                {S.agentOut?.mental?.principles && <div>♥ {S.agentOut.mental.principles}</div>}
                {S.agentOut?.fitness?.note && <div>♣ {S.agentOut.fitness.note}</div>}
                {S.agentOut?.food?.kbju && <div>♦ {S.agentOut.food.kbju}</div>}
              </div>
            </div>
            <div className="chips">
              {DAYS.map((d) => (
                <button key={d} className={d === weekDay ? "on" : ""} onClick={() => setWeekDay(d)}>
                  {d}{d === S.msk.day ? " ·" : ""}
                </button>
              ))}
            </div>
            <DayCard S={S} day={weekDay} statusOf={statusOf} onMark={onMark} />
            <div className="card" style={{ marginTop: 12 }}>
              <h2>Перестроить план</h2>
              <textarea rows={2} value={adjText} onChange={(e) => setAdjText(e.target.value)} placeholder="Например: в пятницу турнир с 18:00 — перестрой день" />
              <button className="btn" style={{ marginTop: 8 }} disabled={adjBusy} onClick={adjust}>
                {adjBusy ? "Тренер думает…" : "Отправить главному тренеру"}
              </button>
              {adjReply && <p className="muted" style={{ marginTop: 8 }}>{adjReply}</p>}
            </div>
          </>
        )}

        {tab === "checkin" && (
          <>
            <div className="chips">
              <button className={ciKind === "morning" ? "on" : ""} onClick={() => { setCiKind("morning"); setCiReply(""); }}>☀ Утро</button>
              <button className={ciKind === "evening" ? "on" : ""} onClick={() => { setCiKind("evening"); setCiReply(""); }}>🌙 Вечер</button>
            </div>
            <div className="card">
              {ciKind === "morning" ? (
                <>
                  <h2>Утренний чек-ин</h2>
                  <p className="muted">Как медосмотр перед матчем: по нему главный тренер даёт допуск к столам. Напоминание — через 15 минут после подъёма ({S.profile.wakeTime} МСК).</p>
                  {ciDone && <div className="ok" style={{ borderColor: "var(--green)", color: "var(--green)" }}>Сегодня уже пройден — можно обновить, если состояние изменилось.</div>}
                  <Range label="Сон" value={ciM.sleep} min={3} max={11} step={0.5} suffix=" ч" onChange={(v) => setCiM({ ...ciM, sleep: v })} />
                  <Range label="Энергия" value={ciM.energy} min={1} max={10} step={1} suffix="/10" onChange={(v) => setCiM({ ...ciM, energy: v })} />
                  <Range label="Настроение" value={ciM.mood} min={1} max={10} step={1} suffix="/10" onChange={(v) => setCiM({ ...ciM, mood: v })} />
                  <Range label="Тильт / раздражение" value={ciM.tilt} min={0} max={10} step={1} suffix="/10" onChange={(v) => setCiM({ ...ciM, tilt: v })} />
                  <label className="checkbox"><input type="checkbox" checked={ciM.sick} onChange={(e) => setCiM({ ...ciM, sick: e.target.checked })} /> Болею / сильное недомогание</label>
                  <label><span className="l">Заметка штабу</span><input value={ciM.note} onChange={(e) => setCiM({ ...ciM, note: e.target.value })} placeholder="Вчера был даунстрик, голова забита…" /></label>
                </>
              ) : (
                <>
                  <h2>Вечерний чек-ин</h2>
                  <p className="muted">Разбор матча: как прошёл день, была ли игра по уровню, что забираем в завтра. Напоминание в {S.profile.eveningCheckin} МСК.</p>
                  {ciDone && <div className="ok" style={{ borderColor: "var(--green)", color: "var(--green)" }}>Сегодня уже пройден — можно обновить.</div>}
                  <Range label="Как прошёл день" value={ciE.rating} min={1} max={10} step={1} suffix="/10" onChange={(v) => setCiE({ ...ciE, rating: v })} />
                  <Range label="Качество игры/решений" value={ciE.quality} min={1} max={10} step={1} suffix="/10" onChange={(v) => setCiE({ ...ciE, quality: v })} />
                  <label><span className="l">Тильт-эпизоды сегодня</span><input value={ciE.tiltNotes} onChange={(e) => setCiE({ ...ciE, tiltNotes: e.target.value })} placeholder="После кулера подзавёлся на 20 минут…" /></label>
                  <label><span className="l">Главный урок дня</span><input value={ciE.lesson} onChange={(e) => setCiE({ ...ciE, lesson: e.target.value })} placeholder="Не доигрывать последний час уставшим" /></label>
                  <label><span className="l">Во сколько планирую лечь</span><input value={ciE.plannedSleep} onChange={(e) => setCiE({ ...ciE, plannedSleep: e.target.value })} /></label>
                </>
              )}
              <button className="btn" disabled={ciBusy} onClick={submitCi}>
                {ciBusy ? "Штаб изучает…" : ciKind === "morning" ? "Отправить чек-ин штабу" : "Отправить итог дня"}
              </button>
              {ciReply && <p className="muted" style={{ marginTop: 10, whiteSpace: "pre-wrap" }}>{ciReply}</p>}
            </div>
          </>
        )}

        {tab === "chat" && (
          <>
            <div className="agents">
              {AGENTS.map((ag) => (
                <button key={ag.id} className={ag.id === chatAgent ? "on" : ""}
                  onClick={() => { setChatAgent(ag.id); markSeen(ag.id, seen); }}>
                  {ag.icon} {ag.name.split(" ")[0]}
                  {ag.id !== chatAgent && unreadOf(ag.id) > 0 && <span className="ubadge">{unreadOf(ag.id)}</span>}
                </button>
              ))}
            </div>
            <div className="card" style={{ padding: 10 }}>
              <div className="muted" style={{ padding: "0 4px 6px", borderBottom: "1px solid var(--line)" }}>
                {a.name} · {a.desc} · видит план, чек-ины и дисциплину
              </div>
              <div className="msgs" ref={msgsRef}>
                {!(S.chats?.[chatAgent] || []).length && (
                  <p className="dim" style={{ textAlign: "center", margin: "auto" }}>Напишите первым — например: «как выстроить сегодняшний день?»</p>
                )}
                {(S.chats?.[chatAgent] || []).map((m, i) =>
                  m.role === "user"
                    ? <div className="msg user" key={i}>{m.content}</div>
                    : <div className="msg bot" key={i}><div className="who">{a.icon} {a.name}</div>{m.content}</div>
                )}
                {chatBusy && <div className="msg bot dim">печатает…</div>}
              </div>
              <div className="chatin">
                <input value={chatInput} onChange={(e) => setChatInput(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && sendChat()} placeholder="Сообщение…" />
                <button onClick={sendChat}>→</button>
              </div>
            </div>
          </>
        )}

        {tab === "profile" && profile && (
          <div className="card">
            <h2>Профиль игрока</h2>
            {PF.map(([k, l, t, opts]) => {
              const val = k === "gym" ? (profile.gym ? "да" : "нет") : (profile[k] ?? "");
              const set = (v) => setProfile({ ...profile, [k]: k === "gym" ? v === "да" : (t === "number" ? +v : v) });
              return (
                <label key={k}>
                  <span className="l">{l}</span>
                  {t === "select"
                    ? <select value={val} onChange={(e) => set(e.target.value)}>{opts.map((o) => <option key={o}>{o}</option>)}</select>
                    : <input type={t} value={val} onChange={(e) => set(e.target.value)} />}
                </label>
              );
            })}
            <button className="btn" style={{ marginTop: 6 }} disabled={building} onClick={build}>
              {building ? "Штаб собирает неделю…" : "Собрать неделю"}
            </button>
            {building && (
              <div className="card" style={{ marginTop: 10, background: "var(--panel2)" }}>
                <p className="muted" style={{ marginBottom: 8, fontSize: 12 }}>Штаб собирает твою неделю. Каждый специалист работает по очереди — это 2–5 минут, не закрывай приложение.</p>
                {[["poker", "♠", "Покерный тренер", "var(--c-katka)"], ["mental", "♥", "Ментал-коуч", "var(--c-mental)"], ["fitness", "♣", "Фитнес-тренер", "var(--c-fit)"], ["food", "♦", "Диетолог", "var(--c-food)"], ["head", "★", "Главный тренер", "var(--gold)"]].map(([id, ic, name, col]) => {
                  const stt = buildProg[id] || "wait";
                  return (
                    <div key={id} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 0" }}>
                      <span style={{ color: col, width: 18, textAlign: "center" }}>{ic}</span>
                      <span style={{ flex: 1, color: stt === "wait" ? "var(--dim)" : "var(--text)" }}>{name}</span>
                      {stt === "done"
                        ? <span style={{ color: "var(--green)", fontSize: 12.5 }}>готово ✓</span>
                        : stt === "working"
                          ? <span style={{ color: "var(--gold)", fontSize: 12.5 }}><span className="spin" style={{ display: "inline-block" }}>♠</span> работает</span>
                          : <span style={{ color: "var(--dim)", fontSize: 12.5 }}>ожидает</span>}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}
      </main>

      <nav>
        {[["today", "♠", "Сегодня"], ["week", "▦", "Неделя"], ["checkin", "✚", "Чек-ин"], ["chat", "✉", "Чаты"], ["profile", "⚙", "Профиль"]].map(([t, ic, l]) => (
          <button key={t} className={tab === t ? "on" : ""} onClick={() => go(t)}>
            <span className="ic">{ic}</span>{l}
            {t === "chat" && totalUnread > 0 && <span className="ubadge">{totalUnread}</span>}
          </button>
        ))}
      </nav>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);