// health/HealthStates.jsx
// Every screen needs an empty, loading, error, offline, and (global)
// session-expired variant. We bundle the Health-tab versions of each.
//
// Exports: HealthEmpty, HealthLoading, HealthError, HealthOffline,
// SessionExpired.

// ───────────────────────────────────────────────────────────
// EMPTY — first-launch / no data yet (HealthSync hasn't posted).
// ───────────────────────────────────────────────────────────
function HealthEmpty({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle
        title="Summary"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace:'nowrap' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<><PillBtn><Icon name="search" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}
      />

      {/* Greyed-out bedtime hero — "Smart Bedtime will appear once your first night of sleep data arrives" */}
      <div style={{ margin: '4px 16px 0', padding: '20px 22px', borderRadius: 22,
        background: dark ? 'linear-gradient(135deg, #1C1C1E, #2C2C2E)' : 'linear-gradient(135deg, #F2F2F7, #E8E8ED)',
        border: '1px solid var(--io-separator)',
      }}>
        <div className="eyebrow" style={{ color: 'var(--io-label-tertiary)' }}>Tonight's bedtime</div>
        <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="m-hero" style={{ color: 'var(--io-label-tertiary)' }}>—:——</span>
        </div>
        <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 8, lineHeight: 1.4 }}>
          Smart Bedtime needs one full night of sleep data before it can recommend a time.
        </div>
      </div>

      {/* Hero empty state — illustration + headline + body + primary CTA */}
      <div style={{
        margin: '40px 24px 0', padding: '36px 24px',
        textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      }}>
        {/* iconographic moon-in-circle */}
        <div style={{
          width: 76, height: 76, borderRadius: '50%',
          background: 'var(--io-fill-tertiary)',
          display: 'grid', placeItems: 'center',
          color: 'var(--io-purple)',
        }}>
          <Icon name="moon" size={36} stroke={1.8}/>
        </div>
        <div className="t2" style={{ letterSpacing: -0.4 }}>No health data yet</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', maxWidth: 280, lineHeight: 1.4 }}>
          Install the HealthSync companion on this device to bring Apple Health into Ordentus. Sleep, cognition and activity will appear once the first sync completes.
        </div>
        <button style={{
          marginTop: 8, border: 'none', cursor: 'pointer',
          background: 'var(--io-blue)', color: '#fff',
          borderRadius: 12, padding: '13px 22px',
          fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
          display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>Open HealthSync</button>
        <button style={{
          border: 'none', cursor: 'pointer', background: 'transparent',
          color: 'var(--io-blue)', fontSize: 15, fontWeight: 500, letterSpacing: -0.24,
          padding: '4px 10px',
        }}>Add data manually</button>
      </div>

      <SectionHead label="What you'll see"/>
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { e: '🌙', t: 'Tonight\'s bedtime',  b: 'Worked back from your next morning event and an 8h sleep goal.' },
          { e: '😴', t: '14-day sleep debt',   b: 'How far you are from your goal across the last two weeks.' },
          { e: '🧠', t: 'Cognitive forecast',  b: 'How short sleep is likely to affect attention, memory, reaction.' },
        ].map(r => (
          <InsightCard key={r.t} emoji={r.e} title={r.t} body={r.b}/>
        ))}
      </div>

      <div className="scroll-pad"/>
      <TabBar active="health"/>
    </FrameScreen>
  );
}
window.HealthEmpty = HealthEmpty;

// ───────────────────────────────────────────────────────────
// LOADING — skeleton shimmer mirroring the overview.
// ───────────────────────────────────────────────────────────
function HealthLoading({ dark = false }) {
  const Sk = ({ w = '100%', h = 12, r = 6, style }) => (
    <div className="sk" style={{ width: w, height: h, borderRadius: r, ...style }}/>
  );
  return (
    <FrameScreen dark={dark}>
      <BigTitle
        title="Summary"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace:'nowrap' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<><PillBtn><Icon name="search" size={18} stroke={2.4}/></PillBtn>
          <div className="sk" style={{ width: 32, height: 32, borderRadius: 16 }}/></>}
      />

      {/* Skeleton bedtime hero */}
      <div style={{
        margin: '4px 16px 0', padding: '22px 22px', borderRadius: 22,
        background: 'var(--io-grad-bedtime-deep)', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Sk w={14} h={14} r={7} style={{ background: 'rgba(255,255,255,0.25)' }}/>
          <Sk w={120} h={9} style={{ background: 'rgba(255,255,255,0.25)' }}/>
        </div>
        <Sk w={210} h={54} style={{ background: 'rgba(255,255,255,0.25)', marginTop: 14, borderRadius: 12 }}/>
        <Sk w={'70%'} h={9} style={{ background: 'rgba(255,255,255,0.18)', marginTop: 18 }}/>
        <Sk w={'40%'} h={9} style={{ background: 'rgba(255,255,255,0.18)', marginTop: 8 }}/>
      </div>

      <div style={{ padding: '24px 20px 0' }}>
        <Sk w={88} h={16}/>
      </div>

      <div className="m-row three" style={{ marginTop: 10 }}>
        {[1,2,3].map(i => (
          <div key={i} className="tile" style={{ minHeight: 132 }}>
            <Sk w={70} h={9}/>
            <Sk w={60} h={28} style={{ marginTop: 14, borderRadius: 8 }}/>
            <Sk w={'80%'} h={8} style={{ marginTop: 'auto' }}/>
          </div>
        ))}
      </div>

      <div style={{ padding: '12px 16px 0' }}>
        <div className="card padded" style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Sk w={140} h={14}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', alignItems: 'end', gap: 12, height: 110 }}>
            {[64, 50, 80, 76, 44, 96, 58].map((h, i) => (
              <div key={i} className="sk" style={{ height: h, borderRadius: 4, animationDelay: `${i * 80}ms` }}/>
            ))}
          </div>
          <Sk w={'60%'} h={9}/>
        </div>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <Sk w={88} h={16}/>
      </div>
      <div className="m-row" style={{ marginTop: 10 }}>
        {[1,2].map(i => (
          <div key={i} className="tile" style={{ minHeight: 110 }}>
            <Sk w={70} h={9}/>
            <Sk w={70} h={28} style={{ marginTop: 14, borderRadius: 8 }}/>
            <Sk w={'70%'} h={8} style={{ marginTop: 12 }}/>
          </div>
        ))}
      </div>

      <div className="scroll-pad"/>
      <TabBar active="health"/>
    </FrameScreen>
  );
}
window.HealthLoading = HealthLoading;

// ───────────────────────────────────────────────────────────
// ERROR — sync failure banner on top of the overview.
// (Same content as the populated screen, but with the error
// banner mounted under the large title — designed never to
// modal-interrupt unless destructive.)
// ───────────────────────────────────────────────────────────
function HealthError({ dark = false }) {
  return (
    <HealthOverview
      dark={dark}
      banner={
        <Banner kind="err" icon="alert" action="Retry">
          <div style={{ fontWeight: 600 }}>Couldn't reach your server</div>
          <div style={{ fontSize: 12, opacity: 0.85 }}>Showing the last sync from 9:14 AM.</div>
        </Banner>
      }
    />
  );
}
window.HealthError = HealthError;

// ───────────────────────────────────────────────────────────
// OFFLINE — neutral grey banner, still shows cached data.
// ───────────────────────────────────────────────────────────
function HealthOffline({ dark = false }) {
  return (
    <HealthOverview
      dark={dark}
      banner={
        <Banner kind="off" icon="wifi-off">
          <div style={{ fontWeight: 600 }}>You're offline</div>
          <div style={{ fontSize: 12, opacity: 0.7 }}>Cached data from 9:14 AM · we'll resync when you're back.</div>
        </Banner>
      }
    />
  );
}
window.HealthOffline = HealthOffline;

// ───────────────────────────────────────────────────────────
// SESSION EXPIRED — modal alert over a dimmed overview.
// Per spec: errors are inline EXCEPT destructive/auth flows.
// ───────────────────────────────────────────────────────────
function SessionExpired({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      {/* dimmed base */}
      <div style={{ filter: 'blur(1px)', pointerEvents: 'none' }}>
        <BigTitle
          title="Summary"
          leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace:'nowrap' }}>
            <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
          </div>}
          trailing={<><PillBtn><Icon name="search" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}
        />
        <div className="bedtime-inset" style={{ marginTop: 4 }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,.72)' }}>Tonight's bedtime</div>
          <div className="m-hero" data-num style={{ color: '#fff', marginTop: 14 }}>10:30 <span style={{ fontSize: 22, opacity: 0.6 }}>PM</span></div>
        </div>
      </div>

      <div className="modal-scrim">
        <div className="modal">
          <div className="body">
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: 'var(--io-fill-tertiary)',
              display: 'grid', placeItems: 'center',
              color: 'var(--io-blue)',
              margin: '0 auto 10px',
            }}>
              <Icon name="lock" size={20} stroke={2.2}/>
            </div>
            <div className="hd" style={{ fontSize: 17 }}>Session expired</div>
            <div className="ca" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.35 }}>
              Sign in again to resume syncing with your Ordentus server. Your data is cached locally.
            </div>
          </div>
          <div className="acts">
            <div>Not now</div>
            <div className="bold">Sign in</div>
          </div>
        </div>
      </div>

      <TabBar active="health"/>
    </FrameScreen>
  );
}
window.SessionExpired = SessionExpired;
