// proto_sheets.jsx — bottom-sheet modals: check-in entry + goal setting
function Sheet({ open, onClose, children, title }) {
  const T = useTheme();
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 150, pointerEvents: open ? 'auto' : 'none' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,10,5,0.4)', opacity: open ? 1 : 0, transition: 'opacity .3s' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: T.card, borderRadius: `${T.r}px ${T.r}px 0 0`, padding: '10px 22px 34px', transform: open ? 'translateY(0)' : 'translateY(110%)', transition: 'transform .38s cubic-bezier(.22,1,.36,1)', boxShadow: '0 -8px 40px rgba(0,0,0,0.2)' }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: T.line, margin: '0 auto 16px' }} />
        {title && <div style={{ fontSize: 18, fontWeight: 700, color: T.ink, marginBottom: 18, textAlign: 'center' }}>{title}</div>}
        {children}
      </div>
    </div>
  );
}

function CheckinSheet({ open, onClose }) {
  const T = useTheme();
  const app = useApp();
  const { A, doCheckin } = app;
  const [val, setVal] = React.useState(A.cur);
  React.useEffect(() => { if (open) setVal(A.cur); }, [open]);
  // "yesterday" = the entry before today's (if any). null on the very first record.
  const prevEntries = A.checkedToday ? A.series.slice(0, -1) : A.series;
  const yest = prevEntries.length ? prevEntries[prevEntries.length - 1] : null;
  const delta = yest == null ? 0 : (val - yest);
  const step = (d) => setVal(v => Math.min(80, Math.max(50, Math.round((v + d) * 10) / 10)));

  return (
    <Sheet open={open} onClose={onClose} title="记录今天的体重">
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
          <button onClick={() => step(-0.1)} style={{ width: 46, height: 46, borderRadius: '50%', border: `1.5px solid ${T.line}`, background: T.bg, color: T.ink, fontSize: 26, cursor: 'pointer', lineHeight: 1 }}>−</button>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: T.NUM, fontSize: 56, fontWeight: 800, color: T.ink, lineHeight: 1 }}>{val.toFixed(1)}</span>
            <span style={{ fontFamily: T.NUM, fontSize: 18, fontWeight: 600, color: T.sub }}>kg</span>
          </div>
          <button onClick={() => step(0.1)} style={{ width: 46, height: 46, borderRadius: '50%', border: `1.5px solid ${T.line}`, background: T.bg, color: T.ink, fontSize: 26, cursor: 'pointer', lineHeight: 1 }}>+</button>
        </div>
        <div style={{ marginTop: 12, fontSize: 13.5, fontWeight: 700, color: yest==null ? T.sub : Math.abs(delta)<0.05 ? T.sub : delta<0 ? T.good : T.Bd }}>
          {yest == null ? '记录你的第一笔体重 🎉' : Math.abs(delta) < 0.05 ? '与昨天持平' : `比昨天 ${delta<0?'↓':'↑'} ${Math.abs(delta).toFixed(1)}kg`}
        </div>
      </div>
      {/* slider */}
      <input type="range" min={50} max={80} step={0.1} value={val} onChange={(e) => setVal(parseFloat(e.target.value))} style={{ width: '100%', accentColor: T.Ac, margin: '14px 0 22px' }} />
      <button onClick={() => { doCheckin(val); onClose(); }} style={{ width: '100%', border: 'none', borderRadius: T.rBtn, padding: 15, cursor: 'pointer', background: `linear-gradient(135deg, ${T.Ac}, ${T.Ad})`, color: '#fff', fontFamily: T.FONT, fontSize: 16, fontWeight: 700, boxShadow: T.dark?'none':'0 6px 16px rgba(200,90,40,0.28)' }}>完成打卡</button>
    </Sheet>
  );
}

function GoalSheet({ open, onClose }) {
  const T = useTheme();
  const app = useApp();
  const { A, goal, setGoalA } = app;
  const [val, setVal] = React.useState(goal.A);
  React.useEffect(() => { if (open) setVal(goal.A); }, [open]);
  const step = (d) => setVal(v => Math.min(80, Math.max(50, Math.round((v + d) * 10) / 10)));
  const toLose = (A.cur - val).toFixed(1);

  return (
    <Sheet open={open} onClose={onClose} title="设定目标体重">
      <div style={{ textAlign: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
          <button onClick={() => step(-0.5)} style={{ width: 46, height: 46, borderRadius: '50%', border: `1.5px solid ${T.line}`, background: T.bg, color: T.ink, fontSize: 26, cursor: 'pointer', lineHeight: 1 }}>−</button>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: T.NUM, fontSize: 56, fontWeight: 800, color: T.good, lineHeight: 1 }}>{val.toFixed(1)}</span>
            <span style={{ fontFamily: T.NUM, fontSize: 18, fontWeight: 600, color: T.sub }}>kg</span>
          </div>
          <button onClick={() => step(0.5)} style={{ width: 46, height: 46, borderRadius: '50%', border: `1.5px solid ${T.line}`, background: T.bg, color: T.ink, fontSize: 26, cursor: 'pointer', lineHeight: 1 }}>+</button>
        </div>
        <div style={{ marginTop: 12, fontSize: 13.5, color: T.sub }}>从当前 <b style={{ fontFamily: T.NUM, color: T.ink }}>{A.cur}kg</b> 还需减 <b style={{ fontFamily: T.NUM, color: T.Ad }}>{toLose}kg</b></div>
      </div>
      <input type="range" min={50} max={80} step={0.5} value={val} onChange={(e) => setVal(parseFloat(e.target.value))} style={{ width: '100%', accentColor: T.good, margin: '16px 0 22px' }} />
      <button onClick={() => { setGoalA(val); onClose(); }} style={{ width: '100%', border: 'none', borderRadius: T.rBtn, padding: 15, cursor: 'pointer', background: `linear-gradient(135deg, ${T.Ac}, ${T.Ad})`, color: '#fff', fontFamily: T.FONT, fontSize: 16, fontWeight: 700 }}>保存目标</button>
    </Sheet>
  );
}

Object.assign(window, { Sheet, CheckinSheet, GoalSheet });