// 报告导出页
function ReportPage({ navigate, goBack }) {
  const { state, showToast } = React.useContext(AppContext);
  const { user, diseases, medications, bloodPressure, bloodSugar } = state;

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

  const handleExport = () => {
    showToast('报告已生成，开始下载...');
    setTimeout(() => {
      showToast('PDF导出成功');
    }, 1500);
  };

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

  return (
    <div className="page page-enter">
      <TopBar title="健康档案报告" onBack={goBack} />

      <div style={{ padding: '0 16px' }}>
        {/* 报告头 */}
        <div style={{
          background: 'linear-gradient(135deg, #3a8f7a 0%, #5aab94 100%)',
          borderRadius: 16,
          padding: '20px',
          color: '#fff',
          marginBottom: 16,
          textAlign: 'center',
        }}>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 4 }}>
            个人慢病档案报告
          </div>
          <div style={{ fontSize: 12, opacity: 0.85 }}>
            生成时间：{new Date().toLocaleDateString('zh-CN')}
          </div>
        </div>

        {/* 报告内容 - 模拟预览 */}
        <div style={{
          background: '#fff',
          borderRadius: 16,
          padding: 20,
          marginBottom: 16,
          boxShadow: '0 2px 12px rgba(44,62,58,0.05)',
        }}>
          {/* 个人基本信息 */}
          <ReportSection title="一、个人基本信息">
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <Avatar name={user.name} size={48} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: '#2c3e3a' }}>{user.name}</div>
                <div style={{ fontSize: 13, color: '#8a9390', marginTop: 4 }}>
                  {user.age}岁 · {user.gender} · {user.phone}
                </div>
                <div style={{ fontSize: 13, color: '#8a9390' }}>
                  身高 {user.height}cm · 体重 {user.weight}kg
                </div>
              </div>
            </div>
          </ReportSection>

          {/* 慢病列表 */}
          <ReportSection title="二、慢病列表">
            {diseases.length === 0 ? (
              <div style={{ fontSize: 13, color: '#a3a89f' }}>暂无记录</div>
            ) : (
              diseases.map((d, i) => (
                <div key={d.id} style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  padding: '8px 0',
                  borderBottom: i < diseases.length - 1 ? '1px dashed #ebe8e0' : 'none',
                }}>
                  <span style={{ fontSize: 14, color: '#2c3e3a' }}>
                    {i + 1}. {d.name}
                  </span>
                  <span style={{ fontSize: 12, color: '#8a9390' }}>
                    确诊：{d.diagnoseDate}
                  </span>
                </div>
              ))
            )}
          </ReportSection>

          {/* 用药列表 */}
          <ReportSection title="三、用药情况">
            {medications.length === 0 ? (
              <div style={{ fontSize: 13, color: '#a3a89f' }}>暂无记录</div>
            ) : (
              medications.map((m, i) => (
                <div key={m.id} style={{
                  padding: '8px 0',
                  borderBottom: i < medications.length - 1 ? '1px dashed #ebe8e0' : 'none',
                }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: '#2c3e3a' }}>
                    {i + 1}. {m.name} <span style={{ fontWeight: 400, color: '#8a9390', fontSize: 12 }}>{m.dose}</span>
                  </div>
                  <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>
                    {m.frequency} · {m.times && m.times.join(' / ')}
                    {m.note && ` · ${m.note}`}
                  </div>
                </div>
              ))
            )}
          </ReportSection>

          {/* CCI得分 */}
          <ReportSection title="四、CCI共病指数">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 56, height: 56,
                borderRadius: '50%',
                background: risk.color === 'danger' ? '#fef0ee' : risk.color === 'warning' ? '#fef4e6' : '#eef5f2',
                color: risk.color === 'danger' ? '#d85a4a' : risk.color === 'warning' ? '#e08b3a' : '#3a8f7a',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22, fontWeight: 700,
              }}>
                {cciScore}
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: '#2c3e3a' }}>
                  风险等级：{risk.level}
                </div>
                <div style={{ fontSize: 12, color: '#8a9390', marginTop: 2 }}>
                  {risk.desc}
                </div>
              </div>
            </div>
          </ReportSection>

          {/* 最近指标 */}
          <ReportSection title="五、最近指标记录">
            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{
                flex: 1,
                background: '#fef0ee',
                borderRadius: 10,
                padding: 12,
              }}>
                <div style={{ fontSize: 12, color: '#d85a4a', fontWeight: 500 }}>血压</div>
                {latestBP ? (
                  <>
                    <div style={{ fontSize: 18, fontWeight: 700, color: '#2c3e3a', marginTop: 4 }}>
                      {latestBP.systolic}/{latestBP.diastolic}
                      <span style={{ fontSize: 10, fontWeight: 400 }}>mmHg</span>
                    </div>
                    <div style={{ fontSize: 10, color: '#a3a89f', marginTop: 2 }}>
                      {latestBP.time}
                    </div>
                  </>
                ) : (
                  <div style={{ fontSize: 12, color: '#a3a89f', marginTop: 4 }}>暂无</div>
                )}
              </div>
              <div style={{
                flex: 1,
                background: '#fef4e6',
                borderRadius: 10,
                padding: 12,
              }}>
                <div style={{ fontSize: 12, color: '#e08b3a', fontWeight: 500 }}>血糖</div>
                {latestBS ? (
                  <>
                    <div style={{ fontSize: 18, fontWeight: 700, color: '#2c3e3a', marginTop: 4 }}>
                      {latestBS.value}
                      <span style={{ fontSize: 10, fontWeight: 400 }}>mmol/L</span>
                    </div>
                    <div style={{ fontSize: 10, color: '#a3a89f', marginTop: 2 }}>
                      {latestBS.type === 'fasting' ? '空腹' : '餐后'}
                    </div>
                  </>
                ) : (
                  <div style={{ fontSize: 12, color: '#a3a89f', marginTop: 4 }}>暂无</div>
                )}
              </div>
            </div>
          </ReportSection>
        </div>

        {/* 使用提示 */}
        <div style={{
          background: '#eef5f2',
          borderRadius: 12,
          padding: '14px 16px',
          fontSize: 12,
          color: '#5a6e69',
          lineHeight: 1.7,
          marginBottom: 16,
        }}>
          <div style={{ fontWeight: 600, color: '#3a8f7a', marginBottom: 4 }}>📄 使用说明</div>
          <p>1. 本报告汇总您在本工具中录入的慢病、用药及指标数据</p>
          <p>2. 可导出为PDF格式，打印后带给医生就诊时参考</p>
          <p>3. 本报告不具备诊断效力，仅供健康管理参考</p>
        </div>

        {/* 导出按钮 */}
        <button
          className="btn btn-primary"
          style={{ height: 48, fontSize: 16, marginBottom: 20 }}
          onClick={handleExport}
        >
          导出PDF报告
        </button>
      </div>
    </div>
  );
}

// 报告分节组件
function ReportSection({ title, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        fontSize: 14,
        fontWeight: 600,
        color: '#3a8f7a',
        marginBottom: 10,
        paddingBottom: 6,
        borderBottom: '2px solid #eef5f2',
      }}>
        {title}
      </div>
      {children}
    </div>
  );
}