// 慢病档案页 - 全栈版本
function DiseasePage({ navigate, goBack }) {
  const { state, dispatch, showToast } = React.useContext(AppContext);
  const { diseases } = state;

  const [sheetVisible, setSheetVisible] = React.useState(false);
  const [editingId, setEditingId] = React.useState(null);
  const [selectedDiseases, setSelectedDiseases] = React.useState([]);
  const [customDisease, setCustomDisease] = React.useState('');
  const [diagnoseDate, setDiagnoseDate] = React.useState('');
  const [saving, setSaving] = React.useState(false);

  const openAddSheet = () => {
    setEditingId(null);
    setSelectedDiseases([]);
    setCustomDisease('');
    setDiagnoseDate('');
    setSheetVisible(true);
  };

  const openEditSheet = (disease) => {
    setEditingId(disease.id);
    setSelectedDiseases([disease.name]);
    setCustomDisease('');
    setDiagnoseDate(disease.diagnoseDate);
    setSheetVisible(true);
  };

  const toggleDisease = (name) => {
    if (editingId) {
      setSelectedDiseases([name]);
      return;
    }
    setSelectedDiseases(prev =>
      prev.includes(name)
        ? prev.filter(d => d !== name)
        : [...prev, name]
    );
  };

  const handleSave = async () => {
    if (saving) return;

    const allDiseases = [...selectedDiseases];
    if (customDisease.trim()) {
      allDiseases.push(customDisease.trim());
    }

    if (allDiseases.length === 0) {
      showToast('请选择或输入疾病名称');
      return;
    }

    setSaving(true);
    try {
      if (editingId) {
        const name = allDiseases[0];
        const updated = await api.updateDisease(editingId, {
          name,
          diagnoseDate: diagnoseDate || '未记录',
        });
        dispatch({
          type: 'UPDATE_DISEASE_LOCAL',
          payload: { id: editingId, data: updated }
        });
        showToast('已更新');
      } else {
        // 批量添加
        let added = 0;
        for (const name of allDiseases) {
          try {
            const newItem = await api.addDisease({
              name,
              diagnoseDate: diagnoseDate || '未记录',
            });
            dispatch({ type: 'ADD_DISEASE_LOCAL', payload: newItem });
            added++;
          } catch (e) {
            // 重复录入的跳过
            if (!e.message.includes('已录入')) {
              showToast(`${name}：${e.message}`);
            }
          }
        }
        showToast(`已添加${added}种慢病`);
      }
      setSheetVisible(false);
    } catch (err) {
      showToast(err.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('确定要删除这条慢病记录吗？')) return;
    try {
      await api.deleteDisease(id);
      dispatch({ type: 'DELETE_DISEASE_LOCAL', payload: id });
      showToast('已删除');
    } catch (err) {
      showToast(err.message);
    }
  };

  const cciScore = calculateCCIScore(diseases);

  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: '18px 20px',
          color: '#fff',
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 13, opacity: 0.85 }}>已录入慢病</div>
            <div style={{ fontSize: 32, fontWeight: 700, marginTop: 2 }}>
              {diseases.length}<span style={{ fontSize: 14, fontWeight: 400, marginLeft: 4 }}>种</span>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 13, opacity: 0.85 }}>CCI指数</div>
            <div style={{ fontSize: 28, fontWeight: 700, marginTop: 2 }}>{cciScore}</div>
          </div>
        </div>

        {/* 慢病列表 */}
        <div className="card">
          <div className="card-title">
            <span>我的慢病</span>
          </div>
          {diseases.length === 0 ? (
            <div className="empty-state">
              <div className="empty-state-icon">📋</div>
              <div className="empty-state-text">还没有录入慢病信息</div>
            </div>
          ) : (
            diseases.map(d => (
              <div key={d.id} style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                padding: '14px 0',
                borderBottom: diseases.indexOf(d) < diseases.length - 1 ? '1px solid #f0ebe0' : 'none',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: '#fef0ee',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon.Heart color="#d85a4a" size={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: '#2c3e3a' }}>
                    {d.name}
                  </div>
                  <div style={{ fontSize: 12, color: '#a3a89f', marginTop: 3 }}>
                    确诊时间：{d.diagnoseDate}
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                  <span className="chip chip-info">CCI +{d.cciScore}</span>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button
                      className="btn btn-secondary btn-sm"
                      style={{ padding: '4px 10px' }}
                      onClick={() => openEditSheet(d)}
                    >
                      <Icon.Edit size={14} />
                    </button>
                    <button
                      className="btn btn-danger btn-sm"
                      style={{ padding: '4px 10px' }}
                      onClick={() => handleDelete(d.id)}
                    >
                      <Icon.Trash size={14} />
                    </button>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {/* 查看CCI指数按钮 */}
        <div
          style={{
            background: '#fff',
            borderRadius: 14,
            padding: '14px 18px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginBottom: 14,
            cursor: 'pointer',
            boxShadow: '0 2px 12px rgba(44,62,58,0.05)',
          }}
          onClick={() => navigate('cci')}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icon.Info color="#3a8f7a" size={20} />
            <span style={{ fontSize: 14, color: '#2c3e3a', fontWeight: 500 }}>
              查看CCI共病指数详情
            </span>
          </div>
          <Icon.Chevron color="#b5b9b2" />
        </div>
      </div>

      {/* 浮动添加按钮 */}
      <button className="fab" onClick={openAddSheet}>
        <Icon.Plus color="#fff" size={26} />
      </button>

      {/* 新增/编辑 弹层 */}
      <BottomSheet
        visible={sheetVisible}
        title={editingId ? '编辑慢病' : '新增慢病'}
        onClose={() => setSheetVisible(false)}
      >
        <p style={{ fontSize: 13, color: '#8a9390', marginBottom: 14 }}>
          {editingId ? '修改疾病信息' : '选择您已确诊的慢性病，可多选'}
        </p>

        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 8,
          marginBottom: 18,
        }}>
          {COMMON_DISEASES.map(d => (
            <button
              key={d}
              style={{
                padding: '7px 14px',
                borderRadius: 20,
                fontSize: 13,
                border: `1.5px solid ${selectedDiseases.includes(d) ? '#3a8f7a' : '#ebe8e0'}`,
                background: selectedDiseases.includes(d) ? '#eef5f2' : '#fff',
                color: selectedDiseases.includes(d) ? '#3a8f7a' : '#5a6e69',
                fontWeight: selectedDiseases.includes(d) ? 500 : 400,
                transition: 'all 0.15s',
              }}
              onClick={() => toggleDisease(d)}
            >
              {d}
            </button>
          ))}
        </div>

        <div className="form-group">
          <label className="form-label">其他疾病（选填）</label>
          <input
            className="form-input"
            type="text"
            placeholder="请输入疾病名称"
            value={customDisease}
            onChange={e => setCustomDisease(e.target.value)}
          />
        </div>

        <div className="form-group">
          <label className="form-label">确诊时间</label>
          <input
            className="form-input"
            type="date"
            value={diagnoseDate}
            onChange={e => setDiagnoseDate(e.target.value)}
          />
          <div className="form-hint">如不确定可留空</div>
        </div>

        <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
          {saving ? '保存中...' : (editingId ? '保存修改' : '确认添加')}
        </button>

        <p style={{
          fontSize: 11,
          color: '#b5b9b2',
          textAlign: 'center',
          marginTop: 14,
        }}>
          本工具仅供档案管理，不做诊断依据
        </p>
      </BottomSheet>
    </div>
  );
}