// 病例训练场列表页 + 训练报告页

const TrainingListMobile = ({ onNav }) => {
  const cases = [
    { title: '急性根尖周炎', tag: '牙髓', diff: 3, time: '15min', status: '进行中', tone: 'blue' },
    { title: '慢性牙周炎(中度)', tag: '牙周', diff: 3, time: '20min', status: '推荐', tone: 'teal' },
    { title: '上颌窦底提升术', tag: '种植', diff: 4, time: '25min', status: '挑战', tone: 'amber' },
    { title: '复发性口腔溃疡', tag: '黏膜', diff: 2, time: '12min', status: '已完成', tone: 'ink' },
    { title: '正畸拔牙矫治评估', tag: '正畸', diff: 3, time: '18min', status: '推荐', tone: 'blue' },
    { title: '阻生第三磨牙拔除', tag: '颌外', diff: 4, time: '22min', status: '推荐', tone: 'teal' },
  ];
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
      <MobileTopBar
        title="病例训练场"
        left={<Icon name="arrowLeft" size={20}/>}
        right={<Icon name="filter" size={18} color="var(--ink-700)"/>}
      />
      <div style={{ padding: '12px 14px' }}>
        <div style={{ position: 'relative' }}>
          <Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-400)' }}/>
          <input className="mh-input" placeholder="搜索病例 / 主诉 / 学科…" style={{ paddingLeft: 30 }}/>
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 12, overflowX: 'auto' }} className="mh-scroll">
          {['全部', '牙体牙髓', '牙周', '颌面外科', '种植', '正畸', '黏膜病'].map((t, i) => (
            <button key={i} style={{
              flexShrink: 0, padding: '6px 12px', borderRadius: 999,
              border: '1px solid ' + (i === 0 ? 'var(--blue-500)' : 'var(--border)'),
              background: i === 0 ? 'var(--blue-500)' : 'white',
              color: i === 0 ? 'white' : 'var(--ink-700)',
              fontSize: 12, fontWeight: i === 0 ? 600 : 400, cursor: 'pointer',
              fontFamily: 'inherit',
            }}>{t}</button>
          ))}
        </div>

        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {cases.map((c, i) => (
            <div key={i} onClick={() => c.status !== '已完成' && onNav && onNav('session')} className="mh-card" style={{ padding: 12, display: 'flex', gap: 12, cursor: 'pointer' }}>
              <ImagePlaceholder width={60} height={60} label="" tone={c.tone} icon="tooth"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 13.5, fontWeight: 600 }}>{c.title}</span>
                  <span className={`mh-chip mh-chip-${c.status === '已完成' ? 'teal' : c.status === '挑战' ? 'amber' : c.status === '进行中' ? 'blue' : 'outline'}`} style={{ fontSize: 10 }}>{c.status}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 4 }}>{c.tag} · {c.time}</div>
                <div style={{ marginTop: 6 }}><Stars value={c.diff}/></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <MobileTabBar active="training" onChange={onNav}/>
    </div>
  );
};

const ReportMobile = ({ onNav }) => {
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
      <MobileTopBar
        title="训练报告"
        subtitle="急性根尖周炎"
        left={<Icon name="arrowLeft" size={20} onClick={() => onNav('training')}/>}
        right={<Icon name="share" size={18} color="var(--ink-700)"/>}
      />
      {/* 总分 */}
      <div style={{
        padding: '20px 16px 28px',
        background: 'linear-gradient(160deg, var(--blue-50), white)',
        borderBottom: '1px solid var(--border)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ position: 'relative', width: 86, height: 86 }}>
            <svg width="86" height="86" viewBox="0 0 86 86">
              <circle cx="43" cy="43" r="36" fill="none" stroke="var(--ink-150)" strokeWidth="6"/>
              <circle cx="43" cy="43" r="36" fill="none" stroke="var(--blue-500)" strokeWidth="6"
                strokeDasharray="226" strokeDashoffset="56" strokeLinecap="round"
                transform="rotate(-90 43 43)"/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--blue-700)', lineHeight: 1 }}>82</div>
              <div style={{ fontSize: 9, color: 'var(--ink-500)', marginTop: 3 }}>/100</div>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>综合评分</div>
            <div style={{ fontSize: 17, fontWeight: 700, marginTop: 3 }}>良好 · 超过 73% 同学</div>
            <div style={{ display: 'flex', gap: 5, marginTop: 8, flexWrap: 'wrap' }}>
              <span className="mh-chip mh-chip-teal">诊断准确</span>
              <span className="mh-chip mh-chip-amber">用药谨慎</span>
            </div>
          </div>
        </div>
      </div>

      {/* 雷达 */}
      <div style={{ padding: 14 }}>
        <div className="mh-card" style={{ padding: 14 }}>
          <SectionTitle>分项能力</SectionTitle>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <RadarChart values={[88, 76, 82, 70, 85, 78]} size={220}/>
          </div>
        </div>

        <div className="mh-card" style={{ padding: 14, marginTop: 12 }}>
          <SectionTitle>关键反馈</SectionTitle>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { tone: 'teal', icon: 'checkCircle', title: '问诊全面', body: '主动询问了诱因、加重/缓解因素与既往史,缺漏率仅 8%。' },
              { tone: 'amber', icon: 'warning', title: '影像解读偏弱', body: '在根尖区低密度影像描述上未明确边界与范围,建议复习影像规范。' },
              { tone: 'blue', icon: 'lightbulb', title: '可改进', body: '初诊未提及鉴别诊断(慢性根尖脓肿、急性牙髓炎),后续可加入鉴别 SOP。' },
            ].map((f, i) => (
              <div key={i} style={{
                display: 'flex', gap: 10, padding: 10, borderRadius: 10,
                background: f.tone === 'teal' ? 'var(--teal-50)' : f.tone === 'amber' ? 'var(--amber-50)' : 'var(--blue-50)',
              }}>
                <Icon name={f.icon} size={16} color={f.tone === 'teal' ? 'var(--teal-700)' : f.tone === 'amber' ? 'var(--amber-700)' : 'var(--blue-700)'}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: f.tone === 'teal' ? 'var(--teal-700)' : f.tone === 'amber' ? 'var(--amber-700)' : 'var(--blue-700)' }}>{f.title}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-700)', marginTop: 4, lineHeight: 1.55 }}>{f.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mh-card" style={{ padding: 14, marginTop: 12 }}>
          <SectionTitle>推荐巩固</SectionTitle>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { title: '慢性根尖周炎(进阶)', meta: '相似病例 · 18min', icon: 'tooth' },
              { title: '《口腔影像学》第 3 章笔记', meta: '资料 · 6min', icon: 'bookOpen' },
              { title: '局麻+开髓引流操作', meta: '操作训练 · 12min', icon: 'flask' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: 8, borderRadius: 8, alignItems: 'center' }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--blue-50)', color: 'var(--blue-600)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={r.icon} size={16}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.title}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>{r.meta}</div>
                </div>
                <Icon name="chevronRight" size={16} color="var(--ink-400)"/>
              </div>
            ))}
          </div>
        </div>

        <button onClick={() => onNav('training')} className="mh-btn mh-btn-primary mh-btn-lg" style={{ width: '100%', marginTop: 14 }}>
          再来一例
        </button>
      </div>
      <MobileTabBar active="training" onChange={onNav}/>
    </div>
  );
};

Object.assign(window, { TrainingListMobile, ReportMobile });