// menove-checkin.jsx, the Daily Check-in (the sweep), per handoff brief §1.
// Depends on menove-final.jsx (FB, FinalScreen) loaded first.
// Exports: CISheetFrame, CISheet, CIHomeAfter, CINotif, CIDotBoard

const CI_SEV = [
  { label: 'mild',     br: '50% 50% 50% 50% / 56% 56% 44% 44%', rot: 0 },
  { label: 'moderate', br: '54% 46% 52% 48% / 58% 56% 44% 42%', rot: -6 },
  { label: 'strong',   br: '58% 42% 56% 44% / 70% 66% 34% 30%', rot: 5 },
];

/* one severity stone-dot */
function CIDot({ on, ghost, i, size, dim }) {
  const s = CI_SEV[i];
  return (
    <span style={{
      width: size || 19, height: (size || 19) * .78, flex: 'none', boxSizing: 'border-box',
      borderRadius: s.br, transform: `rotate(${s.rot}deg)`,
      background: on ? FB.plum : ghost ? 'rgba(112,6,101,.28)' : 'transparent',
      border: on || ghost ? 'none' : `1.5px solid ${dim ? 'rgba(42,37,48,.18)' : 'rgba(42,37,48,.32)'}`,
    }}></span>
  );
}

/* a Daily Focus row, sel: null | 0 | 1 | 2 · pre = carried from yesterday (ghost fill, one tap confirms) */
function CIRow({ name, sel, pre, dim }) {
  const on = sel !== null && sel !== undefined;
  const ghost = !on && pre !== null && pre !== undefined;
  const lvl = on ? sel : pre;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '12.5px 10px',
      borderTop: `1px solid ${FB.line}`, margin: '0 -10px',
      background: on ? 'rgba(112,6,101,.05)' : 'transparent',
      opacity: dim ? .45 : 1,
    }}>
      <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: on ? FB.plum : FB.ink }}>
        {name}
        {ghost ? <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: FB.soft, marginLeft: 8 }}>yesterday</span> : null}
      </span>
      <span style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        {[0, 1, 2].map((i) => <CIDot key={i} i={i} on={sel === i} ghost={ghost && pre === i} dim={dim} />)}
      </span>
    </div>
  );
}

/* phone frame: home behind, scrim, bottom sheet ~85% */
function CISheetFrame({ label, state, children }) {
  return (
    <div data-screen-label={label} style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', fontFamily: FB.sans }}>
      <FinalScreen state={state || 'steady'} mode="day" />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,16,30,.44)' }}></div>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '85%',
        background: FB.paper, borderRadius: '22px 22px 0 0', color: FB.ink,
        display: 'flex', flexDirection: 'column', padding: '8px 24px 16px', boxSizing: 'border-box',
        boxShadow: '0 -24px 60px -30px rgba(20,8,25,.55)',
      }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: 'rgba(42,37,48,.18)', margin: '4px auto 0', flex: 'none' }}></div>
        {children}
      </div>
    </div>
  );
}

/* the sheet body, variants via props */
function CISheet({ label, state, monaLine, sel, pre, steady, dimRows, commit }) {
  const rows = [
    ['Hot flashes', sel && sel['Hot flashes'], pre && pre['Hot flashes']],
    ['Night sweats', sel && sel['Night sweats'], pre && pre['Night sweats']],
    ['Brain fog', sel && sel['Brain fog'], pre && pre['Brain fog']],
    ['Waking at 3am', sel && sel['Waking at 3am'], pre && pre['Waking at 3am']],
    ['Fatigue', sel && sel['Fatigue'], pre && pre['Fatigue']],
    ['Joint aches', sel && sel['Joint aches'], pre && pre['Joint aches']],
    ['Irritability', sel && sel['Irritability'], pre && pre['Irritability']],
  ];
  return (
    <CISheetFrame label={label} state={state}>
      <div style={{ marginTop: 18, flex: 'none' }}>
        <div style={{ fontFamily: FB.display, fontSize: 24, letterSpacing: '.005em' }}>Check in</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.55, color: FB.body, marginTop: 5 }}>{monaLine || 'How are you arriving?'}</div>
      </div>

      <div style={{ marginTop: 14, flex: 'none', background: 'rgba(47,122,93,.07)', borderRadius: 10, padding: '2px 12px' }}>
        {[['Sleep 6h 10m', 'from Apple Health'], ['Steps 4,820 · Active 22m', 'from Apple Health']].map(([v, src]) => (
          <div key={v} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0' }}>
            <span style={{ width: 17, height: 17, borderRadius: '50%', background: '#2F7A5D', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
              <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" style={{ width: 9, height: 9 }}><path d="M5 12l5 5L20 6" /></svg>
            </span>
            <span style={{ fontSize: 12, fontWeight: 600 }}>{v}</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: FB.soft, flex: 1 }}>{src}</span>
            <span style={{ fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700, color: '#2F7A5D' }}>auto</span>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, marginBottom: 6, flex: 'none' }}>
        <span style={{ fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft }}>Your daily focus</span>
        <span style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
          {CI_SEV.map((s, i) => (
            <span key={s.label} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <CIDot i={i} on size={11} />
              <span style={{ fontSize: 8.5, letterSpacing: '.06em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft }}>{s.label}</span>
            </span>
          ))}
        </span>
      </div>

      <div style={{ flex: 'none' }}>
        {rows.map(([n, s, p]) => <CIRow key={n} name={n} sel={s} pre={p} dim={dimRows} />)}
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '13px 0 0', borderTop: `1px solid ${FB.line}`, margin: '0 0' }}>
          <span style={{ width: 16, height: 16, borderRadius: '50%', boxShadow: `inset 0 0 0 1.4px ${FB.plum}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: FB.plum, fontSize: 12, fontWeight: 700, flex: 'none' }}>+</span>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: FB.plum, opacity: dimRows ? .45 : 1 }}>Anything else to add</span>
        </div>
      </div>

      <div style={{ flex: 1 }} />

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, flex: 'none',
        borderRadius: 999, padding: '12px 18px', fontSize: 13, fontWeight: 600,
        background: steady ? FB.aub : 'transparent',
        color: steady ? '#fff' : FB.body,
        boxShadow: steady ? 'none' : `inset 0 0 0 1.4px ${FB.line}`,
      }}>
        {steady ? <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6" style={{ width: 13, height: 13 }}><path d="M5 12l5 5L20 6" /></svg> : null}
        Feeling steady today · nothing to report
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 10, flex: 'none',
        borderRadius: 999, padding: '14px 18px', fontSize: 14, fontWeight: 600,
        background: steady ? 'rgba(69,27,79,.25)' : FB.aub, color: '#fff',
        boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)',
      }}>{commit || 'Good morning, Mona'}</div>
    </CISheetFrame>
  );
}

/* home after commit, stone reacted, toast confirms */
function CIHomeAfter({ state }) {
  return (
    <div data-screen-label="CI · After commit" style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', fontFamily: FB.sans }}>
      <FinalScreen state={state || 'tender'} mode="day" />
      <div style={{
        position: 'absolute', top: 64, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
        background: '#fff', borderRadius: 999, padding: '9px 16px',
        boxShadow: `inset 0 0 0 1px ${FB.line}, 0 18px 40px -18px rgba(35,20,45,.5)`,
      }}>
        <span style={{ width: 15, height: 15, borderRadius: '50%', background: '#2F7A5D', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.4" style={{ width: 8, height: 8 }}><path d="M5 12l5 5L20 6" /></svg>
        </span>
        <span style={{ fontSize: 12, fontWeight: 600, color: FB.ink }}>Checked in, today is taking shape.</span>
      </div>
    </div>
  );
}

/* Mona's morning text, lock-screen entry (open item: quick replies) */
function CINotif() {
  return (
    <div data-screen-label="CI · Morning text" style={{
      width: '100%', height: '100%', overflow: 'hidden', fontFamily: FB.sans, color: '#fff',
      background: `linear-gradient(180deg, #2E1C36 0%, ${FB.aub} 55%, #58356A 100%)`,
      display: 'flex', flexDirection: 'column', padding: '0 20px', boxSizing: 'border-box',
    }}>
      <div style={{ textAlign: 'center', marginTop: 84 }}>
        <div style={{ fontSize: 17, fontWeight: 600, opacity: .85 }}>Tuesday, June 9</div>
        <div style={{ fontSize: 84, fontWeight: 700, letterSpacing: '-.02em', lineHeight: 1, marginTop: 4 }}>7:42</div>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ background: 'rgba(250,249,246,.92)', borderRadius: 20, padding: '13px 15px', color: FB.ink, backdropFilter: 'blur(20px)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ width: 30, height: 30, borderRadius: 8, background: FB.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `inset 0 0 0 1px ${FB.line}` }}>
            <svg viewBox="0 0 64 64" fill="none" style={{ width: 20 }}>
              <path d="M24.5 21.5 C24.8 18.4 27.9 16.2 32.4 16.3 C36.7 16.4 39.6 18.7 39.9 21.8 C39.6 24.9 36.6 26.9 32.2 26.8 C28 26.7 24.9 24.6 24.5 21.5 Z" fill={FB.plum} />
              <path d="M19.5 35 C20 30.5 25 27.8 31.6 28 C38.5 28.2 44.1 31 44.5 35.4 C44.1 39.8 38.5 42.4 31.6 42.2 C25 42 19.9 39.4 19.5 35 Z" fill={FB.plum} />
              <path d="M14 50 C15 44.5 22 41.5 32 41.8 C42 42.1 49.5 45.5 50 51 C49.5 56.5 42 59.5 32 59.4 C22 59.3 14.5 55.5 14 50 Z" fill={FB.plum} />
            </svg>
          </span>
          <span style={{ fontSize: 12, fontWeight: 700, flex: 1 }}>Mona · Menovē</span>
          <span style={{ fontSize: 11, color: FB.soft }}>now</span>
        </div>
        <div style={{ fontSize: 13.5, lineHeight: 1.5, marginTop: 8 }}>Good morning, Aujéna. How are you arriving today?</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          {['Steady', 'Foggy', 'Rough'].map((t) => (
            <span key={t} style={{ flex: 1, textAlign: 'center', borderRadius: 999, padding: '8px 0', fontSize: 12.5, fontWeight: 600, color: FB.aub, boxShadow: `inset 0 0 0 1.4px rgba(69,27,79,.35)` }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ height: 130 }} />
      <div style={{ width: 134, height: 5, borderRadius: 3, background: 'rgba(255,255,255,.85)', margin: '0 auto 8px' }}></div>
    </div>
  );
}

/* “Anything else to add”, the full list, opened in place (sheet grows to full height) */
function CISheetFull({ label }) {
  const cats = [
    ['Mood', [['Anxiety', null], ['Sudden rage', 1], ['Low mood', null], ['Tearfulness', null], ['Overwhelm', null]]],
    ['Head & senses', [['Headaches', null], ['Dizziness', null], ['Tinnitus', null], ['Dry eyes', null]]],
  ];
  const closed = ['Heart', 'Cycle & hormonal', 'Skin & hair', 'Intimacy & bladder', 'Digestion & weight'];
  return (
    <CISheetFrame label={label}>
      <div style={{ marginTop: 18, flex: 'none', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: FB.display, fontSize: 24 }}>Anything else?</div>
          <div style={{ fontSize: 12.5, color: FB.body, marginTop: 5 }}>Every sign, by category, mark what showed up.</div>
        </div>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: FB.plum }}>Done</span>
      </div>
      <div style={{ marginTop: 14, flex: 1, overflow: 'hidden' }}>
        {cats.map(([cat, items]) => (
          <div key={cat} style={{ paddingBottom: 6 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 0 2px' }}>
              <span style={{ fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.ink }}>{cat}</span>
              <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2.2" style={{ width: 12, height: 12 }}><path d="M6 15l6-6 6 6" /></svg>
            </div>
            {items.map(([n, s]) => <CIRow key={n} name={n} sel={s} />)}
          </div>
        ))}
        {closed.map((cat) => (
          <div key={cat} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 0', borderTop: `1px solid ${FB.line}` }}>
            <span style={{ fontSize: 10, letterSpacing: '.2em', textTransform: 'uppercase', fontWeight: 700, color: FB.ink }}>{cat}</span>
            <svg viewBox="0 0 24 24" fill="none" stroke={FB.soft} strokeWidth="2.2" style={{ width: 12, height: 12 }}><path d="M9 6l6 6-6 6" /></svg>
          </div>
        ))}
      </div>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 10, flex: 'none',
        borderRadius: 999, padding: '14px 18px', fontSize: 14, fontWeight: 600,
        background: FB.aub, color: '#fff', boxShadow: '0 14px 28px -16px rgba(40,8,40,.5)',
      }}>Good morning, Mona</div>
    </CISheetFrame>
  );
}

/* component board, severity dots, row states, the laws */
function CIDotBoard() {
  return (
    <div style={{ width: '100%', height: '100%', background: FB.paper, padding: '44px 50px', boxSizing: 'border-box', fontFamily: FB.sans, color: FB.ink }}>
      <div style={{ fontSize: 10.5, letterSpacing: '.24em', textTransform: 'uppercase', fontWeight: 700, color: FB.soft }}>Component · severity stone-dots</div>
      <div style={{ display: 'flex', gap: 44, marginTop: 26, alignItems: 'flex-end' }}>
        {CI_SEV.map((s, i) => (
          <div key={s.label} style={{ textAlign: 'center' }}>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
              {[0, 1, 2].map((j) => <CIDot key={j} i={j} on={j === i} size={26} />)}
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: FB.plum, marginTop: 12, textTransform: 'capitalize' }}>{s.label}</div>
          </div>
        ))}
        <div style={{ textAlign: 'center' }}>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
            {[0, 1, 2].map((j) => <CIDot key={j} i={j} size={26} />)}
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, color: FB.soft, marginTop: 12 }}>Untouched = not present</div>
        </div>
      </div>
      <div style={{ width: 420, marginTop: 30 }}>
        <CIRow name="Brain fog" sel={1} />
        <CIRow name="Joint aches" sel={null} />
      </div>
      <div style={{ fontSize: 12.5, lineHeight: 1.7, color: FB.body, marginTop: 26, maxWidth: 560 }}>
        Three explicit levels, all states always visible, no sliders, no cycling (locked). One tap selects; tapping the same stone clears.
        The “dots” are drawn as the system's small stones, same silhouettes as every radio in the app, sized 19px with ≥44pt tap zones.
        The legend pairs each label with its stone inline (top-right of the list), so labels never have to column-align with the row dots.
        Rows arrive pre-filled with yesterday's intensity as a ghost fill marked “yesterday”, one tap confirms or adjusts, so a repeat day costs almost nothing.
        Selected rows tint plum at 5% with the name in plum. Nothing re-renders on selection; toggles happen in place.
        Touch budget: 1 tap (steady day) to ~6 taps (heavy day), sub-ten seconds, always.
      </div>
    </div>
  );
}

Object.assign(window, { CISheetFrame, CISheet, CISheetFull, CIHomeAfter, CINotif, CIDotBoard, CIRow, CIDot });
