// PULS3 — Nutrition Deep Dive
// Plate composition ring + protein rhythm across the day + what fueled the week

function NutritionDeepDive() {
  const meals = [
    { time: '7:30a',  label: 'Greek yogurt + berries', protein: 22, type: 'breakfast', Icon: IcSun },
    { time: '12:15p', label: 'Chicken bowl',           protein: 34, type: 'lunch',     Icon: IcLeaf },
    { time: '3:40p',  label: 'Almond handful',         protein: 7,  type: 'snack',     Icon: IcSpark },
    { time: '7:00p',  label: 'Salmon, greens, rice',   protein: 38, type: 'dinner',    Icon: IcMoon },
  ];
  const totalProtein = meals.reduce((s, m) => s + m.protein, 0);
  const target = 110;

  return (
    <ScreenFrame tint="food">
      <div style={{
        position: 'relative', zIndex: 1, height: '100%',
        overflowY: 'auto', padding: '62px 20px 110px', boxSizing: 'border-box',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <BackPill />
          <Eyebrow color="#F28059">Nutrition · today</Eyebrow>
        </div>

        <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 4 }}>
          You're eating with your body,
        </div>
        <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.01em', color: 'rgba(255,255,255,0.6)', marginBottom: 22 }}>
          not against it.
        </div>

        {/* Plate + protein ring */}
        <GlassCard wash style={{ marginBottom: 14 }}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
            <PlateViz />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>
                Protein
              </div>
              <div style={{
                fontSize: 40, fontWeight: 700, lineHeight: 1, letterSpacing: '0.01em',
                background: 'linear-gradient(135deg, #F28059, #FAC257)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              }}>
                {totalProtein}<span style={{ fontSize: 20, opacity: 0.7 }}>g</span>
              </div>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>
                of {target}g · you're on pace
              </div>
              {/* bar */}
              <div style={{
                marginTop: 10, height: 6, borderRadius: 3,
                background: 'rgba(255,255,255,0.08)', overflow: 'hidden',
              }}>
                <div style={{
                  height: '100%', width: `${(totalProtein/target)*100}%`,
                  background: 'linear-gradient(90deg, #F28059, #FAC257)',
                  borderRadius: 3,
                  boxShadow: '0 0 8px rgba(242,128,89,0.5)',
                }} />
              </div>
            </div>
          </div>
        </GlassCard>

        {/* Protein rhythm — per meal */}
        <Eyebrow color="rgba(255,255,255,0.45)">Protein across the day</Eyebrow>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
          {meals.map((m, i) => (
            <MealRow key={i} {...m} />
          ))}
          {/* Suggestion */}
          <div style={{
            padding: '12px 14px', borderRadius: 16,
            background: 'rgba(0,212,255,0.08)',
            border: '1px dashed rgba(0,212,255,0.28)',
            fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.5,
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <div style={{ color: '#00D4FF', flexShrink: 0, marginTop: 2 }}><IcSpark size={14} /></div>
            <div>
              A snack with <b>~10g protein</b> around 4pm would round this out. Handful of nuts + cheese, or yogurt.
            </div>
          </div>
        </div>

        {/* This week summary */}
        <Eyebrow color="rgba(255,255,255,0.45)">This week, at a glance</Eyebrow>
        <GlassCard style={{ marginBottom: 14, padding: 16 }}>
          <WeekBars />
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5, marginTop: 12 }}>
            Protein's been steady. Fiber dipped Wed — that was the travel day.
          </div>
        </GlassCard>

        {/* Coach moment */}
        <AssistantBubble>
          You've hit protein 6 of the last 7 days. That's the kind of base that actually moves the needle on muscle + sleep.
        </AssistantBubble>
      </div>
      <TabBar active="Trends" />
    </ScreenFrame>
  );
}

const BackPill = () => (
  <div style={{
    width: 34, height: 34, borderRadius: '50%',
    background: 'rgba(255,255,255,0.08)',
    border: '1px solid rgba(255,255,255,0.12)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'rgba(255,255,255,0.8)',
  }}>
    <svg width="11" height="18" viewBox="0 0 12 20" fill="none">
      <path d="M10 2L2 10l8 8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </div>
);

function PlateViz() {
  // A stylized plate — 3 arc segments: protein / plants / grains + center
  const cx = 60, cy = 60, r = 50;
  const arc = (startDeg, endDeg, rr, color) => {
    const toRad = d => (d - 90) * Math.PI / 180;
    const x1 = cx + rr * Math.cos(toRad(startDeg));
    const y1 = cy + rr * Math.sin(toRad(startDeg));
    const x2 = cx + rr * Math.cos(toRad(endDeg));
    const y2 = cy + rr * Math.sin(toRad(endDeg));
    const large = (endDeg - startDeg) > 180 ? 1 : 0;
    return (
      <path
        d={`M ${cx} ${cy} L ${x1} ${y1} A ${rr} ${rr} 0 ${large} 1 ${x2} ${y2} Z`}
        fill={color} stroke="rgba(255,255,255,0.15)" strokeWidth="1"
      />
    );
  };
  return (
    <div style={{ position: 'relative', width: 120, height: 120, flexShrink: 0 }}>
      <svg width="120" height="120">
        <circle cx={cx} cy={cy} r={r+3} fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        {arc(0,   140, r, 'rgba(242,128,89,0.55)')}{/* protein */}
        {arc(140, 300, r, 'rgba(140,221,179,0.50)')}{/* plants */}
        {arc(300, 360, r, 'rgba(250,194,87,0.50)')}{/* grains */}
        <circle cx={cx} cy={cy} r="18" fill="#0D2626" />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.08em',
      }}>
        Plate
      </div>
    </div>
  );
}

function MealRow({ time, label, protein, Icon }) {
  const pct = Math.min(protein / 40, 1);
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '10px 14px', borderRadius: 16,
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10, flexShrink: 0,
        background: 'rgba(242,128,89,0.14)', color: '#F28059',
        border: '1px solid rgba(242,128,89,0.3)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Icon size={15} />
      </div>
      <div style={{ width: 48, fontSize: 12, color: 'rgba(255,255,255,0.55)', fontVariantNumeric: 'tabular-nums' }}>
        {time}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {label}
        </div>
        <div style={{
          marginTop: 5, height: 3, borderRadius: 2,
          background: 'rgba(255,255,255,0.08)', overflow: 'hidden',
        }}>
          <div style={{
            height: '100%', width: `${pct*100}%`,
            background: 'linear-gradient(90deg, #F28059, #FAC257)',
          }} />
        </div>
      </div>
      <div style={{ fontSize: 13, fontWeight: 600, color: '#F28059', fontVariantNumeric: 'tabular-nums' }}>
        {protein}g
      </div>
    </div>
  );
}

function WeekBars() {
  const data = [
    { d: 'M', protein: 118, fiber: 28 },
    { d: 'T', protein: 110, fiber: 24 },
    { d: 'W', protein: 98,  fiber: 16 },
    { d: 'T', protein: 112, fiber: 26 },
    { d: 'F', protein: 115, fiber: 25 },
    { d: 'S', protein: 124, fiber: 30 },
    { d: 'S', protein: 101, fiber: 22 }, // today (partial)
  ];
  const maxP = 130;
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', height: 110, gap: 6 }}>
      {data.map((d, i) => {
        const hP = (d.protein / maxP) * 80;
        const hF = (d.fiber / 32) * 26;
        const isToday = i === data.length - 1;
        return (
          <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <div style={{
              width: '100%', maxWidth: 20, height: hP, borderRadius: '6px 6px 2px 2px',
              background: isToday ? 'linear-gradient(180deg, #F28059, #C85C3C)' : 'rgba(242,128,89,0.45)',
              boxShadow: isToday ? '0 0 10px rgba(242,128,89,0.4)' : 'none',
            }} />
            <div style={{
              width: '100%', maxWidth: 20, height: hF, borderRadius: 2,
              background: isToday ? '#8CDDB3' : 'rgba(140,221,179,0.45)',
            }} />
            <div style={{ fontSize: 11, color: isToday ? '#fff' : 'rgba(255,255,255,0.45)', fontWeight: isToday ? 600 : 400, marginTop: 2 }}>
              {d.d}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { NutritionDeepDive });