// trainee-screens.jsx — screens from the trainee perspective

function TraineeHome({ dark, go, openTask, openHealth, openLogger, wearable }) {
  const T = tokens(dark);
  const today = TODAY_TASKS;
  const doneCount = today.filter(t => t.done).length;
  const me = TRAINEES[0];
  return (
    <div style={{ paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      {/* greeting + streak chip */}
      <div style={{ padding:'4px 20px 0', display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div>
          <div style={{ color:T.ink2, fontSize:13, fontWeight:500 }}>วันจันทร์ · 27 เม.ย.</div>
          <div style={{ color:T.ink, fontSize:26, fontWeight:700, letterSpacing:-0.5, lineHeight:1.15, marginTop:2 }}>สวัสดีค่ะมิ้น 👋</div>
        </div>
        <div style={{ display:'flex', gap:6 }}>
          <button onClick={()=>go('chat')} style={{ width:36, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="bell" size={18} color={T.ink}/>
          </button>
          <Avatar name={me.name} tone={me.tone} size={36}/>
        </div>
      </div>

      {/* hero card — today plan */}
      <div style={{ padding:'18px 16px 0' }}>
        <div style={{
          background: dark ? 'linear-gradient(135deg, #1A2210 0%, #0E1110 70%)' : 'linear-gradient(135deg, #DDF1A8 0%, #C9F76F 100%)',
          borderRadius:24, padding:'18px 18px 16px', position:'relative', overflow:'hidden',
          border:`0.5px solid ${T.line}`,
        }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
            <div>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.5, color:dark?'#C9F76F':'#3D5C0E', textTransform:'uppercase' }}>วันนี้ · {doneCount}/{today.length} เสร็จ</div>
              <div style={{ fontSize:22, fontWeight:700, color:dark?'#F4F7F4':'#1B2710', marginTop:4, letterSpacing:-0.4, lineHeight:1.2 }}>Lower body day —<br/>มาลุยกัน 💪</div>
            </div>
            <Ring value={doneCount/today.length} size={56} stroke={6}
              color={dark?'#C9F76F':'#1B2710'} track={dark?'rgba(255,255,255,0.1)':'rgba(27,39,16,0.15)'}
              label={`${Math.round(doneCount/today.length*100)}%`}/>
          </div>
          {/* macros */}
          <div style={{ display:'flex', gap:10, marginTop:14 }}>
            {[
              {l:'Protein', v:'62/120g', p:0.52},
              {l:'Carbs', v:'140/200g', p:0.7},
              {l:'Fat', v:'34/55g', p:0.62},
            ].map(m=>(
              <div key={m.l} style={{ flex:1, background: dark?'rgba(255,255,255,0.04)':'rgba(255,255,255,0.55)', borderRadius:12, padding:'8px 10px' }}>
                <div style={{ fontSize:10, color:dark?'rgba(244,247,244,0.7)':'rgba(20,24,15,0.6)', fontWeight:600, letterSpacing:0.4, textTransform:'uppercase' }}>{m.l}</div>
                <div style={{ fontSize:13, fontWeight:700, color:dark?'#F4F7F4':'#1B2710', marginTop:2, fontFamily:'"Plus Jakarta Sans", system-ui' }}>{m.v}</div>
                <div style={{ height:3, borderRadius:2, background:dark?'rgba(255,255,255,0.1)':'rgba(27,39,16,0.15)', marginTop:6, overflow:'hidden' }}>
                  <div style={{ width:`${m.p*100}%`, height:'100%', background:dark?'#C9F76F':'#1B2710' }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* quick access — primary shortcuts */}
      <div style={{ padding:'14px 16px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:8 }}>
          <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:1.2, textTransform:'uppercase' }}>● Quick access</div>
          <span style={{ fontSize:11, color:T.ink3 }}>กดเดียว</span>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:8 }}>
          {/* Log meal — primary, brand-colored */}
          <button onClick={openLogger} style={{
            background: T.brand, color: T.brandInk, border:0, borderRadius:16,
            padding:'14px 12px', display:'flex', flexDirection:'column', alignItems:'flex-start', gap:8,
            cursor:'pointer', textAlign:'left', position:'relative', overflow:'hidden',
            boxShadow: dark?'inset 0 1px 0 rgba(255,255,255,0.08)':'inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.06)',
          }}>
            <div style={{ width:32, height:32, borderRadius:9, background:'rgba(20,24,15,0.18)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="cam" size={18} color={T.brandInk}/>
            </div>
            <div>
              <div style={{ fontSize:13, fontWeight:800, lineHeight:1.1 }}>Log มื้อนี้</div>
              <div style={{ fontSize:10, fontWeight:600, opacity:0.7, marginTop:2 }}>📷 + describe</div>
            </div>
          </button>

          {/* Start workout */}
          <button onClick={()=>go('plan')} style={{
            background: T.card, border:`0.5px solid ${T.line}`, borderRadius:16,
            padding:'14px 12px', display:'flex', flexDirection:'column', alignItems:'flex-start', gap:8,
            cursor:'pointer', textAlign:'left', color:T.ink,
          }}>
            <div style={{ width:32, height:32, borderRadius:9, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="dumbbell" size={18} color={T.ink}/>
            </div>
            <div>
              <div style={{ fontSize:13, fontWeight:800, lineHeight:1.1, color:T.ink }}>เริ่มเทรน</div>
              <div style={{ fontSize:10, fontWeight:600, color:T.ink3, marginTop:2 }}>Lower · 45m</div>
            </div>
          </button>

          {/* Chat coach */}
          <button onClick={()=>go('chat')} style={{
            background: T.card, border:`0.5px solid ${T.line}`, borderRadius:16,
            padding:'14px 12px', display:'flex', flexDirection:'column', alignItems:'flex-start', gap:8,
            cursor:'pointer', textAlign:'left', color:T.ink, position:'relative',
          }}>
            <div style={{ width:32, height:32, borderRadius:9, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
              <Icon name="chat" size={18} color={T.ink}/>
              <span style={{ position:'absolute', top:-2, right:-2, width:8, height:8, borderRadius:4, background:'#E1573B', border:`1.5px solid ${T.card}` }}/>
            </div>
            <div>
              <div style={{ fontSize:13, fontWeight:800, lineHeight:1.1, color:T.ink }}>คุยโค้ช</div>
              <div style={{ fontSize:10, fontWeight:600, color:T.ink3, marginTop:2 }}>2 ข้อความใหม่</div>
            </div>
          </button>
        </div>

        {/* secondary row */}
        <div style={{ display:'flex', gap:8, marginTop:8 }}>
          {[
            {l:'น้ำ +1', s:'5/8 แก้ว', i:'water'},
            {l:'น้ำหนัก', s:'log วันนี้', i:'wave'},
            {l:'รูปร่าง', s:'progress', i:'spark'},
          ].map((x,i)=>(
            <button key={i} style={{
              flex:1, background:'transparent', border:`0.5px dashed ${T.line}`, borderRadius:12,
              padding:'10px 8px', display:'flex', alignItems:'center', gap:8, cursor:'pointer', color:T.ink2,
            }}>
              <Icon name={x.i} size={14} color={T.ink2}/>
              <div style={{ textAlign:'left', minWidth:0 }}>
                <div style={{ fontSize:11, fontWeight:700, color:T.ink, lineHeight:1 }}>{x.l}</div>
                <div style={{ fontSize:9, color:T.ink3, marginTop:2 }}>{x.s}</div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* biometrics from watch */}
      <div style={{ padding:'14px 16px 0' }}>
        <BiometricsCard dark={dark} onOpen={openHealth} settings={wearable}/>
      </div>

      {/* trainer note */}
      <div style={{ padding:'14px 16px 0' }}>
        <div style={{ background:T.card, borderRadius:18, padding:'12px 14px', border:`0.5px solid ${T.line}`, display:'flex', gap:12 }}>
          <Avatar name="Coach Jin" tone="#FFD66B" size={36} ring dark={dark}/>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:11, color:T.ink3, fontWeight:600 }}>Coach Jin · 8:30</div>
            <div style={{ fontSize:14, color:T.ink, lineHeight:1.4, marginTop:2 }}>"เห็น progress เมื่อวานแล้วชอบมาก! วันนี้ focus ที่ form นะคะ"</div>
            <div style={{ display:'flex', gap:6, marginTop:8 }}>
              <button onClick={()=>go('chat')} style={{ background:T.brand, color:T.brandInk, border:0, padding:'6px 12px', borderRadius:99, fontSize:12, fontWeight:700 }}>ตอบกลับ</button>
              <button style={{ background:T.chip, color:T.ink, border:0, padding:'6px 10px', borderRadius:99, fontSize:12, fontWeight:600 }}>👍</button>
              <button style={{ background:T.chip, color:T.ink, border:0, padding:'6px 10px', borderRadius:99, fontSize:12, fontWeight:600 }}>🔥</button>
            </div>
          </div>
        </div>
      </div>

      {/* today list */}
      <div style={{ padding:'16px 16px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
          <div style={{ fontSize:18, fontWeight:700, color:T.ink, letterSpacing:-0.3 }}>กิจกรรมวันนี้</div>
          <span style={{ fontSize:12, color:T.ink2 }}>{doneCount}/{today.length}</span>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {today.map(task=>(
            <button key={task.id} onClick={()=>task.kind==='workout' && openTask(task)} style={{
              background:T.card, border:`0.5px solid ${T.line}`, borderRadius:16, padding:'12px 14px',
              display:'flex', alignItems:'center', gap:12, textAlign:'left', width:'100%', cursor:'pointer',
            }}>
              <div style={{
                width:36, height:36, borderRadius:10, flexShrink:0,
                background: task.done ? T.brand : T.chip,
                display:'flex', alignItems:'center', justifyContent:'center',
                color: task.done ? T.brandInk : T.ink2,
              }}>
                {task.done ? <Icon name="check" size={18} color={T.brandInk} stroke={2.4}/> :
                 <Icon name={task.kind==='workout'?'dumbbell':task.kind==='meal'?'fork':task.kind==='cardio'?'wave':'water'} size={18} color={T.ink2}/>}
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:14, fontWeight:600, color:T.ink, textDecoration: task.done?'line-through':'none', textDecorationColor:T.ink3 }}>{task.title}</div>
                <div style={{ fontSize:12, color:T.ink2, marginTop:2 }}>{task.detail}</div>
              </div>
              {task.time && <div style={{ fontSize:11, color:T.ink3, fontFamily:'"JetBrains Mono", monospace' }}>{task.time}</div>}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function TraineePlan({ dark, openTask }) {
  const T = tokens(dark);
  const wk = WORKOUT_BLOCK;
  const [tab, setTab] = React.useState('week');
  return (
    <div style={{ paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 20px 12px' }}>
        <div style={{ color:T.ink, fontSize:28, fontWeight:700, letterSpacing:-0.6 }}>แผนของฉัน</div>
        <div style={{ color:T.ink2, fontSize:13, marginTop:2 }}>สัปดาห์ที่ 8 จาก 12 · Lose 6kg</div>
      </div>
      {/* week strip */}
      <div style={{ padding:'0 12px', display:'flex', gap:6 }}>
        {['จ','อ','พ','พฤ','ศ','ส','อา'].map((d,i)=>{
          const today = i===0;
          const done = i<0;
          return (
            <div key={i} style={{
              flex:1, background: today?T.brand:T.card, borderRadius:14, padding:'10px 6px',
              textAlign:'center', border:`0.5px solid ${today?'transparent':T.line}`,
            }}>
              <div style={{ fontSize:10, fontWeight:600, color: today?T.brandInk:T.ink3, letterSpacing:0.5 }}>{d}</div>
              <div style={{ fontSize:18, fontWeight:700, color: today?T.brandInk:T.ink, marginTop:2, fontFamily:'"Plus Jakarta Sans", system-ui' }}>{27+i>30?27+i-30:27+i}</div>
              <div style={{ width:5, height:5, borderRadius:3, margin:'4px auto 0', background: today?T.brandInk:i===6?'transparent':T.ink3 }}/>
            </div>
          );
        })}
      </div>

      {/* workout cover card */}
      <div style={{ padding:'18px 16px 0' }}>
        <button onClick={()=>openTask({kind:'workout'})} style={{ width:'100%', padding:0, border:0, background:'transparent', cursor:'pointer', textAlign:'left' }}>
          <div style={{ position:'relative', borderRadius:22, overflow:'hidden' }}>
            <Placeholder kind="lower" h={180} label="lower body · 45 min"/>
            <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:16, background:'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55))' }}>
              <div style={{ display:'flex', gap:6, marginBottom:6 }}>
                <Pill kind="brand" dark={dark}>วันนี้</Pill>
                <Pill kind="default" dark={true}>{wk.exercises.length} ท่า</Pill>
                <Pill kind="default" dark={true}>{wk.difficulty}</Pill>
              </div>
              <div style={{ color:'#fff', fontSize:22, fontWeight:700, letterSpacing:-0.4 }}>{wk.title}</div>
              <div style={{ color:'rgba(255,255,255,0.85)', fontSize:13, marginTop:2 }}>โค้ชจิน · 45 นาที</div>
            </div>
            <div style={{ position:'absolute', right:14, top:14, width:44, height:44, borderRadius:22, background:'rgba(255,255,255,0.95)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 4px 12px rgba(0,0,0,0.2)' }}>
              <Icon name="play" size={18} color="#0E1110"/>
            </div>
          </div>
        </button>
      </div>

      {/* upcoming */}
      <div style={{ padding:'18px 16px 0' }}>
        <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>ถัดไปสัปดาห์นี้</div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {[
            { day:'อ. 28', title:'Cardio Z2', sub:'30 นาที · เดินเร็ว', tone:'#9CD2FF' },
            { day:'พ. 29', title:'Rest + mobility', sub:'15 นาที · ที่บ้าน', tone:'#D9D9D5' },
            { day:'พฤ. 30', title:'Upper body push', sub:'50 นาที · 7 ท่า', tone:'#FFB36B' },
            { day:'ศ. 1', title:'HIIT intervals', sub:'25 นาที · 8 รอบ', tone:'#FF8A6B' },
          ].map((s,i)=>(
            <div key={i} style={{ background:T.card, borderRadius:16, padding:'12px 14px', border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:44, height:44, borderRadius:12, background:s.tone, color:'#0E1110', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', fontWeight:700, fontFamily:'"Plus Jakarta Sans", system-ui' }}>
                <div style={{ fontSize:10, opacity:0.7 }}>{s.day.split(' ')[0]}</div>
                <div style={{ fontSize:15, lineHeight:1 }}>{s.day.split(' ')[1]}</div>
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, fontWeight:600, color:T.ink }}>{s.title}</div>
                <div style={{ fontSize:12, color:T.ink2, marginTop:2 }}>{s.sub}</div>
              </div>
              <Icon name="arrow" size={18} color={T.ink3}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function TraineeWorkoutDetail({ dark, onBack }) {
  const T = tokens(dark);
  const wk = WORKOUT_BLOCK;
  const [exDone, setExDone] = React.useState({});
  const toggle = (i) => setExDone(p => ({...p, [i]: !p[i]}));
  return (
    <div style={{ paddingBottom:120, background:T.bg, minHeight:'100%' }}>
      {/* image header */}
      <div style={{ position:'relative' }}>
        <Placeholder kind="lower" h={260} label=""/>
        <div style={{ position:'absolute', top:54, left:16, right:16, display:'flex', justifyContent:'space-between' }}>
          <button onClick={onBack} style={{ width:36, height:36, borderRadius:18, background:'rgba(255,255,255,0.95)', border:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="back" size={18} color="#0E1110"/>
          </button>
          <button style={{ width:36, height:36, borderRadius:18, background:'rgba(255,255,255,0.95)', border:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="more" size={18} color="#0E1110"/>
          </button>
        </div>
        <div style={{ position:'absolute', left:16, right:16, bottom:14 }}>
          <div style={{ display:'flex', gap:6, marginBottom:6 }}>
            <Pill kind="brand" dark={dark}>วันนี้ 07:00</Pill>
            <Pill kind="default" dark={true}>{wk.duration} min</Pill>
          </div>
          <div style={{ color:'#fff', fontSize:26, fontWeight:700, letterSpacing:-0.5 }}>{wk.title}</div>
        </div>
      </div>

      {/* coach note */}
      <div style={{ padding:'16px 16px 0' }}>
        <div style={{ background:T.card, borderRadius:16, padding:'12px 14px', border:`0.5px solid ${T.line}`, display:'flex', gap:10 }}>
          <Avatar name="Coach Jin" tone="#FFD66B" size={32}/>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:11, color:T.ink3, fontWeight:600 }}>โน้ตจากโค้ช</div>
            <div style={{ fontSize:13, color:T.ink, marginTop:2, lineHeight:1.4 }}>{wk.coachNote}</div>
          </div>
        </div>
      </div>

      {/* exercises */}
      <div style={{ padding:'16px 16px 0' }}>
        <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>{wk.exercises.length} ท่า</div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {wk.exercises.map((e,i)=>{
            const done = exDone[i] ?? (e.done > 0);
            return (
              <div key={i} style={{ background:T.card, borderRadius:16, padding:12, border:`0.5px solid ${T.line}`, display:'flex', gap:12 }}>
                <div style={{ width:64, height:64, borderRadius:12, overflow:'hidden', flexShrink:0 }}>
                  <Placeholder kind={i%2?'cardio':'lower'} h={64} w={64} label=""/>
                </div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:8 }}>
                    <div style={{ fontSize:14, fontWeight:600, color:T.ink, textDecoration: done?'line-through':'none', textDecorationColor:T.ink3 }}>{i+1}. {e.name}</div>
                    <button onClick={()=>toggle(i)} style={{
                      width:26, height:26, borderRadius:13, border:`1.5px solid ${done?T.brand:T.line}`,
                      background: done?T.brand:'transparent', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
                    }}>
                      {done && <Icon name="check" size={14} color={T.brandInk} stroke={2.5}/>}
                    </button>
                  </div>
                  <div style={{ display:'flex', gap:8, marginTop:6, flexWrap:'wrap' }}>
                    <Pill kind="default" dark={dark}>{e.sets}</Pill>
                    <Pill kind="default" dark={dark}>{e.weight}</Pill>
                    <Pill kind="ghost" dark={dark}>พัก {e.rest}</Pill>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* CTA */}
      <div style={{ padding:'20px 16px 0' }}>
        <button style={{
          width:'100%', height:54, borderRadius:18, border:0, cursor:'pointer',
          background:T.brand, color:T.brandInk, fontSize:16, fontWeight:700, letterSpacing:0.2,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
        }}>
          <Icon name="play" size={18} color={T.brandInk}/> เริ่มออกกำลัง
        </button>
      </div>
    </div>
  );
}

function TraineeMeals({ dark, openLogger }) {
  const T = tokens(dark);
  return (
    <div style={{ paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 20px 12px', display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
        <div>
          <div style={{ color:T.ink, fontSize:28, fontWeight:700, letterSpacing:-0.6 }}>มื้ออาหาร</div>
          <div style={{ color:T.ink2, fontSize:13, marginTop:2 }}>วันนี้ · 1,320 / 1,750 kcal</div>
        </div>
        <button onClick={openLogger} style={{
          height:40, padding:'0 14px', borderRadius:20, border:0, cursor:'pointer',
          background:T.brand, color:T.brandInk, fontSize:13, fontWeight:700,
          display:'flex', alignItems:'center', gap:6,
        }}>
          <Icon name="cam" size={16} color={T.brandInk}/> ถ่ายรูป
        </button>
      </div>

      {/* macro summary */}
      <div style={{ padding:'4px 16px 0' }}>
        <div style={{ background:T.card, borderRadius:18, padding:14, border:`0.5px solid ${T.line}`, display:'flex', gap:14, alignItems:'center' }}>
          <Ring value={1320/1750} size={64} stroke={7} color={T.brand} track={T.chip} label="75%"/>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:12, color:T.ink2, fontWeight:600 }}>เหลืออีก 430 kcal</div>
            <div style={{ display:'flex', gap:10, marginTop:8 }}>
              {[{l:'P', v:'62g', c:'#9BE36B'},{l:'C', v:'140g', c:'#FFD66B'},{l:'F', v:'34g', c:'#FF8A6B'}].map(m=>(
                <div key={m.l} style={{ flex:1 }}>
                  <div style={{ fontSize:10, color:T.ink3, fontWeight:600 }}>{m.l}</div>
                  <div style={{ fontSize:14, fontWeight:700, color:T.ink, fontFamily:'"Plus Jakarta Sans", system-ui' }}>{m.v}</div>
                  <div style={{ height:3, borderRadius:2, background:T.chip, marginTop:3, overflow:'hidden' }}>
                    <div style={{ width:'62%', height:'100%', background:m.c }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* meal list */}
      <div style={{ padding:'16px 16px 0' }}>
        <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>วันนี้</div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {MEAL_LOGS.map(m=>{
            const verdictMap = { good:{kind:'good', label:'ดีเยี่ยม'}, warn:{kind:'warn', label:'ระวัง'}, bad:{kind:'danger', label:'ปรับ'}};
            const v = verdictMap[m.verdict];
            return (
              <div key={m.id} style={{ background:T.card, borderRadius:18, border:`0.5px solid ${T.line}`, overflow:'hidden' }}>
                <div style={{ display:'flex', gap:12, padding:12 }}>
                  <div style={{ width:84, height:84, borderRadius:14, overflow:'hidden', flexShrink:0 }}>
                    <Placeholder kind={m.img} w={84} h={84} label=""/>
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                      <div>
                        <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>{m.meal}</div>
                        <div style={{ fontSize:11, color:T.ink3, fontFamily:'"JetBrains Mono", monospace', marginTop:2 }}>{m.time} · {m.kcal} kcal</div>
                      </div>
                      <Pill kind={v.kind} dark={dark}>{m.score}/100 · {v.label}</Pill>
                    </div>
                    <div style={{ fontSize:12, color:T.ink2, marginTop:8, lineHeight:1.4, display:'flex', gap:6 }}>
                      <Icon name="spark" size={14} color={T.ink3}/>
                      <span style={{ flex:1 }}>{m.ai}</span>
                    </div>
                  </div>
                </div>
                {m.trainer && (
                  <div style={{ borderTop:`0.5px solid ${T.line}`, padding:'10px 12px', display:'flex', gap:8, alignItems:'center', background: dark?'rgba(201,247,111,0.04)':'rgba(201,247,111,0.18)' }}>
                    <Avatar name="Coach Jin" tone="#FFD66B" size={24}/>
                    <div style={{ fontSize:12, color:T.ink, flex:1 }}>{m.trainer}</div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function TraineeMealLogger({ dark, onClose }) {
  const T = tokens(dark);
  const [desc, setDesc] = React.useState('');
  const [meal, setMeal] = React.useState('lunch');

  // bezel surfaces — match trainer monitor aesthetic but keep tokens()
  const raised = {
    background: T.card,
    boxShadow: dark
      ? `inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3)`
      : `inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)`,
  };
  const well = {
    background: dark ? '#0E1110' : '#E2E1DA',
    boxShadow: dark
      ? `inset 0 1px 2px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.03)`
      : `inset 0 1px 2px rgba(0,0,0,0.14), inset 0 -1px 0 rgba(255,255,255,0.6)`,
  };
  const dim = T.ink3;
  const muted = dark ? 'rgba(244,247,244,0.4)' : 'rgba(20,24,15,0.45)';

  return (
    <div style={{ background:T.bg, minHeight:'100%', paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 16px 0', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <button onClick={onClose} style={{ width:36, height:36, borderRadius:18, ...raised, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="x" size={18} color={T.ink}/>
        </button>
        <div style={{ fontSize:11, fontWeight:700, color:dim, letterSpacing:1.2, textTransform:'uppercase' }}>● Meal log</div>
        <div style={{ width:36 }}/>
      </div>

      {/* Camera viewport — bezeled */}
      <div style={{ padding:'12px 12px 0' }}>
        <div style={{ borderRadius:20, padding:10, ...raised, border:`0.5px solid ${T.line}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'2px 6px 8px' }}>
            <div style={{ display:'flex', alignItems:'center', gap:6 }}>
              <div style={{ width:8, height:8, borderRadius:4, background:'#E1573B', boxShadow:'0 0 4px #E1573B' }}/>
              <span style={{ fontSize:9, fontWeight:700, color:dim, letterSpacing:1, textTransform:'uppercase' }}>REC · CAM 1</span>
            </div>
            <div style={{ fontSize:9, fontWeight:700, color:muted, fontFamily:'"JetBrains Mono", monospace' }}>09:42 · ƒ1.8</div>
          </div>

          <div style={{ borderRadius:14, overflow:'hidden', position:'relative', ...well }}>
            <Placeholder kind="lunch" h={240} label=""/>
            {/* viewfinder corners */}
            {[
              {top:8, left:8, br:'0', bl:'0'},
              {top:8, right:8},
              {bottom:8, left:8},
              {bottom:8, right:8},
            ].map((c,i)=>(
              <div key={i} style={{ position:'absolute', width:14, height:14, ...c,
                borderTop: c.top!==undefined ? `2px solid ${T.brand}` : 'none',
                borderBottom: c.bottom!==undefined ? `2px solid ${T.brand}` : 'none',
                borderLeft: c.left!==undefined ? `2px solid ${T.brand}` : 'none',
                borderRight: c.right!==undefined ? `2px solid ${T.brand}` : 'none',
              }}/>
            ))}
            {/* center reticle */}
            <div style={{ position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)', width:28, height:28, border:`1px solid ${T.brand}`, borderRadius:'50%' }}>
              <div style={{ position:'absolute', top:'50%', left:0, right:0, height:1, background:T.brand, opacity:0.5 }}/>
              <div style={{ position:'absolute', left:'50%', top:0, bottom:0, width:1, background:T.brand, opacity:0.5 }}/>
            </div>
          </div>

          {/* shutter row */}
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 6px 2px' }}>
            <button style={{ width:38, height:38, borderRadius:10, ...raised, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
              <span style={{ fontSize:14 }}>🖼</span>
            </button>
            <button style={{ width:60, height:60, borderRadius:30, background:T.brand, border:`4px solid ${dark?'#0E1110':'#fff'}`, boxShadow:`0 0 0 2px ${T.line}, 0 4px 8px rgba(0,0,0,0.2)`, cursor:'pointer' }}/>
            <button style={{ width:38, height:38, borderRadius:10, ...raised, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
              <span style={{ fontSize:14 }}>↺</span>
            </button>
          </div>
        </div>
      </div>

      {/* Describe panel */}
      <div style={{ padding:'12px 12px 0' }}>
        <div style={{ borderRadius:18, padding:'12px 14px', ...raised, border:`0.5px solid ${T.line}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
            <div style={{ fontSize:9, fontWeight:700, color:dim, letterSpacing:1.2, textTransform:'uppercase' }}>● Describe / annotate</div>
            <div style={{ fontSize:9, fontWeight:700, color:muted, fontFamily:'"JetBrains Mono", monospace' }}>{desc.length}/200</div>
          </div>
          <div style={{ borderRadius:10, ...well, padding:10 }}>
            <textarea
              value={desc} onChange={e=>setDesc(e.target.value.slice(0,200))}
              rows={3} maxLength={200}
              placeholder="พิมพ์รายละเอียดมื้อนี้... เช่น 'ข้าวกล้อง 1 ถ้วย, อกไก่ย่าง 120g, สลัดผัก'"
              style={{
                width:'100%', border:0, background:'transparent', color:T.ink,
                fontSize:13, lineHeight:1.55, resize:'none', outline:'none', fontFamily:'inherit',
              }}
            />
          </div>
          <div style={{ display:'flex', gap:6, marginTop:8, flexWrap:'wrap' }}>
            {['🎙 voice','+ วัตถุดิบ','+ น้ำหนัก','+ วิธีปรุง'].map(c=>(
              <button key={c} style={{ padding:'6px 10px', borderRadius:99, border:`0.5px solid ${T.line}`, background:'transparent', color:T.ink2, fontSize:11, fontWeight:600, cursor:'pointer' }}>{c}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Meal slot selector */}
      <div style={{ padding:'12px 12px 0' }}>
        <div style={{ borderRadius:14, padding:8, ...raised, border:`0.5px solid ${T.line}`, display:'flex', gap:4 }}>
          {[
            {k:'breakfast',l:'เช้า'},
            {k:'lunch',l:'กลางวัน'},
            {k:'dinner',l:'เย็น'},
            {k:'snack',l:'ของว่าง'},
          ].map(m=>(
            <button key={m.k} onClick={()=>setMeal(m.k)} style={{
              flex:1, height:36, borderRadius:9, cursor:'pointer', border:0,
              background: meal===m.k ? T.ink : 'transparent',
              color: meal===m.k ? T.bg : T.ink2,
              fontSize:12, fontWeight:700,
            }}>{m.l}</button>
          ))}
        </div>
      </div>

      {/* Actions */}
      <div style={{ padding:'14px 12px 0', display:'flex', gap:8 }}>
        <button style={{ flex:1, height:50, borderRadius:14, ...raised, border:`0.5px solid ${T.line}`, color:T.ink, fontWeight:700, fontSize:13, cursor:'pointer' }}>
          บันทึกอย่างเดียว
        </button>
        <button style={{ flex:2, height:50, borderRadius:14, border:0, background:T.brand, color:T.brandInk, fontWeight:700, fontSize:14, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
          ส่งให้โค้ชรีวิว <span>→</span>
        </button>
      </div>

      <div style={{ padding:'12px 16px 0', textAlign:'center', fontSize:10, color:muted, lineHeight:1.5, fontFamily:'"JetBrains Mono", monospace' }}>
        ภาพ + คำอธิบาย → โค้ชเป็นคนวิเคราะห์ · ไม่มี AI ตัดสิน
      </div>
    </div>
  );
}

function TraineeChat({ dark }) {
  const T = tokens(dark);
  const [showAttach, setShowAttach] = React.useState(false);
  const [lightbox, setLightbox] = React.useState(null);
  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%', position:'relative' }}>
      <PhoneStatus dark={dark}/>
      {/* header */}
      <div style={{ padding:'4px 16px 12px', display:'flex', alignItems:'center', gap:12, borderBottom:`0.5px solid ${T.line}` }}>
        <button style={{ width:32, height:32, borderRadius:16, background:'transparent', border:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="back" size={20} color={T.ink}/>
        </button>
        <Avatar name="Coach Jin" tone="#FFD66B" size={36} ring dark={dark}/>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:15, fontWeight:700, color:T.ink }}>Coach Jin</div>
          <div style={{ fontSize:11, color:'#41A55E', fontWeight:600, display:'flex', alignItems:'center', gap:5 }}>
            <span style={{ width:6, height:6, borderRadius:3, background:'#41A55E' }}/> ออนไลน์
          </div>
        </div>
        <Icon name="more" size={20} color={T.ink2}/>
      </div>

      {/* messages */}
      <div style={{ flex:1, overflow:'auto', padding:'12px 14px 0', display:'flex', flexDirection:'column', gap:8 }}>
        <div style={{ textAlign:'center', fontSize:11, color:T.ink3, padding:'4px 0 8px' }}>วันนี้ · 27 เม.ย.</div>
        {CHAT_THREAD.map((m,i)=>{
          const me = m.who==='trainee';
          if (m.kind === 'mealReact') {
            const meal = MEAL_LOGS.find(x=>x.id===m.mealId);
            return (
              <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'80%', display:'flex', flexDirection:'column', gap:4 }}>
                <div style={{ background: me?T.brand:T.card, borderRadius:16, padding:8, border:`0.5px solid ${T.line}` }}>
                  <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                    <div style={{ width:48, height:48, borderRadius:10, overflow:'hidden' }}>
                      <Placeholder kind={meal.img} w={48} h={48} label=""/>
                    </div>
                    <div>
                      <div style={{ fontSize:11, color: me?T.brandInk:T.ink3, fontWeight:600 }}>มื้อกลางวันของมิ้น</div>
                      <div style={{ fontSize:13, fontWeight:700, color: me?T.brandInk:T.ink }}>{m.reaction}</div>
                    </div>
                  </div>
                </div>
                <div style={{ fontSize:10, color:T.ink3, alignSelf: me?'flex-end':'flex-start' }}>{m.t}</div>
              </div>
            );
          }
          if (m.kind === 'voice') {
            return (
              <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'78%' }}>
                <div style={{ background: me?T.brand:T.card, borderRadius:18, padding:'10px 12px', border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', gap:10, minWidth:170 }}>
                  <button style={{ width:30, height:30, borderRadius:15, border:0, background: me?T.brandInk:T.brand, color: me?'#fff':T.brandInk, display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Icon name="play" size={12} color={me?'#fff':T.brandInk}/>
                  </button>
                  <svg width="100" height="20" viewBox="0 0 100 20">
                    {Array.from({length:24}).map((_,j)=>{
                      const h = 4 + Math.abs(Math.sin(j*0.7))*14;
                      return <rect key={j} x={j*4} y={(20-h)/2} width="2" height={h} rx="1" fill={me?T.brandInk:T.ink2}/>
                    })}
                  </svg>
                  <span style={{ fontSize:11, fontFamily:'"JetBrains Mono", monospace', color: me?T.brandInk:T.ink2 }}>0:{String(m.dur).padStart(2,'0')}</span>
                </div>
                <div style={{ fontSize:10, color:T.ink3, alignSelf:'flex-start', marginTop:3 }}>{m.t}</div>
              </div>
            );
          }
          // ── image attachment (food/pills/lab/ref)
          if (m.kind === 'image') {
            return (
              <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'78%', display:'flex', flexDirection:'column' }}>
                <button onClick={()=>setLightbox(m)} style={{
                  background: me?T.brand:T.card, padding:6, borderRadius:18, border:`0.5px solid ${me?'transparent':T.line}`,
                  cursor:'pointer', overflow:'hidden', maxWidth:240,
                }}>
                  <div style={{ borderRadius:13, overflow:'hidden' }}>
                    <Placeholder kind={m.img} h={180} label={m.label}/>
                  </div>
                  {m.caption && <div style={{ fontSize:13, color:me?T.brandInk:T.ink, padding:'8px 6px 4px', textAlign:'left', lineHeight:1.4 }}>{m.caption}</div>}
                </button>
                <div style={{ fontSize:10, color:T.ink3, alignSelf:me?'flex-end':'flex-start', marginTop:3 }}>{m.t}</div>
              </div>
            );
          }
          // ── video attachment (form ref / demo)
          if (m.kind === 'video') {
            return (
              <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'78%', display:'flex', flexDirection:'column' }}>
                <button onClick={()=>setLightbox(m)} style={{
                  background: me?T.brand:T.card, padding:6, borderRadius:18, border:`0.5px solid ${me?'transparent':T.line}`,
                  cursor:'pointer', overflow:'hidden', maxWidth:240,
                }}>
                  <div style={{ borderRadius:13, overflow:'hidden', position:'relative' }}>
                    <Placeholder kind={m.img||'gym'} h={180} label={m.label||'VIDEO'}/>
                    {/* play overlay */}
                    <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <div style={{ width:52, height:52, borderRadius:26, background:'rgba(20,24,15,0.7)', backdropFilter:'blur(4px)', display:'flex', alignItems:'center', justifyContent:'center', border:'2px solid rgba(255,255,255,0.9)' }}>
                        <Icon name="play" size={20} color="#fff"/>
                      </div>
                    </div>
                    {/* duration badge */}
                    <div style={{ position:'absolute', bottom:8, right:8, background:'rgba(20,24,15,0.8)', color:'#fff', padding:'3px 7px', borderRadius:6, fontSize:10, fontFamily:'"JetBrains Mono", monospace', fontWeight:700 }}>
                      0:{String(m.dur).padStart(2,'0')}
                    </div>
                  </div>
                  {m.caption && <div style={{ fontSize:13, color:me?T.brandInk:T.ink, padding:'8px 6px 4px', textAlign:'left', lineHeight:1.4 }}>{m.caption}</div>}
                </button>
                <div style={{ fontSize:10, color:T.ink3, alignSelf:me?'flex-end':'flex-start', marginTop:3 }}>{m.t}</div>
              </div>
            );
          }
          // ── document (lab result / pdf)
          if (m.kind === 'doc') {
            return (
              <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'82%', display:'flex', flexDirection:'column' }}>
                <div style={{ background:me?T.brand:T.card, borderRadius:16, padding:10, border:`0.5px solid ${me?'transparent':T.line}`, display:'flex', flexDirection:'column', gap:8 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <div style={{ width:42, height:50, borderRadius:6, background:me?'rgba(20,24,15,0.18)':T.chip, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', flexShrink:0, position:'relative' }}>
                      <span style={{ fontSize:10, fontWeight:800, color:me?T.brandInk:T.ink, fontFamily:'"JetBrains Mono", monospace' }}>PDF</span>
                      <div style={{ position:'absolute', top:0, right:0, width:10, height:10, background:me?'rgba(20,24,15,0.3)':T.line, clipPath:'polygon(0 0, 100% 100%, 100% 0)' }}/>
                    </div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:13, fontWeight:700, color:me?T.brandInk:T.ink, lineHeight:1.3 }}>{m.docName}</div>
                      <div style={{ fontSize:11, color:me?'rgba(20,24,15,0.6)':T.ink3, marginTop:2 }}>{m.docKind}</div>
                    </div>
                    <Icon name="arrow" size={16} color={me?T.brandInk:T.ink2}/>
                  </div>
                  {m.caption && <div style={{ fontSize:13, color:me?T.brandInk:T.ink, lineHeight:1.4, padding:'4px 4px 0' }}>{m.caption}</div>}
                </div>
                <div style={{ fontSize:10, color:T.ink3, alignSelf:me?'flex-end':'flex-start', marginTop:3 }}>{m.t}</div>
              </div>
            );
          }
          return (
            <div key={i} style={{ alignSelf: me?'flex-end':'flex-start', maxWidth:'78%', display:'flex', flexDirection:'column' }}>
              <div style={{
                background: me?T.brand:T.card, color: me?T.brandInk:T.ink,
                borderRadius:18, padding:'9px 13px', border:`0.5px solid ${me?'transparent':T.line}`,
                fontSize:14, lineHeight:1.4,
              }}>{m.msg}</div>
              <div style={{ fontSize:10, color:T.ink3, alignSelf: me?'flex-end':'flex-start', marginTop:3 }}>{m.t}</div>
            </div>
          );
        })}
        {/* quick replies */}
        <div style={{ display:'flex', gap:6, marginTop:6, flexWrap:'wrap' }}>
          {['💪 จัดให้', 'รับทราบค่ะ', 'ขอเลื่อน 30 นาที', '🙏'].map((q,i)=>(
            <button key={i} style={{ background:T.chip, border:`0.5px solid ${T.line}`, color:T.ink, borderRadius:99, padding:'6px 12px', fontSize:12, fontWeight:600 }}>{q}</button>
          ))}
        </div>
      </div>

      {/* attach sheet */}
      {showAttach && (
        <div onClick={()=>setShowAttach(false)} style={{ position:'absolute', inset:0, background:'rgba(14,17,16,0.4)', zIndex:5, display:'flex', alignItems:'flex-end' }}>
          <div onClick={e=>e.stopPropagation()} style={{ width:'100%', background:T.card, borderRadius:'24px 24px 0 0', padding:'16px 16px 24px', borderTop:`0.5px solid ${T.line}` }}>
            <div style={{ width:36, height:4, borderRadius:2, background:T.line, margin:'0 auto 14px' }}/>
            <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:1.2, textTransform:'uppercase', marginBottom:12 }}>● แนบไฟล์</div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10 }}>
              {[
                {l:'กล้อง', i:'cam', tone:'#9BE36B'},
                {l:'รูปภาพ', i:'spark', tone:'#6BC9FF'},
                {l:'วิดีโอ', i:'play', tone:'#FFB36B'},
                {l:'ไฟล์', i:'fork', tone:'#C49BFF'},
              ].map(x=>(
                <button key={x.l} onClick={()=>setShowAttach(false)} style={{ background:'transparent', border:0, display:'flex', flexDirection:'column', alignItems:'center', gap:6, cursor:'pointer' }}>
                  <div style={{ width:54, height:54, borderRadius:14, background:x.tone, display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Icon name={x.i} size={22} color="#1B1F18"/>
                  </div>
                  <span style={{ fontSize:12, fontWeight:600, color:T.ink }}>{x.l}</span>
                </button>
              ))}
            </div>
            <div style={{ marginTop:14, display:'flex', flexDirection:'column', gap:6 }}>
              {[
                {l:'รูปอาหาร / มื้อนี้', i:'fork'},
                {l:'ยา / วิตามิน', i:'spark'},
                {l:'ผลตรวจ / ใบรับรอง', i:'lock'},
                {l:'รูปร่าง / progress', i:'wave'},
              ].map(x=>(
                <button key={x.l} onClick={()=>setShowAttach(false)} style={{ background:T.chip, border:0, borderRadius:12, padding:'10px 14px', display:'flex', alignItems:'center', gap:10, cursor:'pointer' }}>
                  <Icon name={x.i} size={16} color={T.ink2}/>
                  <span style={{ fontSize:13, fontWeight:600, color:T.ink, flex:1, textAlign:'left' }}>{x.l}</span>
                  <Icon name="arrow" size={14} color={T.ink3}/>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* lightbox */}
      {lightbox && (
        <div onClick={()=>setLightbox(null)} style={{ position:'absolute', inset:0, background:'rgba(14,17,16,0.92)', zIndex:6, display:'flex', flexDirection:'column' }}>
          <div style={{ padding:'40px 16px 12px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{ color:'#fff', fontSize:13, fontWeight:600 }}>{lightbox.label || (lightbox.kind==='video'?'Video':'Image')}</div>
            <button onClick={()=>setLightbox(null)} style={{ width:36, height:36, borderRadius:18, border:0, background:'rgba(255,255,255,0.15)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
              <Icon name="x" size={18} color="#fff"/>
            </button>
          </div>
          <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 16px' }} onClick={e=>e.stopPropagation()}>
            <div style={{ width:'100%', borderRadius:20, overflow:'hidden', position:'relative' }}>
              <Placeholder kind={lightbox.img||'gym'} h={360} label={lightbox.label}/>
              {lightbox.kind==='video' && (
                <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <div style={{ width:64, height:64, borderRadius:32, background:'rgba(255,255,255,0.95)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Icon name="play" size={26} color="#1B1F18"/>
                  </div>
                </div>
              )}
            </div>
          </div>
          {lightbox.caption && (
            <div style={{ padding:'14px 20px 32px', color:'#fff', fontSize:14, lineHeight:1.5 }}>{lightbox.caption}</div>
          )}
        </div>
      )}

      {/* composer */}
      <div style={{ padding:'8px 12px 38px', borderTop:`0.5px solid ${T.line}`, background:T.bg, display:'flex', gap:8, alignItems:'center' }}>
        <button onClick={()=>setShowAttach(true)} style={{ width:36, height:36, borderRadius:18, border:0, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
          <Icon name="plus" size={20} color={T.ink}/>
        </button>
        <button style={{ width:36, height:36, borderRadius:18, border:0, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
          <Icon name="cam" size={18} color={T.ink}/>
        </button>
        <div style={{ flex:1, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', padding:'0 14px', fontSize:13, color:T.ink3 }}>
          พิมพ์ข้อความ...
        </div>
        <button style={{ width:36, height:36, borderRadius:18, border:0, background:T.brand, color:T.brandInk, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="mic" size={18} color={T.brandInk}/>
        </button>
      </div>
    </div>
  );
}

function TraineeMe({ dark }) {
  const T = tokens(dark);
  return (
    <div style={{ paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 20px 12px' }}>
        <div style={{ color:T.ink, fontSize:28, fontWeight:700, letterSpacing:-0.6 }}>เป้าหมายของฉัน</div>
        <div style={{ color:T.ink2, fontSize:13, marginTop:2 }}>กำลังไปได้สวย — ทำต่อเลย!</div>
      </div>

      {/* weight chart */}
      <div style={{ padding:'4px 16px 0' }}>
        <div style={{ background:T.card, borderRadius:20, padding:16, border:`0.5px solid ${T.line}` }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
            <div>
              <div style={{ fontSize:11, color:T.ink3, fontWeight:600, letterSpacing:0.5, textTransform:'uppercase' }}>น้ำหนัก</div>
              <div style={{ fontSize:32, fontWeight:700, color:T.ink, marginTop:2, fontFamily:'"Plus Jakarta Sans", system-ui', letterSpacing:-1 }}>60.2<span style={{ fontSize:16, color:T.ink2, fontWeight:600 }}> kg</span></div>
            </div>
            <Pill kind="good" dark={dark}>↓ 3.8 kg เดือนนี้</Pill>
          </div>
          <div style={{ marginTop:8, marginLeft:-4 }}>
            <Sparkline data={WEIGHT_SERIES} w={320} h={70} color="#41A55E" fill="rgba(65,165,94,0.14)"/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize:10, color:T.ink3, marginTop:4, fontFamily:'"JetBrains Mono", monospace' }}>
            <span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span>
          </div>
        </div>
      </div>

      {/* goals */}
      <div style={{ padding:'14px 16px 0' }}>
        <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>เป้าหมาย</div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {GOALS.map((g,i)=>(
            <div key={i} style={{ background:T.card, borderRadius:16, padding:14, border:`0.5px solid ${T.line}` }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
                <div>
                  <div style={{ fontSize:14, fontWeight:600, color:T.ink }}>{g.title}</div>
                  <div style={{ fontSize:11, color:T.ink3, marginTop:2 }}>{g.dueIn}</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontSize:18, fontWeight:700, color:T.ink, fontFamily:'"Plus Jakarta Sans", system-ui' }}>{g.current}<span style={{ fontSize:11, color:T.ink2, fontWeight:500 }}> {g.unit}</span></div>
                  <div style={{ fontSize:10, color:T.ink3 }}>เป้า {g.target} {g.unit}</div>
                </div>
              </div>
              <div style={{ height:5, borderRadius:3, background:T.chip, overflow:'hidden' }}>
                <div style={{ width:`${g.pct*100}%`, height:'100%', background: g.pct>=1?T.good:T.brand, transition:'width 0.4s' }}/>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* achievements */}
      <div style={{ padding:'18px 16px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
          <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase' }}>ความสำเร็จ</div>
          <div style={{ fontSize:11, color:T.brand==='#C9F76F'?'#41A55E':T.brand, fontWeight:700 }}>3 / 6</div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
          {ACHIEVEMENTS.map((a,i)=>(
            <div key={i} style={{
              background: a.earned ? T.card : T.chip,
              borderRadius:14, padding:'14px 8px', textAlign:'center',
              border:`0.5px solid ${T.line}`, opacity: a.earned?1:0.6,
            }}>
              <div style={{ width:36, height:36, borderRadius:18, margin:'0 auto', background: a.earned?T.brand:T.line, display:'flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name={a.earned?'star':'lock'} size={18} color={a.earned?T.brandInk:T.ink3}/>
              </div>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink, marginTop:6, lineHeight:1.2 }}>{a.name}</div>
              <div style={{ fontSize:10, color:T.ink3, marginTop:2 }}>{a.earned?a.date:a.locked}</div>
            </div>
          ))}
        </div>
      </div>

      {/* progress photos */}
      <div style={{ padding:'18px 16px 0' }}>
        <div style={{ fontSize:13, fontWeight:700, color:T.ink2, letterSpacing:0.5, textTransform:'uppercase', marginBottom:10 }}>Progress Photos</div>
        <div style={{ display:'flex', gap:8, overflow:'auto' }}>
          {['1 ก.พ.', '1 มี.ค.', '1 เม.ย.', '27 เม.ย.'].map((d,i)=>(
            <div key={i} style={{ flexShrink:0, width:110 }}>
              <div style={{ borderRadius:14, overflow:'hidden', height:140 }}>
                <Placeholder kind="body" w={110} h={140} label={i===3?'latest':''}/>
              </div>
              <div style={{ fontSize:11, color:T.ink2, fontWeight:600, marginTop:4, fontFamily:'"JetBrains Mono", monospace' }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  TraineeHome, TraineePlan, TraineeWorkoutDetail, TraineeMeals, TraineeMealLogger, TraineeChat, TraineeMe,
});