// 首页（仪表盘）
function HomePage({ navigate }) {
  const { state } = React.useContext(AppContext);
  const { user, diseases, medications, bloodPressure, bloodSugar } = state;

  const cciScore = calculateCCIScore(diseases);
  const risk = getCCIRiskLevel(cciScore);

  const latestBP = bloodPressure[0];
  const latestBS = bloodSugar[0];

  const quickActions = [
    { key: 'disease', label: '录入慢病', icon: <Icon.Heart color="#d85a4a" size={24} />, color: { bg: '#fef0ee', fg: '#d85a4a' } },
    { key: 'medication', label: '录入用药', icon: <Icon.Pill color="#3a8f7a" size={24} />, color: { bg: '#eef5f2', fg: '#3a8f7a' } },
    { key: 'vitals', label: '记录指标', icon: <Icon.Activity color="#e08b3a" size={24} />, color: { bg: '#fef4e6', fg: '#e08b3a' } },
    { key: 'report', label: '导出报告', icon: <Icon.File color="#4a7dac" size={24} />, color: { bg: '#e8f0f7', fg: '#4a7dac' } },
    { key: 'ai', label: 'AI助手', icon: <Icon.Bot color="#7c5cd8" size={24} />, color: { bg: '#f0ecfa', fg: '#7c5cd8' } },
  ];

  // 血压状态颜色
  function bpStatus(sys, dia) {
    if (sys >= 140 || dia >= 90) return { label: '偏高', color: 'danger' };
    if (sys >= 130 || dia >= 85) return { label: '偏高限', color: 'warning' };
    return { label: '正常', color: 'info' };
  }
  function bsStatus(val, type) {
    if (type === 'fasting') {
      if (val >= 7) return { label: '偏高', color: 'danger' };
      if (val >= 6.1) return { label: '偏高限', color: 'warning' };
      return { label: '正常', color: 'info' };
    } else {
      if (val >= 11.1) return { label: '偏高', color: 'danger' };
      if (val >= 7.8) return { label: '偏高限', color: 'warning' };
      return { label: '正常', color: 'info' };
    }
  }

  const bpSt = latestBP ? bpStatus(latestBP.systolic, latestBP.diastolic) : null;
  const bsSt = latestBS ? bsStatus(latestBS.value, latestBS.type) : null;

  return (
    <div className="page page-enter">
      {/* 头部渐变 */}
      <div style={{
        background: 'linear-gradient(135deg, #3a8f7a 0%, #5aab94 100%)',
        padding: '20px 20px 60px',
        borderRadius: '0 0 28px 28px',
        color: '#fff',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute',
          width: 180, height: 180,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.08)',
          top: -50, right: -30,
        }} />
        <div style={{
          position: 'absolute',
          width: 100, height: 100,
          borderRadius: '50%',
          background: 'rgba(255,255,255,0.06)',
          bottom: -20, left: -10,
        }} />
        {/* 用户信息 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative', zIndex: 1 }}>
          <Avatar name={user.nickname} size={48} />
          <div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>
              {user.nickname}
              <span style={{ fontSize: 13, fontWeight: 400, marginLeft: 6, opacity: 0.8 }}>
                {user.age}岁 · {user.gender}
              </span>
            </div>
            <div style={{ fontSize: 12, opacity: 0.8, marginTop: 2 }}>
              今日健康，从记录开始
            </div>
          </div>
        </div>
      </div>

      {/* 主体内容 - 上移与头部叠加 */}
      <div style={{ padding: '0 16px', marginTop: -40, position: 'relative', zIndex: 2 }}>
        {/* 慢病档案概览卡片 */}
        <div className="card" style={{ marginBottom: 14 }}>
          <div className="card-title">
            <span>我的慢病档案</span>
            <button className="btn-ghost" onClick={() => navigate('disease')}>
              查看详情
            </button>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-around', textAlign: 'center' }}>
            <div>
              <div style={{ fontSize: 26, fontWeight: 700, color: '#3a8f7a' }}>
                {diseases.length}
              </div>
              <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>已录入慢病</div>
            </div>
            <div style={{ width: 1, background: '#ebe8e0' }} />
            <div>
              <div style={{ fontSize: 26, fontWeight: 700, color: '#e08b3a' }}>
                {medications.length}
              </div>
              <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>在用药物</div>
            </div>
            <div style={{ width: 1, background: '#ebe8e0' }} />
            <div onClick={() => navigate('cci')} style={{ cursor: 'pointer' }}>
              <div style={{ fontSize: 26, fontWeight: 700, color: '#d85a4a' }}>
                {cciScore}
              </div>
              <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>CCI指数</div>
            </div>
          </div>
          <div style={{
            marginTop: 14,
            padding: '10px 14px',
            background: risk.color === 'danger' ? '#fef0ee' : risk.color === 'warning' ? '#fef4e6' : '#eef5f2',
            borderRadius: 10,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
            <span style={{ fontSize: 13, color: '#5a6e69' }}>
              风险等级：<strong style={{ color: risk.color === 'danger' ? '#d85a4a' : risk.color === 'warning' ? '#e08b3a' : '#3a8f7a' }}>{risk.level}</strong>
            </span>
            <button className="btn-ghost" style={{ fontSize: 12, padding: '2px 8px' }} onClick={() => navigate('cci')}>
              了解详情
            </button>
          </div>
        </div>

        {/* 快捷入口 */}
        <div className="card" style={{ marginBottom: 14 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(5, 1fr)',
            gap: '12px 8px',
          }}>
            {quickActions.map(a => (
              <QuickAction
                key={a.key}
                icon={a.icon}
                label={a.label}
                color={a.color}
                onClick={() => navigate(a.key)}
              />
            ))}
          </div>
        </div>

        {/* 最近指标 */}
        <div className="card">
          <div className="card-title">
            <span>最近指标</span>
            <button className="btn-ghost" onClick={() => navigate('vitals')}>
              全部记录
            </button>
          </div>

          {/* 血压 */}
          <div style={{
            padding: '14px 0',
            borderBottom: '1px solid #f0ebe0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#fef0ee',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Heart color="#d85a4a" size={22} />
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: '#2c3e3a' }}>血压</div>
                <div style={{ fontSize: 12, color: '#a3a89f', marginTop: 2 }}>
                  {latestBP ? latestBP.time : '暂无记录'}
                </div>
              </div>
            </div>
            {latestBP && (
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: '#2c3e3a' }}>
                  {latestBP.systolic}<span style={{ fontSize: 13, color: '#8a9390', fontWeight: 400 }}>/{latestBP.diastolic}</span>
                  <span style={{ fontSize: 11, color: '#a3a89f', fontWeight: 400, marginLeft: 2 }}>mmHg</span>
                </div>
                <span className={`chip chip-${bpSt.color}`} style={{ marginTop: 4 }}>{bpSt.label}</span>
              </div>
            )}
          </div>

          {/* 血糖 */}
          <div style={{
            padding: '14px 0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: '#fef4e6',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon.Activity color="#e08b3a" size={22} />
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: '#2c3e3a' }}>血糖</div>
                <div style={{ fontSize: 12, color: '#a3a89f', marginTop: 2 }}>
                  {latestBS ? `${latestBS.time} · ${latestBS.type === 'fasting' ? '空腹' : '餐后'}` : '暂无记录'}
                </div>
              </div>
            </div>
            {latestBS && (
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 20, fontWeight: 700, color: '#2c3e3a' }}>
                  {latestBS.value}
                  <span style={{ fontSize: 11, color: '#a3a89f', fontWeight: 400, marginLeft: 2 }}>mmol/L</span>
                </div>
                <span className={`chip chip-${bsSt.color}`} style={{ marginTop: 4 }}>{bsSt.label}</span>
              </div>
            )}
          </div>
        </div>

        {/* 底部提示 */}
        <div style={{
          textAlign: 'center',
          fontSize: 11,
          color: '#b5b9b2',
          padding: '20px 0 30px',
          lineHeight: 1.6,
        }}>
          <p>本工具仅供自我管理参考</p>
          <p>不能替代医生诊断与处方</p>
        </div>
      </div>
    </div>
  );
}