import { useState } from 'react';
import { View, Text, Input, Textarea, Picker, ScrollView } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import * as doctorApi from '@/services/doctor';
import Loading from '@/components/Loading';
import './index.scss';

interface FormState {
  dialyzer_model: string;
  membrane_area: string;
  dialysate_potassium: string;
  dialysate_calcium: string;
  dialysate_bicarbonate: string;
  anticoagulation_type: string;
  anticoagulation_dose: string;
  target_ultrafiltration_ml: string;
  target_dry_weight: string;
  blood_flow_rate: string;
  dialysate_flow_rate: string;
  frequency_per_week: string;
  duration_minutes: string;
  vascular_access_type: string;
  vascular_access_location: string;
  effective_from: string;
  effective_to: string;
  notes: string;
}

const initialForm: FormState = {
  dialyzer_model: '',
  membrane_area: '',
  dialysate_potassium: '',
  dialysate_calcium: '',
  dialysate_bicarbonate: '',
  anticoagulation_type: '',
  anticoagulation_dose: '',
  target_ultrafiltration_ml: '',
  target_dry_weight: '',
  blood_flow_rate: '',
  dialysate_flow_rate: '',
  frequency_per_week: '',
  duration_minutes: '',
  vascular_access_type: '',
  vascular_access_location: '',
  effective_from: '',
  effective_to: '',
  notes: '',
};

export default function PrescriptionCreate() {
  const router = useRouter();
  const patientId = router.params.patientId || '';
  const [form, setForm] = useState<FormState>(initialForm);
  const [submitting, setSubmitting] = useState(false);

  const updateField = (key: keyof FormState, value: string) => {
    setForm((prev) => ({ ...prev, [key]: value }));
  };

  const handleSubmit = async () => {
    if (!patientId) {
      Taro.showToast({ title: '缺少患者信息', icon: 'none' });
      return;
    }

    setSubmitting(true);
    const num = (v: string) => v ? Number(v) : undefined;
    const payload = {
      patient_id: patientId,
      dialyzer_model: form.dialyzer_model || undefined,
      membrane_area: num(form.membrane_area),
      dialysate_potassium: num(form.dialysate_potassium),
      dialysate_calcium: num(form.dialysate_calcium),
      dialysate_bicarbonate: num(form.dialysate_bicarbonate),
      anticoagulation_type: form.anticoagulation_type || undefined,
      anticoagulation_dose: form.anticoagulation_dose || undefined,
      target_ultrafiltration_ml: num(form.target_ultrafiltration_ml),
      target_dry_weight: num(form.target_dry_weight),
      blood_flow_rate: num(form.blood_flow_rate),
      dialysate_flow_rate: num(form.dialysate_flow_rate),
      frequency_per_week: num(form.frequency_per_week),
      duration_minutes: num(form.duration_minutes),
      vascular_access_type: form.vascular_access_type || undefined,
      vascular_access_location: form.vascular_access_location || undefined,
      effective_from: form.effective_from || undefined,
      effective_to: form.effective_to || undefined,
      notes: form.notes || undefined,
    };

    try {
      await doctorApi.createDialysisPrescription(payload);
      Taro.showToast({ title: '创建成功', icon: 'success' });
      setTimeout(() => Taro.navigateBack(), 1000);
    } catch {
      Taro.showToast({ title: '创建失败', icon: 'none' });
    } finally {
      setSubmitting(false);
    }
  };

  const InputField = ({ label, field, placeholder, type = 'digit' }: {
    label: string; field: keyof FormState; placeholder: string; type?: string;
  }) => (
    <View className='form-row'>
      <Text className='form-label'>{label}</Text>
      <Input
        className='form-input'
        type={type as any}
        placeholder={placeholder}
        value={form[field]}
        onInput={(e) => updateField(field, e.detail.value)}
      />
    </View>
  );

  return (
    <ScrollView scrollY className='create-page'>
      {/* 透析器 */}
      <View className='section'>
        <Text className='section-title'>透析器</Text>
        <InputField label='透析器型号' field='dialyzer_model' placeholder='请输入型号' type='text' />
        <InputField label='膜面积' field='membrane_area' placeholder='m²' />
      </View>

      {/* 透析液 */}
      <View className='section'>
        <Text className='section-title'>透析液配比</Text>
        <InputField label='钾浓度' field='dialysate_potassium' placeholder='mmol/L' />
        <InputField label='钙浓度' field='dialysate_calcium' placeholder='mmol/L' />
        <InputField label='碳酸氢盐' field='dialysate_bicarbonate' placeholder='mmol/L' />
      </View>

      {/* 抗凝 */}
      <View className='section'>
        <Text className='section-title'>抗凝方案</Text>
        <InputField label='抗凝类型' field='anticoagulation_type' placeholder='请输入' type='text' />
        <InputField label='抗凝剂量' field='anticoagulation_dose' placeholder='请输入' type='text' />
      </View>

      {/* 参数 */}
      <View className='section'>
        <Text className='section-title'>参数设置</Text>
        <InputField label='目标超滤量' field='target_ultrafiltration_ml' placeholder='ml' type='number' />
        <InputField label='目标干体重' field='target_dry_weight' placeholder='kg' />
        <InputField label='血流速' field='blood_flow_rate' placeholder='ml/min' type='number' />
        <InputField label='透析液流量' field='dialysate_flow_rate' placeholder='ml/min' type='number' />
        <InputField label='每周频次' field='frequency_per_week' placeholder='次/周' type='number' />
        <InputField label='每次时长' field='duration_minutes' placeholder='分钟' type='number' />
      </View>

      {/* 血管通路 */}
      <View className='section'>
        <Text className='section-title'>血管通路</Text>
        <InputField label='通路类型' field='vascular_access_type' placeholder='请输入' type='text' />
        <InputField label='通路位置' field='vascular_access_location' placeholder='请输入' type='text' />
      </View>

      {/* 生效日期 */}
      <View className='section'>
        <Text className='section-title'>生效日期</Text>
        <View className='form-row'>
          <Text className='form-label'>生效日期</Text>
          <Picker mode='date' value={form.effective_from} onChange={(e) => updateField('effective_from', e.detail.value)}>
            <Text className={`form-value ${!form.effective_from ? 'placeholder' : ''}`}>
              {form.effective_from || '请选择'}
            </Text>
          </Picker>
        </View>
        <View className='form-row'>
          <Text className='form-label'>失效日期</Text>
          <Picker mode='date' value={form.effective_to} onChange={(e) => updateField('effective_to', e.detail.value)}>
            <Text className={`form-value ${!form.effective_to ? 'placeholder' : ''}`}>
              {form.effective_to || '请选择'}
            </Text>
          </Picker>
        </View>
      </View>

      {/* 备注 */}
      <View className='section'>
        <Text className='section-title'>备注</Text>
        <Textarea
          className='form-textarea'
          placeholder='请输入备注...'
          value={form.notes}
          onInput={(e) => updateField('notes', e.detail.value)}
          maxlength={500}
        />
      </View>

      <View className={`submit-btn ${submitting ? 'submit-btn--disabled' : ''}`} onClick={handleSubmit}>
        <Text className='submit-btn__text'>{submitting ? '提交中...' : '创建处方'}</Text>
      </View>
    </ScrollView>
  );
}