import { useState, useEffect } from 'react';
import { View, Text, Input } from '@tarojs/components';
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
import { useHealthStore } from '../../stores/health';
import { useAuthStore } from '../../stores/auth';
import { useElderClass } from '../../hooks/useElderClass';
import { inputVitalSign, getTrend, getHealthThresholds, findThreshold, DEFAULT_THRESHOLDS, type HealthThreshold } from '../../services/health';
import { listPendingSuggestions, type AiSuggestionItem } from '../../services/ai-analysis';
import Loading from '../../components/Loading';
import GuestGuard from '../../components/GuestGuard';
import './index.scss';

type VitalType = 'blood_pressure' | 'heart_rate' | 'blood_sugar' | 'weight';

const VITAL_TABS: { key: VitalType; label: string }[] = [
  { key: 'blood_pressure', label: '血压' },
  { key: 'heart_rate', label: '心率' },
  { key: 'blood_sugar', label: '血糖' },
  { key: 'weight', label: '体重' },
];

/** 根据阈值列表构建参考范围文案 */
function buildRefRange(t: HealthThreshold[]): Record<VitalType, string> {
  const bpSys = findThreshold(t, 'systolic_bp', 'high')?.threshold_value ?? 140;
  const bpDia = findThreshold(t, 'diastolic_bp', 'high')?.threshold_value ?? 90;
  const hrHigh = findThreshold(t, 'heart_rate', 'high')?.threshold_value ?? 100;
  const hrLow = findThreshold(t, 'heart_rate', 'low')?.threshold_value ?? 60;
  const bsFasting = findThreshold(t, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
  const bsPp = findThreshold(t, 'blood_sugar_postprandial', 'high')?.threshold_value ?? 7.8;
  return {
    blood_pressure: `收缩压 90-${bpSys} / 舒张压 60-${bpDia} mmHg`,
    heart_rate: `${hrLow}-${hrHigh} bpm`,
    blood_sugar: `空腹 3.9-${bsFasting} / 餐后 <${bsPp} mmol/L`,
    weight: '根据 BMI 18.5-24 计算',
  };
}

interface TrendPoint {
  date: string;
  value: number;
}

export default function Health() {
  const { todaySummary, loading, refreshToday, getTrend: fetchTrend } = useHealthStore();
  const { user, currentPatient } = useAuthStore();
  const modeClass = useElderClass();
  const [activeTab, setActiveTab] = useState<VitalType>('blood_pressure');
  const [systolic, setSystolic] = useState('');
  const [diastolic, setDiastolic] = useState('');
  const [heartRateVal, setHeartRateVal] = useState('');
  const [sugarVal, setSugarVal] = useState('');
  const [sugarPeriod, setSugarPeriod] = useState<'fasting' | 'postprandial'>('fasting');
  const [weightVal, setWeightVal] = useState('');
  const [saving, setSaving] = useState(false);
  const [trendData, setTrendData] = useState<TrendPoint[]>([]);
  const [trendLoading, setTrendLoading] = useState(false);
  const [aiSuggestions, setAiSuggestions] = useState<AiSuggestionItem[]>([]);
  const [thresholds, setThresholds] = useState<HealthThreshold[]>(DEFAULT_THRESHOLDS);

  useDidShow(() => {
    if (!user) return;
    refreshToday();
    loadTrend(activeTab);
    loadAiSuggestions();
    getHealthThresholds().then((t) => { if (t.length > 0) setThresholds(t); });
  });

  usePullDownRefresh(() => {
    if (!user) return;
    Promise.all([refreshToday(true), loadTrend(activeTab), loadAiSuggestions()]).finally(() => {
      Taro.stopPullDownRefresh();
    });
  });

  if (!user) {
    return <GuestGuard title='请先登录' desc='登录后即可记录和查看健康数据' />;
  }

  const loadAiSuggestions = async () => {
    try {
      const items = await listPendingSuggestions();
      setAiSuggestions(items.slice(0, 3));
    } catch {
      setAiSuggestions([]);
    }
  };

  const loadTrend = async (type: VitalType) => {
    setTrendLoading(true);
    try {
      const indicatorMap: Record<VitalType, string> = {
        blood_pressure: 'systolic_bp_morning',
        heart_rate: 'heart_rate',
        blood_sugar: 'blood_sugar',
        weight: 'weight',
      };
      const points = await fetchTrend(indicatorMap[type], '7d');
      setTrendData(points);
    } catch {
      setTrendData([]);
    } finally {
      setTrendLoading(false);
    }
  };

  const handleTabChange = (tab: VitalType) => {
    setActiveTab(tab);
    loadTrend(tab);
  };

  const getWarnStatus = (type: VitalType): string | null => {
    if (type === 'blood_pressure') {
      const sys = parseFloat(systolic);
      const dia = parseFloat(diastolic);
      const sysMax = findThreshold(thresholds, 'systolic_bp', 'high')?.threshold_value ?? 140;
      const diaMax = findThreshold(thresholds, 'diastolic_bp', 'high')?.threshold_value ?? 90;
      if (sys > sysMax || dia > diaMax) return '血压偏高，确认提交？';
    } else if (type === 'heart_rate') {
      const val = parseFloat(heartRateVal);
      const hrHigh = findThreshold(thresholds, 'heart_rate', 'high')?.threshold_value ?? 100;
      const hrLow = findThreshold(thresholds, 'heart_rate', 'low')?.threshold_value ?? 60;
      if (val > hrHigh || val < hrLow) return '心率异常，确认提交？';
    } else if (type === 'blood_sugar') {
      const val = parseFloat(sugarVal);
      if (sugarPeriod === 'fasting') {
        const bsMax = findThreshold(thresholds, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
        if (val > bsMax) return '血糖偏高，确认提交？';
      } else {
        const bsMax = findThreshold(thresholds, 'blood_sugar_postprandial', 'high')?.threshold_value ?? 7.8;
        if (val > bsMax) return '血糖偏高，确认提交？';
      }
    }
    return null;
  };

  const refRanges = buildRefRange(thresholds);

  const handleSave = async () => {
    const patientId = currentPatient?.id;
    if (!patientId) {
      Taro.showToast({ title: '请先登录', icon: 'none' });
      return;
    }

    const warnMsg = getWarnStatus(activeTab);
    if (warnMsg) {
      const { confirm } = await Taro.showModal({
        title: '异常提示',
        content: warnMsg,
        confirmText: '确认提交',
        cancelText: '再看看',
      });
      if (!confirm) return;
    }

    setSaving(true);
    try {
      switch (activeTab) {
        case 'blood_pressure': {
          const sys = parseFloat(systolic);
          const dia = parseFloat(diastolic);
          if (!sys || !dia) { Taro.showToast({ title: '请填写完整', icon: 'none' }); return; }
          await inputVitalSign(patientId, {
            indicator_type: 'blood_pressure',
            value: sys,
            extra: { systolic: sys, diastolic: dia },
          });
          setSystolic('');
          setDiastolic('');
          break;
        }
        case 'heart_rate': {
          const val = parseFloat(heartRateVal);
          if (!val) { Taro.showToast({ title: '请填写心率', icon: 'none' }); return; }
          await inputVitalSign(patientId, { indicator_type: 'heart_rate', value: val });
          setHeartRateVal('');
          break;
        }
        case 'blood_sugar': {
          const val = parseFloat(sugarVal);
          if (!val) { Taro.showToast({ title: '请填写血糖值', icon: 'none' }); return; }
          const bsType = sugarPeriod === 'fasting' ? 'blood_sugar_fasting' : 'blood_sugar_postprandial';
          await inputVitalSign(patientId, { indicator_type: bsType, value: val });
          setSugarVal('');
          break;
        }
        case 'weight': {
          const val = parseFloat(weightVal);
          if (!val) { Taro.showToast({ title: '请填写体重', icon: 'none' }); return; }
          await inputVitalSign(patientId, { indicator_type: 'weight', value: val });
          setWeightVal('');
          break;
        }
      }
      Taro.showToast({ title: '保存成功', icon: 'success' });
      refreshToday(true);
      loadTrend(activeTab);
    } catch {
      Taro.showToast({ title: '保存失败', icon: 'none' });
    } finally {
      setSaving(false);
    }
  };

  const maxTrendValue = Math.max(...trendData.map((d) => d.value), 1);

  const getThresholdValue = (type: VitalType, th: HealthThreshold[]): number | null => {
    if (type === 'blood_pressure') return findThreshold(th, 'systolic_bp', 'high')?.threshold_value ?? 140;
    if (type === 'heart_rate') return findThreshold(th, 'heart_rate', 'high')?.threshold_value ?? 100;
    if (type === 'blood_sugar') return findThreshold(th, 'blood_sugar_fasting', 'high')?.threshold_value ?? 6.1;
    return null;
  };
  const dayLabels = ['日', '一', '二', '三', '四', '五', '六'];

  return (
    <View className={`health-page ${modeClass}`}>
      {/* 页头 */}
      <View className='health-header'>
        <Text className='health-title'>健康数据</Text>
      </View>

      {/* AI 建议卡片 */}
      {aiSuggestions.length > 0 && (
        <View className='ai-suggestion-card' onClick={() => {
          const first = aiSuggestions[0];
          if (first?.suggestion_type === 'appointment') {
            Taro.navigateTo({ url: `/pages/appointment/create/index` });
          } else if (first?.suggestion_type === 'followup') {
            Taro.navigateTo({ url: '/pages/pkg-profile/followups/index' });
          } else {
            Taro.navigateTo({ url: '/pages/health/index' });
          }
        }}>
          <View className='ai-card-header'>
            <Text className='ai-card-title'>AI 健康建议</Text>
            <Text className='ai-card-count'>{aiSuggestions.length} 条待查看</Text>
          </View>
          {aiSuggestions.map((s) => {
            const riskCls = s.risk_level === 'high' ? 'ai-risk-high' : s.risk_level === 'medium' ? 'ai-risk-medium' : 'ai-risk-low';
            const typeLabel = s.suggestion_type === 'followup' ? '随访' : s.suggestion_type === 'appointment' ? '预约' : '预警';
            const params = s.params as Record<string, unknown> | null;
            const reason = (params?.reason as string) || (params?.message as string) || typeLabel;
            return (
              <View key={s.id} className='ai-suggestion-item'>
                <View className={`ai-risk-dot ${riskCls}`} />
                <Text className='ai-suggestion-text'>{reason.slice(0, 40)}</Text>
              </View>
            );
          })}
        </View>
      )}

      {/* 类型 Tab */}
      <View className='vital-tabs'>
        {VITAL_TABS.map((tab) => {
          const hasData = tab.key === 'blood_pressure' ? !!todaySummary?.blood_pressure
            : tab.key === 'heart_rate' ? !!todaySummary?.heart_rate
            : tab.key === 'blood_sugar' ? !!todaySummary?.blood_sugar
            : !!todaySummary?.weight;
          return (
            <View
              key={tab.key}
              className={`vital-tab ${activeTab === tab.key ? 'vital-tab-active' : ''}`}
              onClick={() => handleTabChange(tab.key)}
            >
              <Text className='vital-tab-text'>{tab.label}</Text>
              {!hasData && <View className='vital-tab-dot' />}
            </View>
          );
        })}
      </View>

      {/* 录入区 */}
      <View className='input-section'>
        {activeTab === 'blood_pressure' && (
          <View className='input-group'>
            <Text className='input-label'>收缩压（高压）</Text>
            <Input
              className='input-field'
              type='number'
              placeholder='如 130'
              value={systolic}
              onInput={(e) => setSystolic(e.detail.value)}
            />
            <Text className='input-label input-label--secondary'>舒张压（低压）</Text>
            <Input
              className='input-field'
              type='number'
              placeholder='如 85'
              value={diastolic}
              onInput={(e) => setDiastolic(e.detail.value)}
            />
            <Text className='input-ref'>{refRanges.blood_pressure}</Text>
          </View>
        )}

        {activeTab === 'heart_rate' && (
          <View className='input-group'>
            <Text className='input-label'>心率</Text>
            <Input
              className='input-field'
              type='digit'
              placeholder='如 72'
              value={heartRateVal}
              onInput={(e) => setHeartRateVal(e.detail.value)}
            />
            <Text className='input-ref'>{refRanges.heart_rate}</Text>
          </View>
        )}

        {activeTab === 'blood_sugar' && (
          <View className='input-group'>
            <Text className='input-label'>血糖值</Text>
            <Input
              className='input-field'
              type='digit'
              placeholder='如 5.6'
              value={sugarVal}
              onInput={(e) => setSugarVal(e.detail.value)}
            />
            <View className='period-group'>
              <View
                className={`period-btn ${sugarPeriod === 'fasting' ? 'period-active' : ''}`}
                onClick={() => setSugarPeriod('fasting')}
              >
                <Text className='period-btn-text'>空腹</Text>
              </View>
              <View
                className={`period-btn ${sugarPeriod === 'postprandial' ? 'period-active' : ''}`}
                onClick={() => setSugarPeriod('postprandial')}
              >
                <Text className='period-btn-text'>餐后 2h</Text>
              </View>
            </View>
            <Text className='input-ref'>{refRanges.blood_sugar}</Text>
          </View>
        )}

        {activeTab === 'weight' && (
          <View className='input-group'>
            <Text className='input-label'>体重 (kg)</Text>
            <Input
              className='input-field'
              type='digit'
              placeholder='如 65.5'
              value={weightVal}
              onInput={(e) => setWeightVal(e.detail.value)}
            />
            <Text className='input-ref'>{refRanges.weight}</Text>
          </View>
        )}

        <View className='save-btn' onClick={handleSave}>
          <Text className='save-btn-text'>{saving ? '保存中...' : '保存'}</Text>
        </View>
      </View>

      {/* 趋势图 */}
      <View className='trend-section'>
        <Text className='section-title'>近 7 天趋势</Text>
        {trendLoading ? (
          <Loading />
        ) : trendData.length === 0 ? (
          <View className='trend-empty'>
            <Text className='trend-empty-text'>暂无趋势数据</Text>
          </View>
        ) : (
          <View className='trend-chart'>
            <View className='trend-bars'>
              {/* 阈值标线 */}
              {getThresholdValue(activeTab, thresholds) && (() => {
                const tv = getThresholdValue(activeTab, thresholds)!;
                const pct = Math.min(95, (tv / maxTrendValue) * 100);
                return (
                  <View className='trend-threshold-line' style={`bottom:${((12 + pct * 1.08) / 120 * 100).toFixed(1)}%;`}>
                    <Text className='trend-threshold-label'>{tv}</Text>
                  </View>
                );
              })()}
              {trendData.map((point, i) => {
                const heightPct = Math.max(8, (point.value / maxTrendValue) * 100);
                const tv = getThresholdValue(activeTab, thresholds);
                const isAbnormal = tv ? point.value >= tv : false;
                const dayOfWeek = new Date(point.date).getDay();
                return (
                  <View className='trend-bar-col' key={i}>
                    <View
                      className={`trend-bar ${isAbnormal ? 'trend-bar-warn' : 'trend-bar-normal'}`}
                      style={`height:${heightPct}%;`}
                    />
                    <Text className='trend-bar-label'>{dayLabels[dayOfWeek]}</Text>
                  </View>
                );
              })}
            </View>
          </View>
        )}
      </View>

      {/* BLE 设备同步功能暂缓开放 */}

      {/* 健康资讯入口 */}
      <View
        className='article-entry'
        onClick={() => Taro.navigateTo({ url: '/pages/article/index' })}
      >
        <Text className='article-entry-text'>最新健康资讯 ›</Text>
      </View>
    </View>
  );
}