// PULS3 — Weekly Recap + Peak Moment + Enhanced Dashboard + Chat

/* ============================================================
   Weekly recap — Sunday reflection
   ============================================================ */
function WeeklyRecap() {
  return (
    <ScreenFrame tint="celebration">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        overflowY: 'auto', padding: '62px 20px 40px', boxSizing: 'border-box',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <BackPill />
          <Eyebrow color="#00D4FF">Week of Oct 7</Eyebrow>
        </div>

        <div style={{ fontSize: 30, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.015em', marginBottom: 6 }}>
          Here's your week,
        </div>
        <div style={{ fontSize: 30, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.015em', color: 'rgba(255,255,255,0.6)', marginBottom: 22 }}>
          in plain English.
        </div>

        {/* Big insight */}
        <GlassCard wash glowColor="#A78BDB" style={{ marginBottom: 14 }}>
          <Eyebrow color="rgba(255,255,255,0.5)">The thread this week</Eyebrow>
          <div style={{ fontSize: 18, fontWeight: 500, lineHeight: 1.45, color: 'rgba(255,255,255,0.92)', marginBottom: 10 }}>
            You slept worse mid-week. By Friday you were snappy with Maya. Saturday's long walk reset it.
          </div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>
            Your body is more sensitive to sleep loss around day 21 — not a flaw, just something worth planning for.
          </div>
        </GlassCard>

        {/* Pillar strip */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
          <RecapTile color="#A78BDB" Icon={IcMoon}  label="Sleep"    delta="−38 min" sub="vs last week" trend="down" />
          <RecapTile color="#FAC257" Icon={IcMove}  label="Movement" delta="+14%"    sub="minutes active" trend="up" />
          <RecapTile color="#F28059" Icon={IcLeaf}  label="Nutrition" delta="Steady"  sub="protein on track" trend="flat" />
          <RecapTile color="#D97B87" Icon={IcSpark} label="Mood"     delta="Lighter" sub="by Friday night" trend="up" />
        </div>

        {/* Win + watch */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16,
        }}>
          <div style={{
            padding: 14, borderRadius: 18,
            background: 'rgba(140,221,179,0.08)',
            border: '1px solid rgba(140,221,179,0.26)',
            display: 'flex', gap: 12,
          }}>
            <div style={{ color: '#8CDDB3', flexShrink: 0, marginTop: 2 }}><IcCheck size={18} stroke={2.2}/></div>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: '#8CDDB3', letterSpacing: '0.03em' }}>Win</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5, marginTop: 2 }}>
                You kept protein above 100g six days running. That's a real base.
              </div>
            </div>
          </div>
          <div style={{
            padding: 14, borderRadius: 18,
            background: 'rgba(250,194,87,0.06)',
            border: '1px solid rgba(250,194,87,0.22)',
            display: 'flex', gap: 12,
          }}>
            <div style={{ color: '#FAC257', flexShrink: 0, marginTop: 2 }}><IcSpark size={18} stroke={1.8}/></div>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: '#FAC257', letterSpacing: '0.03em' }}>Worth watching</div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5, marginTop: 2 }}>
                Three afternoon coffees Tue–Thu lined up with three rough nights.
              </div>
            </div>
          </div>
        </div>

        {/* Reflection prompt */}
        <Eyebrow color="rgba(255,255,255,0.45)">One question for you</Eyebrow>
        <GlassCard style={{ padding: 16, marginBottom: 14 }}>
          <div style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 14 }}>
            What's one thing that <i>felt</i> better this week, even if the data didn't show it?
          </div>
          <div style={{
            padding: '12px 14px', borderRadius: 14,
            background: 'rgba(0,0,0,0.22)', border: '1px solid rgba(255,255,255,0.08)',
            fontSize: 14, color: 'rgba(255,255,255,0.45)',
          }}>
            Type or tap the mic…
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
            <Chip size="sm">Saturday walk</Chip>
            <Chip size="sm">Morning light</Chip>
            <Chip size="sm">Not right now</Chip>
          </div>
        </GlassCard>
      </div>
    </ScreenFrame>
  );
}

function RecapTile({ color, Icon, label, delta, sub, trend }) {
  const arrow = trend === 'up' ? '↑' : trend === 'down' ? '↓' : '·';
  return (
    <div style={{
      padding: 14, borderRadius: 20,
      background: 'rgba(255,255,255,0.05)',
      border: '1px solid rgba(255,255,255,0.10)',
      backdropFilter: 'blur(16px)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, color, fontSize: 12.5, fontWeight: 500, marginBottom: 10 }}>
        <Icon size={14} />{label}
      </div>
      <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>
        <span style={{ color, marginRight: 4 }}>{arrow}</span>{delta}
      </div>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{sub}</div>
    </div>
  );
}

/* ============================================================
   Peak moment — graduation / milestone
   ============================================================ */
function PeakMoment() {
  return (
    <ScreenFrame tint="celebration">
      {/* Extra burst */}
      <div style={{
        position: 'absolute', top: -60, left: '50%', transform: 'translateX(-50%)',
        width: 400, height: 400, borderRadius: '50%', zIndex: 0,
        background: 'radial-gradient(circle, rgba(0,212,255,0.22), transparent 65%)',
        filter: 'blur(20px)',
      }} />
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        display: 'flex', flexDirection: 'column',
        padding: '84px 22px 40px', boxSizing: 'border-box',
        alignItems: 'center', textAlign: 'center',
      }}>
        {/* Medallion */}
        <div style={{ position: 'relative', marginBottom: 28 }}>
          <div style={{
            position: 'absolute', inset: -30, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(140,221,179,0.2), transparent 60%)',
          }}/>
          <svg width="140" height="140" viewBox="0 0 140 140" style={{ position: 'relative' }}>
            <defs>
              <linearGradient id="medg" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#00D4FF"/>
                <stop offset="60%" stopColor="#A78BDB"/>
                <stop offset="100%" stopColor="#8CDDB3"/>
              </linearGradient>
            </defs>
            {/* rays */}
            {Array.from({length: 16}).map((_, i) => {
              const a = (i * 22.5) * Math.PI / 180;
              const x1 = 70 + 58 * Math.cos(a);
              const y1 = 70 + 58 * Math.sin(a);
              const x2 = 70 + 68 * Math.cos(a);
              const y2 = 70 + 68 * Math.sin(a);
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.35)" strokeWidth="1.2" strokeLinecap="round"/>;
            })}
            <circle cx="70" cy="70" r="50" fill="url(#medg)" opacity="0.2"/>
            <circle cx="70" cy="70" r="50" fill="none" stroke="url(#medg)" strokeWidth="2.5"/>
            <circle cx="70" cy="70" r="38" fill="rgba(13,38,38,0.6)" stroke="rgba(255,255,255,0.2)" strokeWidth="1"/>
            {/* checkmark */}
            <path d="M54 70 l12 12 l22 -24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" style={{ filter: 'drop-shadow(0 0 4px rgba(0,212,255,0.8))' }}/>
          </svg>
        </div>

        <Eyebrow color="#8CDDB3">4-week streak</Eyebrow>

        <div style={{
          fontSize: 34, fontWeight: 600, lineHeight: 1.15, letterSpacing: '-0.015em',
          marginTop: 8, marginBottom: 14, textWrap: 'balance',
        }}>
          You just finished a month<br/>
          of listening to your body.
        </div>
        <div style={{ fontSize: 16, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', maxWidth: 320, marginBottom: 28 }}>
          You logged 28 check-ins, walked 42 miles, and slept through 18 nights. But what matters more — you paid attention. That's the whole thing.
        </div>

        {/* Tiny stats */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 28, width: '100%' }}>
          <MiniStat num="28" label="check-ins" color="#A78BDB"/>
          <MiniStat num="42" label="miles walked" color="#FAC257"/>
          <MiniStat num="18" label="nights slept" color="#00D4FF"/>
        </div>

        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PrimaryCTA Icon={IcArrow}>See the full month</PrimaryCTA>
          <GhostCTA>Share a note with yourself</GhostCTA>
        </div>

        <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.4)', marginTop: 20, display: 'flex', alignItems: 'center', gap: 5 }}>
          <IcShield size={11}/> Only you see this.
        </div>
      </div>
    </ScreenFrame>
  );
}

function MiniStat({ num, label, color }) {
  return (
    <div style={{
      flex: 1, padding: '14px 10px', borderRadius: 16,
      background: 'rgba(255,255,255,0.05)',
      border: '1px solid rgba(255,255,255,0.10)',
      textAlign: 'center',
    }}>
      <div style={{
        fontSize: 26, fontWeight: 700, color,
        letterSpacing: '0.01em', lineHeight: 1,
        textShadow: `0 0 10px ${color}50`,
      }}>{num}</div>
      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.55)', marginTop: 6, letterSpacing: '0.04em' }}>{label}</div>
    </div>
  );
}

/* ============================================================
   Today (v2) — calm. One pillar visible at a time, rotating in/out.
   Hero moment + one-thing nudge. Nothing else.
   ============================================================ */
const PILLARS = [
  { key: 'sleep',     color: '#A78BDB', Icon: null, label: 'Sleep',    val: '54',  sub: '−18 vs avg',   tone: 'soft' },
  { key: 'recovery',  color: '#00D4FF', Icon: null, label: 'Recovery', val: '72',  sub: '+4 from yest.',  tone: 'good' },
  { key: 'move',      color: '#FAC257', Icon: null, label: 'Move',     val: 'rest', sub: 'your body asked', tone: 'soft' },
  { key: 'fuel',      color: '#F28059', Icon: null, label: 'Fuel',     val: 'soon', sub: 'nothing logged yet', tone: 'muted' },
];

function DashboardV2() {
  const [expanded, setExpanded] = React.useState(false);
  const icons = { sleep: IcMoon, recovery: IcHeart, move: IcMove, fuel: IcLeaf };

  return (
    <ScreenFrame tint="default">
      <style>{`
        @keyframes puls3DotPulse {
          0%, 100% { opacity: 0.35; transform: scale(1); }
          50%      { opacity: 1;    transform: scale(1.25); }
        }
        @keyframes puls3RingIn {
          from { opacity: 0; transform: translateY(8px) scale(0.94); }
          to   { opacity: 1; transform: translateY(0)  scale(1); }
        }
        .ring-in { animation: puls3RingIn 360ms cubic-bezier(0.22,0.61,0.36,1) both; }
      `}</style>

      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        padding: '62px 24px 110px', boxSizing: 'border-box',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Quiet header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.02em' }}>
            Tuesday · 7:12 am
          </div>
          <CoachAvatar size={30} />
        </div>

        {/* Greeting */}
        <div style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 4 }}>
          Morning, Nora.
        </div>
        <div style={{ fontSize: 17, color: 'rgba(255,255,255,0.55)', marginBottom: 26, lineHeight: 1.4 }}>
          Here's what I'm seeing.
        </div>

        {/* Moment */}
        <div style={{
          padding: '22px 22px 20px', borderRadius: 26, marginBottom: 18,
          background: 'linear-gradient(135deg, rgba(167,139,219,0.14), rgba(0,212,255,0.06))',
          border: '1px solid rgba(167,139,219,0.28)',
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 8px 32px rgba(0,0,0,0.30)',
        }}>
          <div style={{
            position: 'absolute', top: -60, right: -40, width: 180, height: 180,
            borderRadius: '50%', background: '#A78BDB', filter: 'blur(70px)', opacity: 0.22,
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14,
              color: '#A78BDB', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase',
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%', background: '#A78BDB',
                boxShadow: '0 0 8px #A78BDB',
                animation: 'puls3DotPulse 2.4s ease-in-out infinite',
              }} />
              A moment
            </div>
            <div style={{
              fontSize: 22, fontWeight: 500, lineHeight: 1.35, letterSpacing: '-0.01em',
              textWrap: 'balance', color: 'rgba(255,255,255,0.95)', marginBottom: 14,
            }}>
              You woke at 3am again. Your body's running a little warmer tonight — that tracks with where you are in your hormonal cycle.
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Chip selected size="sm">Why?</Chip>
              <Chip size="sm">What helps</Chip>
              <Chip size="sm">Skip</Chip>
            </div>
          </div>
        </div>

        {/* Optional reveal — quiet nudge */}
        {!expanded && (
          <button
            onClick={() => setExpanded(true)}
            style={{
              alignSelf: 'center', marginTop: 2, marginBottom: 10,
              background: 'transparent', border: 'none', cursor: 'pointer',
              color: 'rgba(255,255,255,0.45)', fontSize: 13,
              fontFamily: '-apple-system, system-ui', fontWeight: 500,
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '8px 14px', borderRadius: 999,
            }}
          >
            Show today's numbers
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none">
              <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        )}

        {expanded && (
          <div style={{ marginTop: 4, marginBottom: 10 }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 10, padding: '0 2px',
            }}>
              <div style={{
                fontSize: 11, color: 'rgba(255,255,255,0.45)',
                letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>Today's numbers</div>
              <button
                onClick={() => setExpanded(false)}
                style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  color: 'rgba(255,255,255,0.45)', fontSize: 12, fontWeight: 500,
                  fontFamily: '-apple-system, system-ui',
                }}
              >Hide</button>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {PILLARS.map((p, i) => {
                const PIcon = icons[p.key];
                return (
                  <div key={p.key} className="ring-in" style={{ flex: 1, animationDelay: `${i * 60}ms` }}>
                    <MiniRing color={p.color} Icon={PIcon} label={p.label} val={p.val} sub={p.sub} muted={p.tone === 'muted'}/>
                  </div>
                );
              })}
            </div>
          </div>
        )}

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

        {/* One thing for today */}
        <div>
          <div style={{
            fontSize: 11, color: 'rgba(255,255,255,0.4)',
            letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 10,
          }}>
            One thing for today
          </div>
          <div style={{
            padding: '16px 18px', borderRadius: 20,
            background: 'rgba(255,255,255,0.05)',
            border: '1px solid rgba(255,255,255,0.10)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 12, flexShrink: 0,
              background: 'rgba(0,212,255,0.16)', color: '#00D4FF',
              border: '1px solid rgba(0,212,255,0.32)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><IcBolt size={18}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, lineHeight: 1.3 }}>
                Cool the bedroom to 66° tonight.
              </div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.55)', marginTop: 3 }}>
                That's it. The rest can wait.
              </div>
            </div>
          </div>
        </div>
      </div>
      <TabBar active="Today"/>
    </ScreenFrame>
  );
}

function MiniRing({ color, Icon, label, val, sub, muted }) {
  const r = 20, stroke = 3.5;
  const circ = 2 * Math.PI * r;
  const pct = muted ? 0.15 : 0.7;
  return (
    <div style={{
      padding: '12px 6px', borderRadius: 18,
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.08)',
      textAlign: 'center',
    }}>
      <div style={{ position: 'relative', width: 48, height: 48, margin: '0 auto 6px' }}>
        <svg width="48" height="48" style={{ transform: 'rotate(-90deg)' }}>
          <circle cx="24" cy="24" r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={stroke}/>
          <circle cx="24" cy="24" r={r} fill="none" stroke={color} strokeWidth={stroke}
            strokeDasharray={circ} strokeDashoffset={circ*(1-pct)} strokeLinecap="round"
            style={{ filter: `drop-shadow(0 0 4px ${color}80)` }}/>
        </svg>
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: muted ? 'rgba(255,255,255,0.45)' : '#fff', fontSize: 12, fontWeight: 700,
        }}><Icon size={14} stroke={1.8}/></div>
      </div>
      <div style={{ fontSize: 10.5, color, fontWeight: 600, marginBottom: 1, letterSpacing: '0.04em' }}>{label}</div>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', lineHeight: 1.25 }}>{val}</div>
    </div>
  );
}

Object.assign(window, { WeeklyRecap, PeakMoment, DashboardV2 });