// 首页 Dashboard — 移动端 + 桌面端

const HomeMobile = ({ onNav }) => {
  return (
    <div style={{ height: '100%', overflowY: 'auto', paddingBottom: 80, background: 'var(--bg-app)' }} className="mh-scroll">
      {/* 顶部彩头 */}
      <div style={{
        background: 'linear-gradient(165deg, #2f76b3 0%, #1f5d96 60%, #163a5f 100%)',
        padding: '14px 16px 70px',
        color: 'white', position: 'relative',
      }}>
        <div className="mh-statusbar" style={{ background: 'transparent', color: 'white', margin: '-14px -16px 0', height: 36 }}>
          <span>9:41</span>
          <span style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: 11 }}>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none"><path d="M1 6h2v3H1zM5 4h2v5H5zM9 2h2v7H9zM13 0h2v9h-2z" fill="currentColor"/></svg>
            <svg width="22" height="10" viewBox="0 0 22 10" fill="none"><rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor"/><rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/></svg>
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
          <div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>下午好,林思远</div>
            <div style={{ fontSize: 19, fontWeight: 600, marginTop: 4, letterSpacing: '-0.01em' }}>今日:口腔颌面外科 · 牙体牙髓</div>
          </div>
          <button style={{
            border: 'none', background: 'rgba(255,255,255,0.18)',
            width: 36, height: 36, borderRadius: 10, cursor: 'pointer',
            position: 'relative', backdropFilter: 'blur(10px)',
          }}>
            <Icon name="bell" color="white" size={18}/>
            <span style={{
              position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: '50%',
              background: '#efbb6e',
            }}/>
          </button>
        </div>

        {/* 学习日 ring */}
        <div style={{
          marginTop: 14, padding: '14px 16px',
          background: 'rgba(255,255,255,0.12)',
          backdropFilter: 'blur(10px)',
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 14,
          border: '1px solid rgba(255,255,255,0.16)',
        }}>
          <div style={{ position: 'relative', width: 56, height: 56 }}>
            <svg width="56" height="56" viewBox="0 0 56 56">
              <circle cx="28" cy="28" r="22" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="4"/>
              <circle cx="28" cy="28" r="22" fill="none" stroke="#79c8bd" strokeWidth="4"
                strokeDasharray="138.2" strokeDashoffset="48" strokeLinecap="round"
                transform="rotate(-90 28 28)"/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>65%</div>
              <div style={{ fontSize: 8, opacity: 0.8 }}>本周</div>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, opacity: 0.85 }}>本周训练目标</div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>13 / 20 个病例 · 连续 7 天</div>
            <div style={{
              marginTop: 6, height: 4, borderRadius: 2,
              background: 'rgba(255,255,255,0.18)', overflow: 'hidden',
            }}>
              <div style={{ width: '65%', height: '100%', background: '#79c8bd', borderRadius: 2 }}/>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容 */}
      <div style={{ padding: '0 14px', marginTop: -56, position: 'relative', zIndex: 2 }}>
        {/* 继续训练 */}
        <div className="mh-card" style={{ padding: 14, boxShadow: 'var(--shadow-md)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
            <Icon name="pulse" size={14} color="var(--teal-500)"/>
            <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--teal-700)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>未完成</span>
            <span style={{ fontSize: 11, color: 'var(--ink-500)', marginLeft: 'auto' }}>剩余 ~12 分钟</span>
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <ImagePlaceholder width={62} height={62} label="" tone="dark" icon="tooth"/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>急性根尖周炎</div>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 2 }}>32 岁女性 · 右下后牙自发痛 3 天</div>
              <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                <span className="mh-chip mh-chip-blue">问诊中</span>
                <span className="mh-chip mh-chip-outline">3/7 步骤</span>
              </div>
            </div>
          </div>
          <button onClick={() => onNav && onNav('session')} className="mh-btn mh-btn-primary" style={{ width: '100%', marginTop: 12 }}>
            <Icon name="play" size={14}/>继续会话
          </button>
        </div>

        {/* 四象限快捷 */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
          {[
            { id: 'training', icon: 'stethoscope', label: '病例训练', sub: '120+ 病例', tone: 'blue' },
            { id: 'lab', icon: 'flask', label: '操作合规', sub: '8 类实验', tone: 'teal' },
            { id: 'community', icon: 'hash', label: '科研热点', sub: '今日 12 条', tone: 'amber' },
            { id: 'jobs', icon: 'building', label: '招聘广场', sub: '32 新岗位', tone: 'ink' },
          ].map(c => (
            <button key={c.id} onClick={() => onNav && onNav(c.id)} style={{
              padding: 14, background: 'white', border: '1px solid var(--border)',
              borderRadius: 12, textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: c.tone === 'blue' ? 'var(--blue-50)' : c.tone === 'teal' ? 'var(--teal-50)' : c.tone === 'amber' ? 'var(--amber-50)' : 'var(--ink-100)',
                color: c.tone === 'blue' ? 'var(--blue-600)' : c.tone === 'teal' ? 'var(--teal-700)' : c.tone === 'amber' ? 'var(--amber-700)' : 'var(--ink-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon name={c.icon} size={17}/>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{c.label}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 1 }}>{c.sub}</div>
              </div>
            </button>
          ))}
        </div>

        {/* 今日推荐病例 */}
        <div style={{ marginTop: 18 }}>
          <SectionTitle action={<a style={{ fontSize: 11, color: 'var(--blue-600)', textDecoration: 'none' }}>查看全部 →</a>}>
            今日推荐 · 基于薄弱项
          </SectionTitle>
          <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -14px', padding: '0 14px 4px' }} className="mh-scroll">
            {[
              { title: '慢性牙周炎', tag: '牙周', diff: 3, time: '15min', tone: 'blue' },
              { title: '上颌窦底提升', tag: '种植', diff: 4, time: '25min', tone: 'teal' },
              { title: '正畸矫治拔牙', tag: '正畸', diff: 3, time: '20min', tone: 'amber' },
            ].map((c, i) => (
              <div key={i} style={{
                flexShrink: 0, width: 168, padding: 12,
                background: 'white', border: '1px solid var(--border)',
                borderRadius: 12,
              }}>
                <ImagePlaceholder height={88} label={c.tag} tone={c.tone} icon="tooth"/>
                <div style={{ fontSize: 13, fontWeight: 600, marginTop: 8 }}>{c.title}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                  <Stars value={c.diff}/>
                  <span style={{ fontSize: 10, color: 'var(--ink-500)' }}>{c.time}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 学情雷达 */}
        <div className="mh-card" style={{ padding: 14, marginTop: 18 }}>
          <SectionTitle action={<span className="mh-chip mh-chip-blue">本月</span>}>能力画像</SectionTitle>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <RadarChart values={[78, 65, 56, 84, 72, 68]} size={148}/>
            <div style={{ flex: 1, fontSize: 11, lineHeight: 1.7 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--ink-600)' }}>临床思维</span>
                <strong>78</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--ink-600)' }}>操作技能</span>
                <strong>65</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--amber-700)' }}>
                <span>科研能力 ↓</span>
                <strong>56</strong>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: 'var(--ink-600)' }}>基础理论</span>
                <strong>84</strong>
              </div>
            </div>
          </div>
        </div>

        {/* 底部小提示 */}
        <div style={{
          marginTop: 18, padding: 12,
          background: 'var(--blue-50)', border: '1px solid var(--blue-100)',
          borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <Icon name="lightbulb" color="var(--blue-600)" size={16}/>
          <div style={{ flex: 1, fontSize: 11.5, color: 'var(--blue-800)', lineHeight: 1.55 }}>
            <strong>小灵建议</strong>:你近 7 天的「科研能力」分项偏低,推荐前往
            <a style={{ color: 'var(--blue-600)' }}> 师生对接广场 </a>
            浏览 3 个匹配课题。
          </div>
        </div>
      </div>
    </div>
  );
};

const HomeDesktop = ({ onNav }) => {
  return (
    <div style={{ flex: 1, overflowY: 'auto', background: 'var(--bg-app)' }} className="mh-scroll">
      <DesktopTopBar
        title="首页"
        breadcrumb="MedHub · 学生工作台"
        right={
          <div style={{ position: 'relative', width: 240 }}>
            <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={{ padding: 24, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Hero 卡 */}
          <div style={{
            background: 'linear-gradient(120deg, #2f76b3 0%, #1f5d96 50%, #163a5f 100%)',
            borderRadius: 16, padding: '22px 26px', color: 'white',
            display: 'flex', alignItems: 'center', gap: 26, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, opacity: 0.85 }}>下午好,林思远 · 第 14 周</div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 6, letterSpacing: '-0.015em' }}>今天的训练:急性根尖周炎</div>
              <div style={{ fontSize: 12.5, opacity: 0.85, marginTop: 6, lineHeight: 1.6, maxWidth: 460 }}>
                来自《口腔颌面外科学》第 8 章 · 难度 ★★★☆☆ · 配套 3 篇文献 · 上次进度 3/7
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
                <button onClick={() => onNav && onNav('session')} className="mh-btn mh-btn-lg" style={{ background: 'white', color: 'var(--blue-700)' }}>
                  <Icon name="play" size={14}/>继续会话
                </button>
                <button className="mh-btn mh-btn-lg" style={{ background: 'rgba(255,255,255,0.16)', color: 'white', borderColor: 'rgba(255,255,255,0.22)' }}>
                  <Icon name="refresh" size={14}/>换一个
                </button>
              </div>
            </div>
            <div style={{
              width: 120, height: 120, flexShrink: 0,
              background: 'rgba(255,255,255,0.1)', borderRadius: 16,
              border: '1px solid rgba(255,255,255,0.16)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="tooth" size={56} color="rgba(255,255,255,0.85)" strokeWidth={1.4}/>
            </div>
          </div>

          {/* KPI 行 */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { label: '本周训练', value: '13', unit: '/20', icon: 'stethoscope', tone: 'blue', delta: '+3 昨日' },
              { label: '能力得分', value: '74', unit: '/100', icon: 'radar', tone: 'teal', delta: '↑ 2 周环比' },
              { label: '科研活跃度', value: '8.2', unit: '', icon: 'microscope', tone: 'amber', delta: '↓ 0.3 关注' },
              { label: '收藏岗位', value: '12', unit: '', icon: 'bookmark', tone: 'ink', delta: '4 个截止中' },
            ].map((k, i) => (
              <div key={i} className="mh-card" style={{ padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-500)' }}>{k.label}</span>
                  <div style={{
                    width: 24, height: 24, borderRadius: 6,
                    background: k.tone === 'blue' ? 'var(--blue-50)' : k.tone === 'teal' ? 'var(--teal-50)' : k.tone === 'amber' ? 'var(--amber-50)' : 'var(--ink-100)',
                    color: k.tone === 'blue' ? 'var(--blue-600)' : k.tone === 'teal' ? 'var(--teal-700)' : k.tone === 'amber' ? 'var(--amber-700)' : 'var(--ink-700)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name={k.icon} size={13}/>
                  </div>
                </div>
                <div style={{ marginTop: 8, display: 'flex', alignItems: 'baseline', gap: 2 }}>
                  <span style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em' }}>{k.value}</span>
                  <span style={{ fontSize: 12, color: 'var(--ink-500)' }}>{k.unit}</span>
                </div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 4 }}>{k.delta}</div>
              </div>
            ))}
          </div>

          {/* 今日推荐 */}
          <div className="mh-card" style={{ padding: 18 }}>
            <SectionTitle action={
              <div style={{ display: 'flex', gap: 6 }}>
                <span className="mh-chip mh-chip-blue">基于薄弱项</span>
                <a style={{ fontSize: 11, color: 'var(--blue-600)' }}>查看全部 →</a>
              </div>
            }>今日推荐病例</SectionTitle>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {[
                { title: '慢性根尖周炎', tag: '牙髓 · 临床思维', diff: 3, time: '15-20 min', desc: '24 岁男性,左上后牙咬合不适 2 周', tone: 'blue' },
                { title: '上颌前牙外伤脱位再植', tag: '急诊 · 操作', diff: 4, time: '25 min', desc: '12 岁男孩,跌倒后 #11 完全脱出 30 分钟', tone: 'teal' },
                { title: '复发性口腔溃疡', tag: '黏膜 · 鉴别诊断', diff: 2, time: '12 min', desc: '38 岁女性,反复口腔溃疡 5 年,近期加重', tone: 'amber' },
              ].map((c, i) => (
                <div key={i} className="mh-hover-lift" style={{
                  border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden',
                  cursor: 'pointer',
                }}>
                  <ImagePlaceholder height={104} label={c.tag.split(' · ')[0]} tone={c.tone} icon="tooth"/>
                  <div style={{ padding: 12 }}>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{c.title}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 3 }}>{c.tag}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-700)', marginTop: 8, lineHeight: 1.55, height: 32, overflow: 'hidden' }}>{c.desc}</div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                      <Stars value={c.diff}/>
                      <span style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{c.time}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 训练时间分布 */}
          <div className="mh-card" style={{ padding: 18 }}>
            <SectionTitle action={
              <div style={{ display: 'flex', gap: 4, padding: 2, background: 'var(--ink-100)', borderRadius: 6 }}>
                {['周', '月', '年'].map((t, i) => (
                  <button key={i} style={{
                    border: 'none', padding: '3px 9px', fontSize: 11,
                    background: i === 0 ? 'white' : 'transparent',
                    borderRadius: 4, cursor: 'pointer',
                    fontWeight: i === 0 ? 600 : 400,
                    boxShadow: i === 0 ? 'var(--shadow-sm)' : 'none',
                    fontFamily: 'inherit',
                  }}>{t}</button>
                ))}
              </div>
            }>训练时长分布</SectionTitle>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: 120, padding: '0 4px' }}>
              {[
                { d: '一', v: 0.45 }, { d: '二', v: 0.62 }, { d: '三', v: 0.30 },
                { d: '四', v: 0.78 }, { d: '五', v: 0.85 }, { d: '六', v: 0.55 }, { d: '日', v: 0.40 },
              ].map((b, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <div style={{
                    width: '100%', height: `${b.v * 100}%`, minHeight: 4,
                    background: i === 4 ? 'linear-gradient(180deg, var(--blue-400), var(--blue-600))' : 'var(--blue-100)',
                    borderRadius: 6,
                  }}/>
                  <span style={{ fontSize: 11, color: 'var(--ink-500)' }}>{b.d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 右栏 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {/* 能力画像 */}
          <div className="mh-card" style={{ padding: 18 }}>
            <SectionTitle action={<a style={{ fontSize: 11, color: 'var(--blue-600)' }}>详细 →</a>}>能力画像</SectionTitle>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <RadarChart values={[78, 65, 56, 84, 72, 68]} size={220}/>
            </div>
            <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--ink-700)', lineHeight: 1.6, padding: 10, background: 'var(--blue-50)', borderRadius: 8 }}>
              <strong style={{ color: 'var(--blue-700)' }}>科研能力</strong>较弱,建议关注「师生对接」中匹配度高的 3 个课题。
            </div>
          </div>

          {/* 任务待办 */}
          <div className="mh-card" style={{ padding: 18 }}>
            <SectionTitle>本周任务</SectionTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { d: '今日 18:00', t: '完成根尖周炎病例', s: 'urgent' },
                { d: '周四', t: '提交牙周文献综述初稿', s: 'normal' },
                { d: '周五', t: '李教授 RCT 课题面试', s: 'star' },
                { d: '本周', t: '操作合规训练 ×2 次', s: 'normal' },
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '4px 0' }}>
                  <div style={{
                    width: 18, height: 18, borderRadius: 5,
                    border: '1.5px solid var(--ink-300)', flexShrink: 0, marginTop: 1,
                    background: t.s === 'urgent' ? 'var(--red-50)' : 'transparent',
                    borderColor: t.s === 'urgent' ? 'var(--red-500)' : 'var(--ink-300)',
                  }}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500 }}>{t.t}</div>
                    <div style={{
                      fontSize: 10.5, marginTop: 2,
                      color: t.s === 'urgent' ? 'var(--red-700)' : 'var(--ink-500)',
                      fontWeight: t.s === 'urgent' ? 600 : 400,
                    }}>{t.d}</div>
                  </div>
                  {t.s === 'star' && <Icon name="star" size={14} color="var(--amber-500)"/>}
                </div>
              ))}
            </div>
          </div>

          {/* 招聘热度 */}
          <div className="mh-card" style={{ padding: 18 }}>
            <SectionTitle action={<a style={{ fontSize: 11, color: 'var(--blue-600)' }}>更多 →</a>}>近期机会</SectionTitle>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { name: '北京大学口腔医院', role: '规培医师', tag: '截止 5/12', tone: 'red' },
                { name: '华西口腔医学院', role: '硕士直博', tag: '推荐免试', tone: 'teal' },
                { name: '上海第九人民医院', role: '种植助理', tag: '在线笔试', tone: 'blue' },
              ].map((j, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: 'var(--ink-100)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 700, color: 'var(--ink-700)',
                  }}>{j.name.slice(0, 2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{j.name}</div>
                    <div style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{j.role}</div>
                  </div>
                  <span className={`mh-chip mh-chip-${j.tone}`} style={{ fontSize: 10 }}>{j.tag}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HomeMobile, HomeDesktop });