import { View, Text, Image, Input, Picker } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './index.scss'
import { getAddressList, addAddress, updateAddress, deleteAddress } from '../../utils/store'
import type { AddressItem } from '../../types'
import { useThemeContext } from '../../context/ThemeContext'

export default function AddressPage() {
  const { theme, resolvedTheme } = useThemeContext()
  const [list, setList] = useState<AddressItem[]>([])
  const [editing, setEditing] = useState<AddressItem | null>(null)
  const [showForm, setShowForm] = useState(false)

  const [name, setName] = useState('')
  const [phone, setPhone] = useState('')
  const [region, setRegion] = useState<string[]>([])
  const [detail, setDetail] = useState('')
  const [isDefault, setIsDefault] = useState(false)

  const load = () => setList(getAddressList())

  useEffect(() => {
    load()
  }, [])

  const resetForm = () => {
    setName('')
    setPhone('')
    setRegion([])
    setDetail('')
    setIsDefault(false)
    setEditing(null)
  }

  const openAdd = () => {
    resetForm()
    setShowForm(true)
  }

  const openEdit = (item: AddressItem) => {
    setEditing(item)
    setName(item.name)
    setPhone(item.phone)
    setRegion(item.region)
    setDetail(item.detail)
    setIsDefault(item.isDefault)
    setShowForm(true)
  }

  const handleDelete = (id: string) => {
    Taro.showModal({
      title: '确认删除',
      content: '删除后将无法恢复该地址',
      success: (res) => {
        if (res.confirm) {
          deleteAddress(id)
          load()
        }
      }
    })
  }

  const handleCopy = (item: AddressItem) => {
    const text = `${item.name} ${item.phone}\n${item.region.join(' ')} ${item.detail}`
    Taro.setClipboardData({ data: text })
  }

  const handleSave = () => {
    if (!name.trim() || !phone.trim() || region.length === 0 || !detail.trim()) {
      Taro.showToast({ title: '请填写完整信息', icon: 'none' })
      return
    }
    const payload = { name, phone, region, detail, isDefault }
    if (editing) {
      updateAddress(editing.id, payload)
    } else {
      addAddress(payload)
    }
    Taro.showToast({ title: '保存成功', icon: 'success' })
    setShowForm(false)
    resetForm()
    load()
  }

  const onRegionChange = (e: any) => {
    setRegion(e.detail.value || [])
  }

  return (
    <View className={`theme-${resolvedTheme}`}>
      <View className='address-page'>

        <View className='page-header dashed-card mt-20'>
          <View className='star-badge' />
          <View className='flex-between' style={{ width: '100%' }}>
            <Text className='back-btn' onTap={() => Taro.navigateBack()}>←</Text>
            <Text className='page-title'>收货地址</Text>
            <View style={{ width: '60px' }} />
          </View>
        </View>

        {/* 地址列表 */}
        <View className='address-list'>
          {list.map(item => (
            <View key={item.id} className='address-card dashed-card'>
              <View className='address-header'>
                <View className='address-user'>
                  <Text className='address-name'>{item.name}</Text>
                  <Text className='address-phone'>{item.phone}</Text>
                  {item.isDefault && (
                    <View className='default-tag'><Text>默认</Text></View>
                  )}
                </View>
                <Text className='address-full'>
                  {item.region.join(' ')} {item.detail}
                </Text>
              </View>
              <View className='address-actions'>
                <Text className='address-act' onTap={() => openEdit(item)}>✏️ 编辑</Text>
                <Text className='address-act' onTap={() => handleCopy(item)}>📋 复制</Text>
                <Text className='address-act delete' onTap={() => handleDelete(item.id)}>🗑️ 删除</Text>
              </View>
            </View>
          ))}

          {list.length === 0 && (
            <View className='empty-state'>
              <Image className='empty-icon-img' src='/icon/地址.png' mode='aspectFit' />
              <Text className='empty-text'>还没有收货地址</Text>
              <Text className='empty-sub'>点击下方按钮添加新地址</Text>
            </View>
          )}
        </View>

        <View className='safe-bottom-placeholder' />

        {/* 底部添加按钮 */}
        <View className='action-bar'>
          <View className='btn-gradient' onTap={openAdd}>
            <Text>新增收货地址</Text>
          </View>
        </View>

        {/* 新增/编辑弹窗 */}
        {showForm && (
          <View className='modal-overlay'>
            <View className='modal-card dashed-card address-form'>
              <View className='star-badge' />
              <Text className='modal-title'>{editing ? '编辑地址' : '新增地址'}</Text>

              <Input className='form-input' placeholder='收货人姓名'
                value={name} onInput={(e: any) => setName(e.detail.value)} />
              <Input className='form-input' placeholder='手机号码' type='number'
                value={phone} onInput={(e: any) => setPhone(e.detail.value)} />

              <Picker mode='region' value={region} onChange={onRegionChange}>
                <View className='form-picker'>
                  <Text className={region.length ? 'form-picker-val' : 'form-picker-ph'}>
                    {region.length ? region.join(' / ') : '选择省 / 市 / 区'}
                  </Text>
                </View>
              </Picker>

              <Input className='form-input' placeholder='详细地址：街道、门牌号'
                value={detail} onInput={(e: any) => setDetail(e.detail.value)} />

              <View className='form-row' onTap={() => setIsDefault(!isDefault)}>
                <Text className='form-label'>设为默认地址</Text>
                <View className={`checkbox ${isDefault ? 'checked' : ''}`} />
              </View>

              <View className='form-actions'>
                <View className='btn-outline' onTap={() => { setShowForm(false); resetForm() }}>
                  <Text>取消</Text>
                </View>
                <View className='btn-gradient' onTap={handleSave}>
                  <Text>保存</Text>
                </View>
              </View>
            </View>
          </View>
        )}
      </View>
    </View>
  )
}