// PULS3 — Movement Deep Dive
// Week ribbon + recovery overlay + "right amount today" signal

function MovementDeepDive() {
  const days = [
    { d: 'Mon', min: 48, recov: 78, kind: 'walk' },
    { d: 'Tue', min: 22, recov: 62, kind: 'rest' },
    { d: 'Wed', min: 62, recov: 54, kind: 'strength' },
    { d: 'Thu', min: 0,  recov: 48, kind: 'rest' },
    { d: 'Fri', min: 55, recov: 66, kind: 'walk' },
    { d: 'Sat', min: 82, recov: 72, kind: 'long' },
    { d: 'Sun', min: 0,  recov: 80, kind: 'today' },
  ];
  return (
    <ScreenFrame tint="move">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        overflowY: 'auto', padding: '62px 20px 110px', boxSizing: 'border-box',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <BackPill />
          <Eyebrow color="#FAC257">Movement · this week</Eyebrow>
        </div>

        {/* Headline today */}
        <GlassCard wash glowColor="#FAC257" style={{ marginBottom: 14 }}>
          <Eyebrow color="rgba(255,255,255,0.45)">One thing for today</Eyebrow>
          <div style={{ fontSize: 26, fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 10 }}>
            A slow 25-minute walk. <span style={{ color: 'rgba(255,255,255,0.55)' }}>After lunch if you can.</span>
          </div>
          <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>
            Your recovery is high, but Saturday was a long one. Keep it easy — this is the kind of day that builds the base.
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
            <Chip selected>Sounds good</Chip>
            <Chip>Swap for yoga</Chip>
            <Chip>Rest day</Chip>
          </div>
        </GlassCard>

        {/* Week ribbon */}
        <GlassCard style={{ marginBottom: 14, padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <Eyebrow color="rgba(255,255,255,0.45)">Move + recover</Eyebrow>
            <div style={{ display: 'flex', gap: 12, fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>
              <Legend color="#FAC257" label="Minutes" />
              <Legend color="#00D4FF" label="Recovery" />
            </div>
          </div>
          <WeekRibbon days={days} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontSize: 12.5 }}>
            <SumStat label="Active days" val="4 / 7" />
            <SumStat label="Total move" val="4h 29m" />
            <SumStat label="Avg recov." val="66" />
          </div>
        </GlassCard>

        {/* Sessions */}
        <Eyebrow color="rgba(255,255,255,0.45)">Sessions</Eyebrow>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <SessionRow day="Sat" title="Long walk with Maya" meta="82 min · 5.4 mi · low effort" color="#FAC257" Icon={IcMove} />
          <SessionRow day="Fri" title="Morning loop" meta="55 min · zone 2" color="#FAC257" Icon={IcMove} />
          <SessionRow day="Wed" title="Strength · lower body" meta="62 min · 3 sets" color="#A78BDB" Icon={IcBolt} />
          <SessionRow day="Mon" title="After-dinner walk" meta="48 min · flat" color="#FAC257" Icon={IcMove} />
        </div>
      </div>
      <TabBar active="Trends" />
    </ScreenFrame>
  );
}

const Legend = ({ color, label }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
    <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, boxShadow: `0 0 6px ${color}80` }} />
    {label}
  </div>
);

const SumStat = ({ label, val }) => (
  <div>
    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{label}</div>
    <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 3 }}>{val}</div>
  </div>
);

function WeekRibbon({ days }) {
  const maxMin = 90;
  const h = 120;
  return (
    <div style={{ position: 'relative', height: h + 20 }}>
      {/* recovery line */}
      <svg width="100%" height={h} style={{ position: 'absolute', inset: 0, overflow: 'visible' }}>
        <defs>
          <linearGradient id="recg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#00D4FF" stopOpacity="0.4"/>
            <stop offset="100%" stopColor="#00D4FF" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <polyline
          points={days.map((d, i) => {
            const x = (i / (days.length - 1)) * 100;
            const y = h - (d.recov / 100) * h;
            return `${x}%,${y}`;
          }).join(' ')}
          fill="none" stroke="#00D4FF" strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round"
          style={{ filter: 'drop-shadow(0 0 4px rgba(0,212,255,0.6))' }}
        />
      </svg>
      {/* bars */}
      <div style={{
        position: 'absolute', inset: 0, height: h,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      }}>
        {days.map((d, i) => {
          const barH = (d.min / maxMin) * (h - 20);
          const isToday = d.kind === 'today';
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative', zIndex: 2 }}>
              <div style={{
                width: 16, height: Math.max(barH, 2),
                borderRadius: '6px 6px 2px 2px',
                background: isToday
                  ? 'rgba(255,255,255,0.18)'
                  : d.min === 0
                    ? 'rgba(255,255,255,0.08)'
                    : 'linear-gradient(180deg, #FAC257, #C99445)',
                border: isToday ? '1px dashed rgba(255,255,255,0.4)' : 'none',
                boxShadow: !isToday && d.min > 0 ? '0 0 8px rgba(250,194,87,0.3)' : 'none',
              }} />
              {/* recovery dot */}
              <div style={{
                position: 'absolute', top: h - (d.recov / 100) * h - 5,
                width: 10, height: 10, borderRadius: '50%',
                background: '#00D4FF', border: '2px solid #1A3E3E',
                boxShadow: '0 0 6px rgba(0,212,255,0.9)',
              }} />
            </div>
          );
        })}
      </div>
      {/* labels */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'space-between' }}>
        {days.map((d, i) => {
          const isToday = d.kind === 'today';
          return (
            <div key={i} style={{
              flex: 1, textAlign: 'center', fontSize: 11,
              color: isToday ? '#fff' : 'rgba(255,255,255,0.45)',
              fontWeight: isToday ? 600 : 400,
            }}>{d.d}</div>
          );
        })}
      </div>
    </div>
  );
}

function SessionRow({ day, title, meta, color, Icon }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '12px 14px', borderRadius: 16,
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10, flexShrink: 0,
        background: `${color}22`, border: `1px solid ${color}40`, color,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon size={17} />
      </div>
      <div style={{ width: 34, fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{day}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{title}</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 1 }}>{meta}</div>
      </div>
    </div>
  );
}

Object.assign(window, { MovementDeepDive });