// signin/OnboardingChain.jsx — visualises the full post-auth flow with
// 7 numbered phones in a row. Welcome → Credentials →
// HealthKit intro → HealthKit system sheet → Initial sync → Tour →
// Today (landing). Connector arrows between cards. Server is always
// ordent.us, so there is no server-URL step.

function OnboardingArrow({ dark = false }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', height: 920,
      flex: '0 0 36px',
    }}>
      <div style={{
        width: 36, height: 1, background: 'var(--text-tertiary)',
        position: 'relative',
      }}>
        <span style={{
          position: 'absolute', right: -1, top: -4,
          color: 'var(--text-tertiary)',
        }}>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <path d="M1 1l4 4-4 4M9 5H0" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </div>
    </div>
  );
}
window.OnboardingArrow = OnboardingArrow;

// First-sync screen — happens once after HealthKit grant.
// Shows what's being pulled, with progress per stream.
function InitialSync({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <div style={{
        padding: '120px 28px 0',
        textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{
          width: 76, height: 76, borderRadius: 18,
          background: 'var(--io-fill-tertiary)',
          display: 'grid', placeItems: 'center',
          color: 'var(--io-blue)',
          position: 'relative',
        }}>
          <Icon name="refresh" size={36} stroke={2}/>
        </div>
        <div className="t1" style={{ marginTop: 22, letterSpacing: -0.5 }}>Pulling your data.</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', marginTop: 8, lineHeight: 1.45, maxWidth: 300 }}>
          One-time setup. Subscribed feeds, last 14 days of sleep, and your wake schedule. Stays connected after this.
        </div>
      </div>

      {/* Progress per stream */}
      <div style={{ padding: '32px 16px 0' }}>
        <div className="card" style={{ padding: 4 }}>
          {[
            { ic: 'calendar', c: 'var(--io-blue)',     t: 'Calendars',        s: '7 of 7 feeds',           done: true },
            { ic: 'moon',     c: 'var(--io-sleep)',    t: 'Sleep · last 14d', s: '142 of 142 samples',     done: true },
            { ic: 'heart',    c: 'var(--io-heart)',    t: 'Heart rate',       s: '1,284 samples',          done: false, pct: 64 },
            { ic: 'activity', c: 'var(--io-activity)', t: 'Activity',         s: 'Queued',                 done: false, pct: 0 },
            { ic: 'sparkles', c: 'var(--io-indigo)',   t: 'Bedtime model',    s: 'Queued',                 done: false, pct: 0 },
          ].map((r, i) => (
            <div key={r.t} className="lrow" style={{ paddingTop: 12, paddingBottom: 12 }}>
              <div className="li-ic" style={{ background: r.c }}><Icon name={r.ic} size={16} stroke={2.2}/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="li-ti" style={{ fontSize: 16 }}>{r.t}</div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>{r.s}</div>
              </div>
              {r.done ? (
                <div style={{ color: 'var(--io-green)' }}><Icon name="check" size={16} stroke={3}/></div>
              ) : r.pct > 0 ? (
                <span className="spinner dark" style={{ width: 16, height: 16, borderWidth: 2 }}/>
              ) : (
                <span className="fn" style={{ color: 'var(--io-label-tertiary)' }}>—</span>
              )}
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '20px 24px 0' }}>
        <div className="fn" style={{ color: 'var(--io-label-tertiary)', textAlign: 'center' }}>
          You can keep using the app while this runs.
        </div>
      </div>
    </FrameScreen>
  );
}
window.InitialSync = InitialSync;

// Land-on-Today after onboarding completes — mostly empty, with a
// gentle "first morning" toast. Reuses TodayHome with a tweaked greeting.
function FirstMorning({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle
        title="Today"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)' }}>Welcome, Lukas</div>}
        trailing={<><PillBtn><Icon name="plus" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}/>

      <div className="greet" style={{ marginTop: 4 }}>
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,.65)' }}>Setup complete</div>
        <div className="t1" style={{ color: '#fff', marginTop: 8, letterSpacing: -0.45, lineHeight: 1.15 }}>
          Your page is ready.
        </div>
        <div className="bd" style={{ color: 'rgba(255,255,255,.75)', marginTop: 6, lineHeight: 1.4 }}>
          Tomorrow morning, you'll see today's first event and tonight's bedtime here.
        </div>
      </div>

      <div style={{ padding: '24px 28px 0', textAlign: 'center' }}>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', lineHeight: 1.5 }}>
          The Arc fills in as the day starts.<br/>
          Tap any tab below to look around.
        </div>
      </div>

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