import {useEffect, useState} from "react";
import {View, Text} from '@tarojs/components'
import {Button, Cell, CellGroup, Loading, Space, Tag} from '@nutui/nutui-react-taro'
import Taro, {useRouter} from '@tarojs/taro'
import {ClinicPrescription} from "@/api/clinic/clinicPrescription/model";
import {getClinicPrescription} from "@/api/clinic/clinicPrescription";
import {copyText} from "@/utils/common";
import './detail.scss'

const statusMap: Record<number, string> = {
  0: '待开方',
  1: '已完成',
  2: '已支付',
  3: '已取消'
}

const PrescriptionDetail = () => {
  const {params} = useRouter()
  const [detail, setDetail] = useState<ClinicPrescription>()
  const [loading, setLoading] = useState<boolean>(false)

  const loadDetail = async () => {
    if (!params.id) return
    try {
      setLoading(true)
      const data = await getClinicPrescription(Number(params.id))
      setDetail(data)
    } catch (error) {
      Taro.showToast({
        title: '加载详情失败',
        icon: 'error'
      })
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadDetail()
  }, [params.id])

  const getPatientDesc = () => {
    if (!detail) return ''
    const sexText = detail.sex === 0 ? '男' : detail.sex === 1 ? '女' : ''
    const ageText = detail.age ? `${detail.age}岁` : ''
    return [detail.realName, sexText, ageText].filter(Boolean).join(' ')
  }

  if (loading || !detail) {
    return (
      <View className="flex items-center justify-center h-full py-10">
        <Loading>加载中...</Loading>
      </View>
    )
  }

  const medicines = detail.items || []
  // const shopOrder: any = (detail as any).shopOrder

  return (
    <View className="prescription-detail-page">
      <View className="detail-header-card">
        <View>
          <Text className="detail-header-card__time">{detail.createTime || ''}</Text>
          <View className="text-gray-500 mt-1" style={{fontSize: '25rpx'}}>开方</View>
        </View>
        <Text className="text-gray-700" style={{fontSize: '25rpx'}}>{detail.doctorName || ''}</Text>
      </View>

      {/*<View className="detail-card">*/}
      {/*  <Text className="detail-card__title">处方状态</Text>*/}
      {/*  <Text className="detail-status">{statusMap[detail.status || 0] || '待处理'}</Text>*/}
      {/*  {shopOrder?.address && (*/}
      {/*    <Text className="detail-address">*/}
      {/*      {shopOrder.address}*/}
      {/*    </Text>*/}
      {/*  )}*/}
      {/*  <View className="detail-action-row">*/}
      {/*    <Button size="small" plain type="primary" onClick={() => Taro.showToast({title: '敬请期待', icon: 'none'})}>*/}
      {/*      查看物流*/}
      {/*    </Button>*/}
      {/*    <Button size="small" plain type="success" onClick={() => Taro.showToast({title: '已复制开方信息', icon: 'none'})}>*/}
      {/*      复诊开方*/}
      {/*    </Button>*/}
      {/*  </View>*/}
      {/*</View>*/}

      <View className="detail-card">
        <View className="detail-row" style={{fontSize: '25rpx'}}>
          <Text>药方编号</Text>
          <Space>
            <Text className="text-gray-700" style={{fontSize: '25rpx'}}>{detail.orderNo || '-'}</Text>
            {detail.orderNo && (
              <Text className="text-green-600" style={{fontSize: '25rpx'}} onClick={() => copyText(detail.orderNo || '')}>复制</Text>
            )}
          </Space>
        </View>
      </View>

      <View className="detail-card">
        <Text className="detail-section-title">患者信息</Text>
        <View className="detail-row">
          <Text className="detail-cell-text" style={{fontSize: '25rpx'}}>{getPatientDesc()}</Text>
          <Text className="text-green-600" style={{fontSize: '25rpx'}} onClick={() => Taro.showToast({title: '患者档案敬请期待', icon: 'none'})}>
            患者档案
          </Text>
        </View>
        {detail.diagnosis && (
          <View className="detail-row">
            <Text className="detail-cell-text" style={{fontSize: '25rpx'}}>诊断：{detail.diagnosis}</Text>
            <Text className="text-green-600" style={{fontSize: '25rpx'}} onClick={() => Taro.showToast({title: '诊断详情敬请期待', icon: 'none'})}>
              查看详情
            </Text>
          </View>
        )}
        {detail.treatmentPlan && (
          <Text className="detail-cell-text mt-2" style={{fontSize: '25rpx'}}>治疗方案：{detail.treatmentPlan}</Text>
        )}
        {detail.decoctionInstructions && (
          <Text className="detail-cell-text mt-2" style={{fontSize: '25rpx'}}>用药说明：{detail.decoctionInstructions}</Text>
        )}
      </View>

      <View className="detail-card">
        <View className="flex justify-between mb-2">
          <Text className="detail-section-title">药方信息</Text>
          <Text className="text-green-600" style={{fontSize: '25rpx'}} onClick={() => Taro.showToast({title: '已设为常用', icon: 'success'})}>存为常用方</Text>
        </View>
        <View className="detail-medicine-list">
          {medicines.length === 0 && (
            <Text className="text-gray-400" style={{fontSize: '25rpx'}}>暂无药材信息</Text>
          )}
          {medicines.map((item, index) => (
            <View key={index} className="detail-medicine-chip">
              {item.medicineName} {item.quantity || item.dosage || ''}
            </View>
          ))}
        </View>
      </View>

      <CellGroup>
        <Cell title="剂数" extra={`${medicines.length} 味药`} titleStyle={{fontSize: '25rpx'}} descriptionStyle={{fontSize: '25rpx'}}/>
        <Cell title="服用方式" extra={detail.decoctionInstructions || '遵医嘱'} titleStyle={{fontSize: '25rpx'}} descriptionStyle={{fontSize: '25rpx'}}/>
        <Cell title="订单备注" extra={detail.comments || '无'} titleStyle={{fontSize: '25rpx'}} descriptionStyle={{fontSize: '25rpx'}}/>
        <Cell
          title="合计"
          extra={(
            <Space>
              <Text className="text-red-500 font-semibold">¥{detail.orderPrice || '0.00'}</Text>
              <Text className="text-green-600" style={{fontSize: '25rpx'}} onClick={() => Taro.showToast({title: '暂无明细', icon: 'none'})}>价格明细</Text>
            </Space>
          )}
        />
      </CellGroup>
    </View>
  )
}

export default PrescriptionDetail;
