/* ============================================================
   cabinet.jsx — Личный кабинет: editable points plan + recap
   ============================================================ */
const React = window.React;
const Icon = window.Icon;
const A = window.PlannerActions;

function CabinetScreen({ state, day, nav }) {
  const Cmp = window;
  const tg = state.targets;

  // week totals (history + live today)
  const hist = state.history.map((h, idx) =>
    idx === state.todayIdx ? { taskPts: day.taskPts, habitPts: day.habitPts } : h);
  const weekNet = hist.reduce((s, h) => s + h.taskPts + h.habitPts, 0);

  const PlanRow = ({ label, tkey, value }) => (
    <div className="plan-row">
      <span className="plan-row__label">{label}</span>
      <Cmp.Stepper value={value} step={5} min={0} suffix="PTS" onChange={(v) => A.setTarget(tkey, v)} />
    </div>
  );

  const ProgRow = ({ label, value, target, signal }) => (
    <div>
      <div className="row-3" style={{ justifyContent: "space-between", marginBottom: 5 }}>
        <span style={{ fontSize: "var(--t-small)" }}>{label}</span>
        <span className="mono" style={{ fontWeight: 700 }}>{value} <span className="muted">/ {target}</span></span>
      </div>
      <div className="pbar"><i style={{ width: Math.min(target ? (value / target) * 100 : 0, 100) + "%", background: signal ? "var(--signal)" : "var(--ink-100)" }} /></div>
    </div>
  );

  return (
    <div className="page screen-enter" style={{ maxWidth: 1040 }}>
      <div className="page-head">
        <div className="page-head__titles">
          <div className="kicker-row"><span className="eyebrow-mono">Личный кабинет</span><span className="date-stamp">{state.dateLabel}</span></div>
          <h1 className="page-title">Кабинет</h1>
        </div>
        <div className="page-actions">
          <Cmp.GButton variant="ghost" icon="stats" onClick={() => nav({ screen: "stats" })}>Статистика</Cmp.GButton>
          <Cmp.GButton variant="ghost" onClick={() => window.authLogout()} style={{ fontSize: "var(--t-small)" }}>Выйти</Cmp.GButton>
        </div>
      </div>

      {/* profile strip */}
      <div className="task" style={{ display: "flex", alignItems: "center", gap: "var(--s-5)", padding: "var(--s-5)", marginBottom: "var(--s-6)" }}>
        <div style={{ width: 56, height: 56, flex: "0 0 56px", background: "var(--ink-100)", display: "grid", placeItems: "center" }}>
          <span style={{ color: "var(--signal)", fontFamily: "var(--font-slab)", fontWeight: 700, fontSize: 28 }}>Я</span>
        </div>
        <div style={{ flex: 1 }}>
          <div className="module__title">Моя практика</div>
          <div className="muted" style={{ fontSize: "var(--t-small)" }}>Свод №.06 · план и нормы баллов настраиваются ниже</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="e-label">Сегодня</div>
          <div style={{ fontFamily: "var(--font-slab)", fontWeight: 700, fontSize: "2.4rem", lineHeight: 1, whiteSpace: "nowrap", letterSpacing: "-0.02em" }}>
            {day.net}<span style={{ fontSize: "0.95rem", color: "var(--text-muted)", fontWeight: 400 }}> /{day.target}</span>
          </div>
        </div>
      </div>

      <div className="cols cols--2" style={{ alignItems: "start" }}>
        {/* editable plan */}
        <div className="task" style={{ display: "block", padding: "var(--s-5)" }}>
          <Cmp.SectionRule kicker="Норма">План по баллам</Cmp.SectionRule>
          <div className="plan-group">
            <div className="plan-group__title"><Icon name="today" size={16} /> Цель в день</div>
            <PlanRow label="Баллы за день" tkey="day" value={tg.day} />
          </div>
          <div className="plan-group">
            <div className="plan-group__title"><Icon name="calendar" size={16} /> Цель в неделю</div>
            <PlanRow label="Баллы за неделю" tkey="week" value={tg.week} />
          </div>
          <div className="callout-hint" style={{ padding: "var(--s-3) var(--s-4)", marginTop: "var(--s-4)" }}>
            <span className="hand" style={{ fontSize: "1.05rem" }}>Все баллы — за задачи и привычки — идут в один счёт. Цель дня = {tg.day}.</span>
          </div>
        </div>

        {/* progress vs plan */}
        <div className="stack-5">
          <div className="task" style={{ display: "block", padding: "var(--s-5)" }}>
            <Cmp.SectionRule kicker="Сегодня">Выполнение нормы дня</Cmp.SectionRule>
            <div className="stack-4">
              <ProgRow label="Баллы за день" value={day.net} target={tg.day} />
            </div>
          </div>
          <div className="task" style={{ display: "block", padding: "var(--s-5)" }}>
            <Cmp.SectionRule kicker="Неделя">Выполнение нормы недели</Cmp.SectionRule>
            <div className="stack-4">
              <ProgRow label="Баллы за неделю" value={weekNet} target={tg.week} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Screens = Object.assign(window.Screens || {}, { cabinet: CabinetScreen });