import { View, ScrollView, Text } from '@tarojs/components'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { deliveryAddressClient } from '@/api'
import { InferResponseType, InferRequestType } from 'hono'
import { Navbar } from '@/components/ui/navbar'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { useAuth } from '@/utils/auth'
import { CitySelector } from '@/components/ui/city-selector'

type Address = InferResponseType<typeof deliveryAddressClient[':id']['$get'], 200>
type CreateAddressRequest = InferRequestType<typeof deliveryAddressClient.$post>['json']
type UpdateAddressRequest = InferRequestType<typeof deliveryAddressClient[':id']['$put']>['json']

const addressSchema = z.object({
  name: z.string().min(1, '请输入收货人姓名'),
  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的手机号'),
  province: z.number().positive('请选择省份'),
  city: z.number().positive('请选择城市'),
  district: z.number().positive('请选择区县'),
  address: z.string().min(1, '请输入详细地址'),
  isDefault: z.boolean().optional()
})

type AddressFormData = z.infer<typeof addressSchema>

export default function AddressEditPage() {
  const { user } = useAuth()
  const queryClient = useQueryClient()
  const [addressId, setAddressId] = useState<number | null>(null)

  // 获取地址ID
  useEffect(() => {
    const params = Taro.getCurrentInstance().router?.params
    if (params?.id) {
      setAddressId(parseInt(params.id))
    }
  }, [])

  // 获取地址详情
  const { data: address } = useQuery({
    queryKey: ['address', addressId],
    queryFn: async () => {
      if (!addressId) return null
      const response = await deliveryAddressClient[':id'].$get({
        param: { id: addressId }
      })
      if (response.status !== 200) {
        throw new Error('获取地址失败')
      }
      return response.json()
    },
    enabled: !!addressId,
  })

  // 表单设置
  const form = useForm<AddressFormData>({
    resolver: zodResolver(addressSchema),
    defaultValues: {
      name: '',
      phone: '',
      province: 0,
      city: 0,
      district: 0,
      address: '',
      isDefault: false
    }
  })

  // 填充表单数据
  useEffect(() => {
    if (address) {
      form.reset({
        name: address.name,
        phone: address.phone,
        province: address.receiverProvince,
        city: address.receiverCity,
        district: address.receiverDistrict,
        address: address.address,
        isDefault: address.isDefault === 1
      })
    }
  }, [address, form])

  // 创建/更新地址
  const saveAddressMutation = useMutation({
    mutationFn: async (data: AddressFormData) => {
      const addressData: any = {
        name: data.name,
        phone: data.phone,
        receiverProvince: data.province,
        receiverCity: data.city,
        receiverDistrict: data.district,
        address: data.address,
        userId: user?.id,
        isDefault: data.isDefault ? 1 : 0
      }

      let response
      if (addressId) {
        response = await deliveryAddressClient[':id']['$put']({
          param: { id: addressId },
          json: addressData
        })
      } else {
        response = await deliveryAddressClient.$post({ json: addressData })
      }

      if (response.status !== 200 && response.status !== 201) {
        throw new Error('保存地址失败')
      }
      return response.json()
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['delivery-addresses'] })
      Taro.showToast({
        title: addressId ? '更新成功' : '添加成功',
        icon: 'success'
      })
      Taro.navigateBack()
    },
    onError: (error) => {
      Taro.showToast({
        title: error.message || '保存失败',
        icon: 'none'
      })
    }
  })

  // 处理地区变化
  const handleCityChange = (provinceId: number, cityId: number, districtId: number) => {
    form.setValue('province', provinceId)
    form.setValue('city', cityId)
    form.setValue('district', districtId)
  }

  const onSubmit = (data: AddressFormData) => {
    saveAddressMutation.mutate(data)
  }

  return (
    <View className="min-h-screen bg-gray-50">
      <Navbar
        title={addressId ? '编辑地址' : '添加地址'}
        leftIcon="i-heroicons-chevron-left-20-solid"
        onClickLeft={() => Taro.navigateBack()}
      />
      
      <ScrollView className="h-screen pt-12 pb-20">
        <View className="px-4 py-4">
          <Form {...form}>
            <View className="space-y-4">
              <Card>
                <View className="p-4 space-y-4">
                  <FormField
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>收货人姓名</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入收货人姓名" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    name="phone"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>手机号码</FormLabel>
                        <FormControl>
                          <Input placeholder="请输入手机号码" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <View className="mb-4">
                    <Text className="text-sm font-medium text-gray-700 mb-2">所在地区</Text>
                    <CitySelector
                      provinceValue={form.watch('province')}
                      cityValue={form.watch('city')}
                      districtValue={form.watch('district')}
                      onProvinceChange={(value) => form.setValue('province', value)}
                      onCityChange={(value) => form.setValue('city', value)}
                      onDistrictChange={(value) => form.setValue('district', value)}
                      showLabels={false}
                    />
                  </View>

                  <FormField
                    name="address"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>详细地址</FormLabel>
                        <FormControl>
                          <Input 
                            placeholder="请输入详细地址，如街道、门牌号等" 
                            {...field} 
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    name="isDefault"
                    render={({ field }) => (
                      <FormItem>
                        <View className="flex items-center justify-between">
                          <FormLabel>设为默认地址</FormLabel>
                          <FormControl>
                            <Switch
                              checked={field.value}
                              onChange={field.onChange}
                              color="#1976D2"
                            />
                          </FormControl>
                        </View>
                      </FormItem>
                    )}
                  />
                </View>
              </Card>

              <Button
                className="w-full"
                onClick={form.handleSubmit(onSubmit)}
                disabled={saveAddressMutation.isPending}
              >
                {saveAddressMutation.isPending ? '保存中...' : '保存地址'}
              </Button>
            </View>
          </Form>
        </View>
      </ScrollView>
    </View>
  )
}