// 新页面集合 - Part 1：用药日历、异常预警、共病知识、体检计划

// =====================================
// 用药日历页面
// =====================================
function MedicationCalendarPage({ navigate, goBack }) {
  const { state, showToast } = React.useContext(AppContext);
  const [year, setYear] = React.useState(new Date().getFullYear());
  const [month, setMonth] = React.useState(new Date().getMonth() + 1);
  const [calendarData, setCalendarData] = React.useState(null);
  const [selectedDay, setSelectedDay] = React.useState(null);
  const [dayReminders, setDayReminders] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    loadCalendar();
  }, [year, month]);

  async function loadCalendar() {
    setLoading(true);
    try {
      const data = await api.getMedicationCalendar(year, month);
      setCalendarData(data);
    } catch (e) {
      showToast('加载失败');
    } finally {
      setLoading(false);
    }
  }

  const handleDayClick = async (day) => {
    const dateStr = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    setSelectedDay({ day, date: dateStr });
    try {
      const reminders = await api.getTodayReminders(dateStr);
      setDayReminders(reminders);
    } catch (e) {
      setDayReminders([]);
    }
  };

  const handleStatusChange = async (id, status) => {
    try {
      await api.updateReminderStatus(id, status);
      const dateStr = `${year}-${month.toString().padStart(2, '0')}-${selectedDay.day.toString().padStart(2, '0')}`;
      const reminders = await api.getTodayReminders(dateStr);
      setDayReminders(reminders);
      loadCalendar();
      showToast(status === 'taken' ? '已标记为已服用' : status === 'skipped' ? '已跳过' : '已更新');
    } catch (e) {
      showToast('操作失败');
    }
  };

  const daysInMonth = calendarData ? calendarData.days.length : new Date(year, month, 0).getDate();
  const firstDayOfWeek = new Date(year, month - 1, 1).getDay();
  const weekDays = ['日', '一', '二', '三', '四', '五', '六'];

  const getLevelColor = (level) => {
    switch (level) {
      case 'all': return '#3a8f7a';
      case 'partial': return '#e08b3a';
      case 'missed': return '#d85a4a';
      default: return '#e8e4dc';
    }
  };

  return (
    <div className="page">
      <TopBar title="用药日历" onBack={goBack} />

      <div style={{ padding: '12px 16px', overflowY: 'auto', height: 'calc(100% - 56px)', paddingBottom: 24 }}>
        {/* 统计概览 */}
        {calendarData && (
          <div className="card" style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-around', textAlign: 'center' }}>
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: '#3a8f7a' }}>{calendarData.streak}</div>
                <div style={{ fontSize: 12, color: '#8a9390' }}>连续打卡（天）</div>
              </div>
              <div style={{ width: 1, background: '#ebe8e0' }} />
              <div>
                <div style={{ fontSize: 28, fontWeight: 700, color: '#e08b3a' }}>{calendarData.monthRate}%</div>
                <div style={{ fontSize: 12, color: '#8a9390' }}>本月完成率</div>
              </div>
            </div>
          </div>
        )}

        {/* 月份切换 */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, padding: '0 8px' }}>
          <button
            className="btn-ghost"
            style={{ padding: '6px 12px', fontSize: 13 }}
            onClick={() => {
              if (month === 1) { setYear(y => y - 1); setMonth(12); }
              else setMonth(m => m - 1);
            }}
          >
            ‹ 上月
          </button>
          <div style={{ fontSize: 17, fontWeight: 600 }}>{year}年{month}月</div>
          <button
            className="btn-ghost"
            style={{ padding: '6px 12px', fontSize: 13 }}
            onClick={() => {
              if (month === 12) { setYear(y => y + 1); setMonth(1); }
              else setMonth(m => m + 1);
            }}
          >
            下月 ›
          </button>
        </div>

        {/* 日历 */}
        <div className="card" style={{ padding: 12 }}>
          {/* 星期表头 */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 8 }}>
            {weekDays.map(d => (
              <div key={d} style={{ textAlign: 'center', fontSize: 12, color: '#8a9390' }}>{d}</div>
            ))}
          </div>
          {/* 日期格子 */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
            {Array.from({ length: firstDayOfWeek }).map((_, i) => (
              <div key={`empty-${i}`} />
            ))}
            {calendarData && calendarData.days.map((d, idx) => (
              <button
                key={idx}
                onClick={() => d.total > 0 && handleDayClick(d.day)}
                style={{
                  aspectRatio: '1',
                  borderRadius: 8,
                  border: 'none',
                  background: getLevelColor(d.level),
                  color: d.level === 'none' ? '#8a9390' : '#fff',
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: d.total > 0 ? 'pointer' : 'default',
                  opacity: d.level === 'none' ? 0.5 : 1,
                  fontSize: 14,
                  fontWeight: d.level === 'none' ? 400 : 600,
                  transition: 'transform 0.1s',
                }}
                onMouseDown={e => e.currentTarget.style.transform = 'scale(0.92)'}
                onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
              >
                <div>{d.day}</div>
                {d.total > 0 && <div style={{ fontSize: 10 }}>{d.rate}%</div>}
              </button>
            ))}
          </div>
          {/* 图例 */}
          <div style={{ display: 'flex', gap: 12, marginTop: 12, fontSize: 11, color: '#8a9390', justifyContent: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: '#3a8f7a', display: 'inline-block' }} />全部按时
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: '#e08b3a', display: 'inline-block' }} />部分漏服
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 10, height: 10, borderRadius: 2, background: '#d85a4a', display: 'inline-block' }} />全部漏服
            </div>
          </div>
        </div>

        {/* 当日明细 */}
        {selectedDay && (
          <div className="card" style={{ marginTop: 16 }}>
            <div style={{ fontWeight: 600, marginBottom: 12 }}>
              {month}月{selectedDay.day}日 服药明细
            </div>
            {dayReminders.length === 0 ? (
              <div className="empty-state">
                <div style={{ fontSize: 13, color: '#8a9390' }}>当日无用药计划</div>
              </div>
            ) : (
              dayReminders.map(r => (
                <div key={r.id} style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '10px 0', borderBottom: '1px solid #ebe8e0',
                }}>
                  <div>
                    <div style={{ fontWeight: 500 }}>{r.name}</div>
                    <div style={{ fontSize: 12, color: '#8a9390' }}>
                      {r.dose} · {r.scheduledTime}
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {r.status === 'taken' ? (
                      <span className="chip" style={{ background: 'rgba(58,143,122,0.1)', color: '#3a8f7a' }}>已服用</span>
                    ) : r.status === 'skipped' ? (
                      <span className="chip" style={{ background: 'rgba(224,139,58,0.1)', color: '#e08b3a' }}>已跳过</span>
                    ) : r.status === 'missed' ? (
                      <span className="chip" style={{ background: 'rgba(216,90,74,0.1)', color: '#d85a4a' }}>已漏服</span>
                    ) : (
                      <>
                        <button
                          className="btn-primary"
                          style={{ fontSize: 12, padding: '5px 12px', borderRadius: 6 }}
                          onClick={() => handleStatusChange(r.id, 'taken')}
                        >
                          已吃
                        </button>
                        <button
                          className="btn-outline"
                          style={{ fontSize: 12, padding: '5px 12px', borderRadius: 6 }}
                          onClick={() => handleStatusChange(r.id, 'skipped')}
                        >
                          跳过
                        </button>
                      </>
                    )}
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// =====================================
// 异常预警页面
// =====================================
function AbnormalAlertsPage({ navigate, goBack }) {
  const { showToast } = React.useContext(AppContext);
  const [records, setRecords] = React.useState([]);
  const [filter, setFilter] = React.useState('all'); // all / bp / bs
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    loadRecords();
  }, []);

  async function loadRecords() {
    setLoading(true);
    try {
      const data = await api.getAbnormalRecords(100);
      setRecords(data);
    } catch (e) {
      showToast('加载失败');
    } finally {
      setLoading(false);
    }
  }

  const filtered = records.filter(r => {
    if (filter === 'all') return true;
    if (filter === 'bp') return r.type === 'blood_pressure';
    if (filter === 'bs') return r.type === 'blood_sugar';
    return true;
  });

  return (
    <div className="page">
      <TopBar title="预警记录" onBack={goBack} />

      <div style={{ padding: '12px 16px', overflowY: 'auto', height: 'calc(100% - 56px)', paddingBottom: 24 }}>
        {/* 筛选 */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          {[
            { key: 'all', label: '全部' },
            { key: 'bp', label: '血压' },
            { key: 'bs', label: '血糖' },
          ].map(f => (
            <button
              key={f.key}
              className={filter === f.key ? 'btn-primary' : 'btn-outline'}
              style={{ fontSize: 13, padding: '6px 16px', borderRadius: 20, flex: 1 }}
              onClick={() => setFilter(f.key)}
            >
              {f.label}
            </button>
          ))}
        </div>

        {loading ? (
          <div style={{ textAlign: 'center', padding: 40, color: '#8a9390' }}>加载中...</div>
        ) : filtered.length === 0 ? (
          <div className="empty-state">
            <Icon.Alert color="#a3a89f" size={40} />
            <div style={{ marginTop: 12, fontSize: 14, color: '#8a9390' }}>暂无异常记录</div>
            <div style={{ marginTop: 4, fontSize: 12, color: '#a3a89f' }}>继续保持良好的生活习惯</div>
          </div>
        ) : (
          <div className="card">
            {filtered.map((r, idx) => (
              <div key={r.id + r.type} style={{
                padding: '12px 0',
                borderBottom: idx < filtered.length - 1 ? '1px solid #ebe8e0' : 'none',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div style={{
                      width: 8, height: 8, borderRadius: '50%',
                      background: r.abnormalType === 'high' ? '#d85a4a' : '#4a7dac',
                    }} />
                    <span style={{ fontWeight: 500 }}>
                      {r.type === 'blood_pressure' ? '血压异常' : '血糖异常'}
                    </span>
                    <span className="chip" style={{
                      fontSize: 11, padding: '1px 6px',
                      background: r.abnormalType === 'high' ? 'rgba(216,90,74,0.1)' : 'rgba(74,125,172,0.1)',
                      color: r.abnormalType === 'high' ? '#d85a4a' : '#4a7dac',
                    }}>
                      {r.abnormalType === 'high' ? '偏高' : '偏低'}
                    </span>
                  </div>
                  <span style={{ fontSize: 12, color: '#8a9390' }}>{r.time}</span>
                </div>
                <div style={{ fontSize: 14, color: '#2c3e3a' }}>
                  {r.type === 'blood_pressure'
                    ? `收缩压 ${r.value1} mmHg / 舒张压 ${r.value2} mmHg`
                    : `${r.subType === 'fasting' ? '空腹' : '餐后'}血糖 ${r.value1} mmol/L`
                  }
                </div>
                <div style={{ fontSize: 12, color: '#8a9390', marginTop: 4 }}>
                  {r.type === 'blood_pressure' && (r.abnormalType === 'high'
                    ? '建议：按时服药，低盐饮食，避免情绪激动，如持续偏高请就医'
                    : '建议：起身缓慢，避免长时间站立，如频繁偏低请就医调整用药')}
                  {r.type === 'blood_sugar' && (r.abnormalType === 'high'
                    ? '建议：控制碳水摄入，适当运动，按时服药，定期监测'
                    : '建议：立即补充糖分（糖果/饼干），调整饮食或用药，频繁低血糖请就医')}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// =====================================
// 共病知识页面
// =====================================
function ComorbidityPage({ navigate, goBack }) {
  const { state } = React.useContext(AppContext);
  const [expandedId, setExpandedId] = React.useState(null);
  const [activeTab, setActiveTab] = React.useState('recommend');

  const userDiseaseNames = state.diseases.filter(d => d.status === 'active').map(d => d.name);

  // 计算推荐匹配
  const recommended = COMORBIDITY_KNOWLEDGE.filter(k => {
    const matchCount = k.diseases.filter(d => userDiseaseNames.some(ud => ud.includes(d) || d.includes(ud))).length;
    return matchCount >= 2;
  });

  const sections = [
    { key: 'interaction', label: '相互影响' },
    { key: 'medication', label: '用药注意' },
    { key: 'diet', label: '饮食要点' },
    { key: 'exercise', label: '运动建议' },
    { key: 'monitoring', label: '监测重点' },
    { key: 'warning', label: '就医信号' },
  ];

  const displayList = activeTab === 'recommend' ? recommended : COMORBIDITY_KNOWLEDGE;

  return (
    <div className="page">
      <TopBar title="共病知识" onBack={goBack} />

      <div style={{ padding: '12px 16px', overflowY: 'auto', height: 'calc(100% - 56px)', paddingBottom: 24 }}>
        {/* Tab切换 */}
        <div style={{ display: 'flex', background: '#efece5', borderRadius: 10, padding: 4, marginBottom: 16 }}>
          {[
            { key: 'recommend', label: '为你推荐' },
            { key: 'all', label: '全部知识' },
          ].map(t => (
            <button
              key={t.key}
              style={{
                flex: 1, padding: '8px 12px', borderRadius: 7,
                border: 'none', background: activeTab === t.key ? '#fff' : 'transparent',
                color: activeTab === t.key ? '#3a8f7a' : '#8a9390',
                fontWeight: activeTab === t.key ? 600 : 400, fontSize: 14,
                boxShadow: activeTab === t.key ? '0 2px 8px rgba(0,0,0,0.06)' : 'none',
              }}
              onClick={() => setActiveTab(t.key)}
            >
              {t.label}
            </button>
          ))}
        </div>

        {activeTab === 'recommend' && userDiseaseNames.length < 2 && (
          <div className="empty-state">
            <Icon.Book color="#a3a89f" size={40} />
            <div style={{ marginTop: 12, fontSize: 14, color: '#8a9390' }}>先录入2种以上慢病</div>
            <div style={{ marginTop: 4, fontSize: 12, color: '#a3a89f' }}>系统将为你推荐匹配的共病知识</div>
            <button className="btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('disease')}>
              去录入慢病
            </button>
          </div>
        )}

        {displayList.map(k => (
          <div key={k.id} className="card" style={{ marginBottom: 12 }}>
            <div
              style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                cursor: 'pointer',
              }}
              onClick={() => setExpandedId(expandedId === k.id ? null : k.id)}
            >
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{k.name}</div>
                <div style={{ fontSize: 12, color: '#8a9390' }}>{k.summary}</div>
              </div>
              <Icon.Chevron
                size={20}
                color="#8a9390"
                style={{ transform: expandedId === k.id ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
              />
            </div>

            {expandedId === k.id && (
              <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid #ebe8e0' }}>
                {sections.map(s => (
                  <div key={s.key} style={{ marginBottom: 12 }}>
                    <div style={{
                      fontSize: 14, fontWeight: 600, color: '#3a8f7a', marginBottom: 6,
                      display: 'flex', alignItems: 'center', gap: 6,
                    }}>
                      <span style={{ width: 3, height: 14, background: '#3a8f7a', borderRadius: 2 }} />
                      {s.label}
                    </div>
                    <div style={{ fontSize: 13, color: '#5a6360', lineHeight: 1.7, paddingLeft: 9 }}>
                      {k.content[s.key]}
                    </div>
                  </div>
                ))}
                <div style={{
                  marginTop: 8, padding: 10, background: '#f5f3ee', borderRadius: 8,
                  fontSize: 11, color: '#8a9390',
                }}>
                  免责声明：以上知识仅供参考，具体诊疗请遵从医师意见。
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// =====================================
// 体检计划页面
// =====================================
function CheckupPage({ navigate, goBack }) {
  const { state, showToast } = React.useContext(AppContext);
  const [plan, setPlan] = React.useState({ nextDate: '', items: [], lastResult: '' });
  const [records, setRecords] = React.useState([]);
  const [activeTab, setActiveTab] = React.useState('plan');
  const [showAdd, setShowAdd] = React.useState(false);

  React.useEffect(() => {
    loadData();
  }, []);

  async function loadData() {
    try {
      const data = await api.getCheckupPlan();
      setPlan(data.plan);
      setRecords(data.records);
    } catch (e) {
      showToast('加载失败');
    }
  }

  const diseaseNames = state.diseases.filter(d => d.status === 'active').map(d => d.name);
  const recommendedItems = getRecommendedCheckupItems(
    state.user.age || 0,
    state.user.gender || '男',
    diseaseNames
  );

  return (
    <div className="page">
      <TopBar title="体检计划" onBack={goBack} />

      <div style={{ padding: '12px 16px', overflowY: 'auto', height: 'calc(100% - 56px)', paddingBottom: 80 }}>
        {/* Tab */}
        <div style={{ display: 'flex', background: '#efece5', borderRadius: 10, padding: 4, marginBottom: 16 }}>
          {[
            { key: 'plan', label: '体检计划' },
            { key: 'records', label: '体检记录' },
          ].map(t => (
            <button
              key={t.key}
              style={{
                flex: 1, padding: '8px 12px', borderRadius: 7,
                border: 'none', background: activeTab === t.key ? '#fff' : 'transparent',
                color: activeTab === t.key ? '#3a8f7a' : '#8a9390',
                fontWeight: activeTab === t.key ? 600 : 400, fontSize: 14,
                boxShadow: activeTab === t.key ? '0 2px 8px rgba(0,0,0,0.06)' : 'none',
              }}
              onClick={() => setActiveTab(t.key)}
            >
              {t.label}
            </button>
          ))}
        </div>

        {activeTab === 'plan' && (
          <>
            {/* 下次体检 */}
            <div className="card" style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <div style={{ fontSize: 15, fontWeight: 600 }}>下次体检</div>
                <button
                  className="btn-outline"
                  style={{ fontSize: 12, padding: '4px 12px', borderRadius: 14 }}
                  onClick={async () => {
                    const date = prompt('请输入下次体检日期（格式：2025-12-31）', plan.nextDate || '');
                    if (date) {
                      try {
                        await api.updateCheckupPlan({ nextDate: date });
                        loadData();
                        showToast('已更新');
                      } catch (e) { showToast('更新失败'); }
                    }
                  }}
                >
                  设置
                </button>
              </div>
              {plan.nextDate ? (
                <div style={{ fontSize: 13, color: '#3a8f7a', fontWeight: 500 }}>
                  {plan.nextDate}
                </div>
              ) : (
                <div style={{ fontSize: 13, color: '#8a9390' }}>暂未设置下次体检日期</div>
              )}
            </div>

            {/* 推荐体检项目 */}
            <div className="card">
              <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 12 }}>
                推荐体检项目（根据您的情况）
              </div>
              {recommendedItems.map((item, idx) => (
                <div key={idx} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '8px 0',
                  borderBottom: idx < recommendedItems.length - 1 ? '1px solid #ebe8e0' : 'none',
                }}>
                  <span style={{ fontSize: 13 }}>{item.name}</span>
                  <span style={{ fontSize: 11, color: '#8a9390' }}>{item.freq}</span>
                </div>
              ))}
            </div>
          </>
        )}

        {activeTab === 'records' && (
          <>
            <button
              className="btn-primary"
              style={{ width: '100%', marginBottom: 12 }}
              onClick={() => setShowAdd(true)}
            >
              + 新增体检记录
            </button>

            {records.length === 0 ? (
              <div className="empty-state">
                <Icon.File color="#a3a89f" size={40} />
                <div style={{ marginTop: 12, fontSize: 14, color: '#8a9390' }}>暂无体检记录</div>
              </div>
            ) : (
              records.map(r => (
                <div key={r.id} className="card" style={{ marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span style={{ fontWeight: 600 }}>{r.checkDate}</span>
                    {r.abnormalItems && (
                      <span className="chip" style={{
                        background: 'rgba(216,90,74,0.1)', color: '#d85a4a', fontSize: 11,
                      }}>
                        有异常
                      </span>
                    )}
                  </div>
                  {r.abnormalItems && (
                    <div style={{ fontSize: 13, color: '#5a6360', marginBottom: 4 }}>
                      异常项：{r.abnormalItems}
                    </div>
                  )}
                  {r.note && (
                    <div style={{ fontSize: 12, color: '#8a9390' }}>{r.note}</div>
                  )}
                </div>
              ))
            )}
          </>
        )}
      </div>

      {/* 新增记录弹窗 */}
      {showAdd && (
        <BottomSheet onClose={() => setShowAdd(false)} title="新增体检记录">
          <AddCheckupRecordForm
            onSuccess={() => { setShowAdd(false); loadData(); showToast('已添加'); }}
            onCancel={() => setShowAdd(false)}
          />
        </BottomSheet>
      )}
    </div>
  );
}

function AddCheckupRecordForm({ onSuccess, onCancel }) {
  const [checkDate, setCheckDate] = React.useState('');
  const [abnormalItems, setAbnormalItems] = React.useState('');
  const [note, setNote] = React.useState('');

  const handleSubmit = async () => {
    if (!checkDate) return;
    try {
      await api.addCheckupRecord({ checkDate, abnormalItems, note });
      onSuccess();
    } catch (e) {
      // 错误由上层处理
    }
  };

  return (
    <div>
      <div className="form-group">
        <label>体检日期 *</label>
        <input type="date" value={checkDate} onChange={e => setCheckDate(e.target.value)} />
      </div>
      <div className="form-group">
        <label>异常项（选填）</label>
        <input
          type="text" value={abnormalItems}
          onChange={e => setAbnormalItems(e.target.value)}
          placeholder="如：血压偏高、血脂异常"
        />
      </div>
      <div className="form-group">
        <label>备注（选填）</label>
        <textarea
          value={note} onChange={e => setNote(e.target.value)}
          placeholder="其他备注信息..."
          rows={3}
        />
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
        <button className="btn-outline" style={{ flex: 1 }} onClick={onCancel}>取消</button>
        <button className="btn-primary" style={{ flex: 1 }} onClick={handleSubmit}>保存</button>
      </div>
    </div>
  );
}

// 暴露到全局
Object.assign(window, {
  MedicationCalendarPage,
  AbnormalAlertsPage,
  ComorbidityPage,
  CheckupPage,
  AddCheckupRecordForm,
});