/* ============================================================
   byt.jsx — раздел «Быт»: бытовые подразделы. Пока один — «Кухня»
   (учёт продуктов дома: что есть, сколько, что заканчивается и что
   скоро испортится). Хаб-переключатель по образцу quests-hub.jsx;
   данные живут в основном стейте (state.kitchen) и синхронизируются
   как весь остальной планер. Регистрирует window.Screens.byt.
   ============================================================ */
const React = window.React;
const { useState } = React;
const Icon = window.Icon;
const A = window.PlannerActions;

const KX_CATEGORIES = [
  "Овощи и фрукты", "Молочное", "Мясо и рыба", "Крупы и макароны",
  "Хлеб и выпечка", "Консервы", "Заморозка", "Напитки",
  "Соусы и специи", "Сладкое", "Бакалея", "Прочее",
];

/* дней до срока годности: <0 — просрочено, 0..3 — скоро, иначе ок */
function kxDaysTo(iso) {
  if (!iso) return null;
  const a = new Date(window.todayISO() + "T00:00:00");
  const b = new Date(iso + "T00:00:00");
  return Math.round((b - a) / 86400000);
}
function kxExpiry(iso) {
  const d = kxDaysTo(iso);
  if (d == null) return null;
  if (d < 0) return { key: "expired", label: d === -1 ? "просрочено вчера" : "просрочено", cls: "kx-exp--bad" };
  if (d === 0) return { key: "today", label: "истекает сегодня", cls: "kx-exp--warn" };
  if (d <= 3) return { key: "soon", label: "истекает через " + d + (d === 1 ? " день" : " дн."), cls: "kx-exp--warn" };
  const dm = iso.slice(8, 10) + "." + iso.slice(5, 7);
  return { key: "ok", label: "до " + dm, cls: "kx-exp--ok" };
}

/* ---- форма добавления продукта -------------------------------- */
function KitchenAddForm({ onClose }) {
  const Cmp = window;
  const [name, setName] = useState("");
  const [category, setCategory] = useState(KX_CATEGORIES[0]);
  const [qty, setQty] = useState("");
  const [expiry, setExpiry] = useState("");

  const submit = () => {
    if (!name.trim()) return;
    A.addKitchenItem({ name: name.trim(), category, qty: qty.trim(), expiry: expiry || null });
    onClose();
  };

  return (
    <div className="task" style={{ display: "block", padding: "var(--s-5)", marginBottom: "var(--s-6)" }}>
      <Cmp.SectionRule kicker="Новое">Добавить продукт</Cmp.SectionRule>
      <div className="kx-form">
        <label className="kx-field kx-field--grow">
          <span className="e-label">Название</span>
          <input autoFocus value={name} onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && submit()}
            placeholder="Например: молоко, гречка, яйца" className="kx-input" />
        </label>
        <label className="kx-field">
          <span className="e-label">Категория</span>
          <select value={category} onChange={(e) => setCategory(e.target.value)} className="kx-select">
            {KX_CATEGORIES.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </label>
        <label className="kx-field">
          <span className="e-label">Сколько</span>
          <input value={qty} onChange={(e) => setQty(e.target.value)}
            placeholder="1 л · 2 пачки · 500 г" className="kx-input" />
        </label>
        <label className="kx-field">
          <span className="e-label">Годен до <span className="muted" style={{ textTransform: "none", letterSpacing: 0 }}>(необязательно)</span></span>
          <input type="date" value={expiry} onChange={(e) => setExpiry(e.target.value)} className="kx-input" />
        </label>
        <div className="row-2 gap-2" style={{ alignItems: "flex-end" }}>
          <Cmp.GButton variant="signal" icon="check" onClick={submit}>Добавить</Cmp.GButton>
          <Cmp.GButton variant="ghost" onClick={onClose}>Отмена</Cmp.GButton>
        </div>
      </div>
    </div>
  );
}

/* ---- строка продукта ------------------------------------------ */
function KitchenRow({ item }) {
  const exp = kxExpiry(item.expiry);
  return (
    <div className={"kx-row" + (item.low ? " kx-row--low" : "") + (exp && exp.key === "expired" ? " kx-row--expired" : "")}>
      <div className="kx-row__main">
        <span className="kx-row__name">{item.name}</span>
        {item.qty && <span className="kx-row__qty mono">{item.qty}</span>}
        {item.low && <span className="kx-badge kx-badge--low">заканчивается</span>}
        {exp && exp.key !== "ok" && <span className={"kx-badge " + exp.cls}>{exp.label}</span>}
        {exp && exp.key === "ok" && <span className="kx-row__exp mono">{exp.label}</span>}
      </div>
      <div className="kx-row__actions">
        <button className={"kx-act" + (item.low ? " kx-act--on" : "")} title={item.low ? "Снять «заканчивается»" : "Пометить «заканчивается»"}
          onClick={() => A.toggleKitchenLow(item.id)}>
          <Icon name="drop" size={14} />
        </button>
        <button className="kx-act kx-act--del" title="Убрать (закончилось / съели)" onClick={() => A.removeKitchenItem(item.id)}>
          <Icon name="close" size={14} />
        </button>
      </div>
    </div>
  );
}

/* ---- экран «Кухня» -------------------------------------------- */
function KitchenScreen({ state }) {
  const Cmp = window;
  const items = state.kitchen || [];
  const [adding, setAdding] = useState(false);
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("all");
  const [onlyBuy, setOnlyBuy] = useState(false);

  const lowCount = items.filter((i) => i.low).length;
  const soonCount = items.filter((i) => { const e = kxExpiry(i.expiry); return e && (e.key === "soon" || e.key === "today"); }).length;
  const expiredCount = items.filter((i) => { const e = kxExpiry(i.expiry); return e && e.key === "expired"; }).length;

  const needle = q.trim().toLowerCase();
  let shown = items.filter((i) =>
    (!needle || i.name.toLowerCase().includes(needle)) &&
    (cat === "all" || i.category === cat) &&
    (!onlyBuy || i.low));

  /* группировка по категориям, внутри — просроченные/заканчивающиеся выше */
  const usedCats = KX_CATEGORIES.filter((c) => shown.some((i) => i.category === c));
  const rank = (i) => { const e = kxExpiry(i.expiry); if (e && e.key === "expired") return 0; if (i.low) return 1; if (e && (e.key === "soon" || e.key === "today")) return 2; return 3; };

  const chip = (id, label, n, tone) => (
    <span className={"kx-chip" + (cat === id || (id === "buy" && onlyBuy) ? " kx-chip--on" : "") + (tone ? " kx-chip--" + tone : "")}
      onClick={() => { if (id === "buy") { setOnlyBuy((v) => !v); } else { setOnlyBuy(false); setCat(id); } }}>
      {label}{n != null ? " · " + n : ""}
    </span>
  );

  return (
    <div className="page page--wide screen-enter">
      <div className="page-head">
        <div className="page-head__titles">
          <div className="kicker-row"><span className="eyebrow-mono">Быт</span><span className="date-stamp">{items.length} {kxPlural(items.length)}</span></div>
          <h1 className="page-title">Кухня</h1>
        </div>
        <div className="page-actions">
          <Cmp.GButton icon="plus" variant="ink" onClick={() => setAdding((v) => !v)}>Добавить</Cmp.GButton>
        </div>
      </div>

      {/* сводка */}
      <div className="task" style={{ display: "flex", alignItems: "center", gap: "var(--s-6)", padding: "var(--s-5)", marginBottom: "var(--s-6)", flexWrap: "wrap" }}>
        <div><div className="e-label">Всего продуктов</div><div className="ring-total" style={{ fontSize: 34 }}>{items.length}</div></div>
        <div className="section-rule__line" />
        <div><div className="e-label">Заканчивается</div><div className="ring-total" style={{ fontSize: 34, color: lowCount ? "var(--signal)" : "inherit" }}>{lowCount}</div></div>
        <div className="section-rule__line" />
        <div><div className="e-label">Скоро истекает</div><div className="ring-total" style={{ fontSize: 34, color: soonCount ? "#A66A1E" : "inherit" }}>{soonCount}</div></div>
        {expiredCount > 0 && <>
          <div className="section-rule__line" />
          <div><div className="e-label">Просрочено</div><div className="ring-total" style={{ fontSize: 34, color: "#B23A2E" }}>{expiredCount}</div></div>
        </>}
      </div>

      {adding && <KitchenAddForm onClose={() => setAdding(false)} />}

      {items.length > 0 && (
        <div className="kx-tools">
          <input className="kx-input kx-tools__search" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Поиск продукта…" />
          <div className="kx-chips">
            {chip("all", "Все", items.length)}
            {chip("buy", "🛒 Купить", lowCount, "buy")}
            {usedCatsForChips(items).map((c) => chip(c, c, items.filter((i) => i.category === c).length))}
          </div>
        </div>
      )}

      {items.length === 0 ? (
        <div className="ach-blank">
          <Icon name="shelf" size={34} />
          <div className="ach-blank__title">На кухне пока пусто</div>
          <div className="muted" style={{ fontSize: "var(--t-small)" }}>Добавляйте продукты, отмечайте, что заканчивается, и следите за сроками годности.</div>
          <Cmp.GButton icon="plus" variant="ink" onClick={() => setAdding(true)} style={{ marginTop: "var(--s-4)" }}>Добавить первый</Cmp.GButton>
        </div>
      ) : shown.length === 0 ? (
        <div className="empty">Ничего не найдено.</div>
      ) : (
        <div className="kx-list">
          {usedCats.map((c) => (
            <div key={c} className="kx-group">
              <div className="kx-group__head"><span className="e-label">{c}</span><span className="kx-group__count mono">{shown.filter((i) => i.category === c).length}</span></div>
              {shown.filter((i) => i.category === c).sort((x, y) => rank(x) - rank(y) || x.name.localeCompare(y.name)).map((i) => (
                <KitchenRow key={i.id} item={i} />
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function usedCatsForChips(items) {
  return KX_CATEGORIES.filter((c) => items.some((i) => i.category === c));
}
function kxPlural(n) {
  const m10 = n % 10, m100 = n % 100;
  if (m10 === 1 && m100 !== 11) return "продукт";
  if (m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20)) return "продукта";
  return "продуктов";
}

/* ============================================================
   Калории — дневник питания: дневная норма ккал, белки/жиры/углеводы,
   переключение дней (можно вести задним числом), быстрый повтор часто
   съедаемого. Данные в state.calories = { goalKcal, goalP, log[] }.
   ============================================================ */
function shiftIso(iso, days) {
  const d = new Date(iso + "T00:00:00");
  d.setDate(d.getDate() + days);
  return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
}
function fmtIsoRu(iso) {
  return new Date(iso + "T00:00:00").toLocaleDateString("ru-RU", { weekday: "short", day: "numeric", month: "long" });
}

function CaloriesScreen({ state }) {
  const Cmp = window;
  const cal = state.calories || {};
  const log = cal.log || [];
  const goalKcal = cal.goalKcal || 2000;
  const goalP = cal.goalP || 0;

  const [viewDate, setViewDate] = useState(window.todayISO());
  const [name, setName] = useState("");
  const [kcal, setKcal] = useState("");
  const [p, setP] = useState("");
  const [f, setF] = useState("");
  const [c, setC] = useState("");
  const [editGoal, setEditGoal] = useState(false);
  const [gKcal, setGKcal] = useState(goalKcal);
  const [gP, setGP] = useState(goalP);

  const isToday = viewDate === window.todayISO();
  const dayEntries = log.filter((e) => e.date === viewDate);
  const sum = (k) => dayEntries.reduce((s, e) => s + (Number(e[k]) || 0), 0);
  const totKcal = sum("kcal"), totP = sum("p"), totF = sum("f"), totC = sum("c");
  const left = goalKcal - totKcal;

  /* недавние продукты для быстрого повтора — последние уникальные по названию */
  const recent = [];
  const seen = {};
  for (const e of log) {
    const key = (e.name || "").toLowerCase();
    if (e.name && !seen[key]) { seen[key] = 1; recent.push(e); }
    if (recent.length >= 8) break;
  }

  const add = () => {
    const k = Math.round(Number(kcal) || 0);
    if (!name.trim() || k <= 0) return;
    A.addCalorieEntry({ name: name.trim(), kcal: k, p: Math.round(Number(p) || 0), f: Math.round(Number(f) || 0), c: Math.round(Number(c) || 0), date: viewDate });
    setName(""); setKcal(""); setP(""); setF(""); setC("");
  };
  const quickAdd = (e) => A.addCalorieEntry({ name: e.name, kcal: e.kcal, p: e.p, f: e.f, c: e.c, date: viewDate });
  const saveGoal = () => {
    A.setCalorieGoal({ goalKcal: Math.max(0, Math.round(Number(gKcal) || 0)), goalP: Math.max(0, Math.round(Number(gP) || 0)) });
    setEditGoal(false);
  };

  const over = totKcal > goalKcal;

  return (
    <div className="page page--wide screen-enter">
      <div className="page-head">
        <div className="page-head__titles">
          <div className="kicker-row"><span className="eyebrow-mono">Быт</span><span className="date-stamp">{fmtIsoRu(viewDate)}{isToday ? " · сегодня" : ""}</span></div>
          <h1 className="page-title">Калории</h1>
        </div>
        <div className="page-actions" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Cmp.GButton variant="ghost" onClick={() => setViewDate(shiftIso(viewDate, -1))}>&larr;</Cmp.GButton>
          {!isToday && <Cmp.GButton variant="ghost" onClick={() => setViewDate(window.todayISO())}>Сегодня</Cmp.GButton>}
          <Cmp.GButton variant="ghost" onClick={() => setViewDate(shiftIso(viewDate, 1))}>&rarr;</Cmp.GButton>
        </div>
      </div>

      {/* сводка дня */}
      <div className="task" style={{ display: "block", padding: "var(--s-5)", marginBottom: "var(--s-6)" }}>
        <div className="kcal-summary">
          <Cmp.GoalRing value={totKcal} target={goalKcal} main={totKcal + " / " + goalKcal} sub="ккал за день"
            note={over ? "перебор" : (left <= goalKcal * 0.15 && left >= 0 ? "почти норма" : null)} />
          <div className="kcal-legend">
            <div className="kcal-legend__row"><span className="e-label">Съедено</span><span className="kcal-legend__val">{totKcal} ккал</span></div>
            <div className="kcal-legend__row"><span className="e-label">{over ? "Перебор" : "Осталось"}</span><span className="kcal-legend__val" style={{ color: over ? "#B23A2E" : "var(--signal)" }}>{Math.abs(left)} ккал</span></div>
            <div className="kcal-legend__row"><span className="e-label">Белки</span><span className="kcal-legend__val">{totP} г{goalP ? " / " + goalP : ""}</span></div>
            <div className="kcal-legend__row"><span className="e-label">Жиры · Углеводы</span><span className="kcal-legend__val">{totF} · {totC} г</span></div>
            {editGoal ? (
              <div className="row-2 gap-2" style={{ marginTop: 8, flexWrap: "wrap" }}>
                <label className="kcal-goalfield"><span className="e-label">Норма ккал</span><input type="number" className="kcal-input" value={gKcal} onChange={(e) => setGKcal(e.target.value)} /></label>
                <label className="kcal-goalfield"><span className="e-label">Белки, г</span><input type="number" className="kcal-input" value={gP} onChange={(e) => setGP(e.target.value)} /></label>
                <Cmp.GButton variant="signal" icon="check" onClick={saveGoal}>ОК</Cmp.GButton>
              </div>
            ) : (
              <span className="wq-link" style={{ marginTop: 4 }} onClick={() => { setGKcal(goalKcal); setGP(goalP); setEditGoal(true); }}>Изменить норму</span>
            )}
          </div>
        </div>
      </div>

      {/* добавить приём пищи */}
      <div className="task" style={{ display: "block", padding: "var(--s-5)", marginBottom: "var(--s-5)" }}>
        <Cmp.SectionRule kicker="Добавить">Что съедено{isToday ? "" : " (" + viewDate + ")"}</Cmp.SectionRule>
        <div className="kcal-form">
          <label className="kcal-field kcal-field--grow"><span className="e-label">Продукт / блюдо</span>
            <input className="kcal-input" value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} placeholder="Например: овсянка с бананом" /></label>
          <label className="kcal-field"><span className="e-label">Ккал</span>
            <input type="number" className="kcal-input" value={kcal} onChange={(e) => setKcal(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} placeholder="0" /></label>
          <label className="kcal-field"><span className="e-label">Б, г</span><input type="number" className="kcal-input" value={p} onChange={(e) => setP(e.target.value)} placeholder="0" /></label>
          <label className="kcal-field"><span className="e-label">Ж, г</span><input type="number" className="kcal-input" value={f} onChange={(e) => setF(e.target.value)} placeholder="0" /></label>
          <label className="kcal-field"><span className="e-label">У, г</span><input type="number" className="kcal-input" value={c} onChange={(e) => setC(e.target.value)} placeholder="0" /></label>
          <Cmp.GButton variant="signal" icon="plus" onClick={add}>Добавить</Cmp.GButton>
        </div>
        {recent.length > 0 && (
          <div className="kcal-recent">
            <span className="e-label" style={{ marginRight: 4 }}>Быстро:</span>
            {recent.map((e) => (
              <span key={e.id} className="kcal-chip" onClick={() => quickAdd(e)} title="Добавить ещё раз">{e.name} · {e.kcal}</span>
            ))}
          </div>
        )}
      </div>

      {/* приёмы пищи за день */}
      {dayEntries.length === 0 ? (
        <div className="ach-blank">
          <Icon name="gauge" size={34} />
          <div className="ach-blank__title">{isToday ? "Сегодня пока ничего не записано" : "За этот день записей нет"}</div>
          <div className="muted" style={{ fontSize: "var(--t-small)" }}>Добавляйте съеденное и следите за дневной нормой калорий и белка.</div>
        </div>
      ) : (
        <div className="kcal-list">
          {dayEntries.map((e) => (
            <div key={e.id} className="kcal-row">
              <span className="kcal-row__name">{e.name}</span>
              <span className="kcal-row__macros mono">{e.p ? "Б " + e.p : ""}{e.f ? " · Ж " + e.f : ""}{e.c ? " · У " + e.c : ""}</span>
              <span className="kcal-row__kcal">{e.kcal} ккал</span>
              <button className="kcal-row__del" title="Убрать" onClick={() => A.removeCalorieEntry(e.id)}><Icon name="close" size={13} /></button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---- хаб «Быт» ------------------------------------------------ */
const BYT_SECTIONS = [
  { id: "kitchen", label: "Кухня", icon: "shelf" },
  { id: "calories", label: "Калории", icon: "gauge" },
];

function BytHub(props) {
  const [tab, setTab] = useState(() => {
    try { return localStorage.getItem("planer-byt-tab") || "kitchen"; } catch (e) { return "kitchen"; }
  });
  const setTabPersist = (id) => { setTab(id); try { localStorage.setItem("planer-byt-tab", id); } catch (e) {} };

  const Screen = { kitchen: KitchenScreen, calories: CaloriesScreen }[tab];

  return (
    <div>
      {BYT_SECTIONS.length > 1 && (
        <div className="toolbar" style={{ marginBottom: "var(--s-5)" }}>
          <div className="seg">
            {BYT_SECTIONS.map((sct) => (
              <button key={sct.id} className={"seg__btn" + (tab === sct.id ? " seg__btn--on" : "")} onClick={() => setTabPersist(sct.id)}>
                <Icon name={sct.icon} size={14} />{sct.label}
              </button>
            ))}
          </div>
        </div>
      )}
      {Screen ? <Screen {...props} /> : <div className="empty">Раздел не найден.</div>}
    </div>
  );
}

window.Screens = Object.assign(window.Screens || {}, { byt: BytHub });