// CCI共病指数页 - 全栈版本（数据从state读取，与后端同步）
function CCIPage({ navigate, goBack }) {
  const { state } = React.useContext(AppContext);
  const { diseases } = state;

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

  const scoredDiseases = diseases.filter(d => d.cciScore > 0);
  const zeroScoreDiseases = diseases.filter(d => d.cciScore === 0);

  const riskBgColors = {
    info: 'linear-gradient(135deg, #3a8f7a 0%, #5aab94 100%)',
    warning: 'linear-gradient(135deg, #e08b3a 0%, #f0a85a 100%)',
    danger: 'linear-gradient(135deg, #d85a4a 0%, #e87c6d 100%)',
  };

  return (
    <div className="page page-enter">
      <TopBar title="CCI共病指数" onBack={goBack} />

      <div style={{ padding: '0 16px' }}>
        {/* 得分大卡片 */}
        <div style={{
          background: riskBgColors[risk.color],
          borderRadius: 20,
          padding: '28px 24px',
          color: '#fff',
          textAlign: 'center',
          marginBottom: 16,
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute',
            width: 200, height: 200,
            borderRadius: '50%',
            background: 'rgba(255,255,255,0.08)',
            top: -80, right: -40,
          }} />
          <div style={{
            position: 'absolute',
            width: 120, height: 120,
            borderRadius: '50%',
            background: 'rgba(255,255,255,0.06)',
            bottom: -40, left: -20,
          }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ fontSize: 13, opacity: 0.85, marginBottom: 8 }}>
              查尔森共病指数（CCI）
            </div>
            <div style={{ fontSize: 64, fontWeight: 700, lineHeight: 1 }}>
              {score}
            </div>
            <div style={{ fontSize: 14, marginTop: 8, opacity: 0.9 }}>
              分 · {risk.level}
            </div>
            <div style={{
              marginTop: 16,
              padding: '10px 16px',
              background: 'rgba(255,255,255,0.2)',
              borderRadius: 10,
              fontSize: 13,
              lineHeight: 1.5,
            }}>
              {risk.desc}
            </div>
          </div>
        </div>

        {/* 风险等级说明 */}
        <div className="card">
          <div className="card-title">
            <span>风险等级说明</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { range: '0 ~ 1 分', level: '低风险', color: 'info', desc: '共病程度较轻，定期监测即可' },
              { range: '2 ~ 3 分', level: '中风险', color: 'warning', desc: '存在多种慢病，建议规律随访管理' },
              { range: '≥ 4 分', level: '高风险', color: 'danger', desc: '共病情况复杂，建议密切关注并定期复诊' },
            ].map(item => (
              <div key={item.range} style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '10px 12px',
                borderRadius: 10,
                background: item.range.includes(score.toString())
                  ? (item.color === 'danger' ? '#fef0ee' : item.color === 'warning' ? '#fef4e6' : '#eef5f2')
                  : '#faf8f3',
                border: item.range.includes(score.toString())
                  ? `1.5px solid ${item.color === 'danger' ? '#d85a4a' : item.color === 'warning' ? '#e08b3a' : '#3a8f7a'}`
                  : '1px solid #f0ebe0',
              }}>
                <span className={`chip chip-${item.color}`} style={{ flexShrink: 0 }}>{item.level}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#2c3e3a' }}>{item.range}</div>
                  <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>{item.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 计入评分的疾病 */}
        <div className="card">
          <div className="card-title">
            <span>计入评分的疾病</span>
            <span className="more">{scoredDiseases.length}项</span>
          </div>
          {scoredDiseases.length === 0 ? (
            <div style={{ fontSize: 13, color: '#a3a89f', textAlign: 'center', padding: '20px 0' }}>
              暂无计入评分的慢病
            </div>
          ) : (
            scoredDiseases.map(d => (
              <div key={d.id} style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '12px 0',
                borderBottom: scoredDiseases.indexOf(d) < scoredDiseases.length - 1 ? '1px solid #f0ebe0' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 8, height: 8, borderRadius: '50%',
                    background: '#3a8f7a',
                  }} />
                  <span style={{ fontSize: 14, color: '#2c3e3a' }}>{d.name}</span>
                </div>
                <span style={{ fontSize: 14, fontWeight: 600, color: '#d85a4a' }}>
                  +{d.cciScore} 分
                </span>
              </div>
            ))
          )}
        </div>

        {/* 不计分但需关注 */}
        {zeroScoreDiseases.length > 0 && (
          <div className="card">
            <div className="card-title">
              <span>其他慢病</span>
              <span className="more">不计入CCI评分</span>
            </div>
            {zeroScoreDiseases.map(d => (
              <div key={d.id} style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '12px 0',
                borderBottom: zeroScoreDiseases.indexOf(d) < zeroScoreDiseases.length - 1 ? '1px solid #f0ebe0' : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{
                    width: 8, height: 8, borderRadius: '50%',
                    background: '#c8c5bd',
                  }} />
                  <span style={{ fontSize: 14, color: '#5a6e69' }}>{d.name}</span>
                </div>
                <span style={{ fontSize: 13, color: '#a3a89f' }}>+0 分</span>
              </div>
            ))}
          </div>
        )}

        {/* 说明文字 */}
        <div style={{
          background: '#eef5f2',
          borderRadius: 12,
          padding: '14px 16px',
          fontSize: 12,
          color: '#5a6e69',
          lineHeight: 1.7,
          marginBottom: 20,
        }}>
          <div style={{ fontWeight: 600, color: '#3a8f7a', marginBottom: 6 }}>
            💡 关于CCI共病指数
          </div>
          <p>查尔森共病指数（Charlson Comorbidity Index, CCI）是一种评估共病严重程度的常用工具，用于预测患者的长期健康风险。</p>
          <p style={{ marginTop: 6, fontWeight: 500, color: '#d85a4a' }}>
            ⚠️ 本指数仅供自我管理参考，不能替代医生的专业诊断与评估。具体诊疗请遵医嘱。
          </p>
        </div>
      </div>
    </div>
  );
}