import { Button, Checkbox, CheckboxGroup, Input, Radio, RadioGroup, Text, Textarea, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'

type ServiceType = 'new' | 'update'

type ApplicationForm = {
  serviceType: ServiceType
  storeName: string
  storeAddress: string
  contactName: string
  contactPhone: string
  description: string
}

type FormErrors = Partial<Record<keyof ApplicationForm | 'agreement', string>>

const INITIAL_FORM: ApplicationForm = {
  serviceType: 'new',
  storeName: '',
  storeAddress: '',
  contactName: '',
  contactPhone: '',
  description: '',
}

const PHONE_PATTERN = /^1[3-9]\d{9}$/

const validateForm = (form: ApplicationForm, agreed: boolean) => {
  const errors: FormErrors = {}

  if (!form.storeName.trim()) errors.storeName = '请输入门店名称'
  if (!form.storeAddress.trim()) errors.storeAddress = '请输入门店地址'
  if (!form.contactName.trim()) errors.contactName = '请输入联系人姓名'

  if (!form.contactPhone.trim()) {
    errors.contactPhone = '请输入联系电话'
  } else if (!PHONE_PATTERN.test(form.contactPhone.trim())) {
    errors.contactPhone = '请输入正确的手机号码'
  }

  if (!form.description.trim()) errors.description = '请描述需要办理的内容'
  if (!agreed) errors.agreement = '请阅读并同意隐私政策和服务说明'

  return errors
}

export default function Landing () {
  const [form, setForm] = useState<ApplicationForm>(INITIAL_FORM)
  const [agreed, setAgreed] = useState(false)
  const [errors, setErrors] = useState<FormErrors>({})

  const updateField = <K extends keyof ApplicationForm>(field: K, value: ApplicationForm[K]) => {
    setForm((current) => ({ ...current, [field]: value }))
    setErrors((current) => ({ ...current, [field]: undefined }))
  }

  const showPolicy = (type: 'privacy' | 'service') => {
    const isPrivacy = type === 'privacy'

    Taro.showModal({
      title: isPrivacy ? '隐私政策' : '服务说明',
      content: isPrivacy
        ? '您填写的信息仅用于本次门店标注服务的联系与确认，我们将妥善保护您的个人信息。'
        : '提交申请后，工作人员将在服务时间内联系您核对资料。具体办理结果以实际审核情况为准。',
      showCancel: false,
      confirmText: '我知道了',
    })
  }

  const handleSubmit = () => {
    const validationErrors = validateForm(form, agreed)
    const firstError = Object.values(validationErrors)[0]

    setErrors(validationErrors)

    if (firstError) {
      Taro.showToast({ title: firstError, icon: 'none' })
      return
    }

    Taro.showModal({
      title: '提交成功',
      content: '您的申请已提交，工作人员将在服务时间内联系您确认。',
      showCancel: false,
      confirmText: '我知道了',
    })
  }

  return (
    <View className='landing-page'>
      <View className='landing-page__intro'>
        <Text className='landing-page__title'>门店企业标注，在线提交</Text>
        <Text className='landing-page__description'>
          提供门店新增标注、信息修改等企业服务，提交资料后由工作人员联系确认。
        </Text>
        <Text className='landing-page__notice'>第三方企业服务，非地图平台官方服务</Text>
      </View>

      <View className='landing-page__form'>
        <View className='landing-page__field'>
          <Text className='landing-page__label'>办理类型</Text>
          <RadioGroup
            className='landing-page__service-types'
            onChange={(event) => updateField('serviceType', event.detail.value as ServiceType)}
          >
            <View className={`landing-page__service-type ${form.serviceType === 'new' ? 'landing-page__service-type--selected' : ''}`}>
              <Radio className='landing-page__radio' value='new' checked={form.serviceType === 'new'} color='#07c160'>新增标注</Radio>
            </View>
            <View className={`landing-page__service-type ${form.serviceType === 'update' ? 'landing-page__service-type--selected' : ''}`}>
              <Radio className='landing-page__radio' value='update' checked={form.serviceType === 'update'} color='#07c160'>信息修改</Radio>
            </View>
          </RadioGroup>
        </View>

        <View className='landing-page__field'>
          <Text className='landing-page__label'>门店名称</Text>
          <Input
            className={`landing-page__input ${errors.storeName ? 'landing-page__input--error' : ''}`}
            value={form.storeName}
            maxlength={50}
            placeholder='请输入营业执照上的门店名称'
            placeholderClass='landing-page__placeholder'
            onInput={(event) => updateField('storeName', event.detail.value)}
          />
          {errors.storeName && <Text className='landing-page__error'>{errors.storeName}</Text>}
        </View>

        <View className='landing-page__field'>
          <Text className='landing-page__label'>门店地址</Text>
          <Input
            className={`landing-page__input ${errors.storeAddress ? 'landing-page__input--error' : ''}`}
            value={form.storeAddress}
            maxlength={100}
            placeholder='请输入完整经营地址'
            placeholderClass='landing-page__placeholder'
            onInput={(event) => updateField('storeAddress', event.detail.value)}
          />
          {errors.storeAddress && <Text className='landing-page__error'>{errors.storeAddress}</Text>}
        </View>

        <View className='landing-page__field'>
          <Text className='landing-page__label'>联系人</Text>
          <Input
            className={`landing-page__input ${errors.contactName ? 'landing-page__input--error' : ''}`}
            value={form.contactName}
            maxlength={30}
            placeholder='请输入联系人姓名'
            placeholderClass='landing-page__placeholder'
            onInput={(event) => updateField('contactName', event.detail.value)}
          />
          {errors.contactName && <Text className='landing-page__error'>{errors.contactName}</Text>}
        </View>

        <View className='landing-page__field'>
          <Text className='landing-page__label'>联系电话</Text>
          <Input
            className={`landing-page__input ${errors.contactPhone ? 'landing-page__input--error' : ''}`}
            value={form.contactPhone}
            type='number'
            maxlength={11}
            placeholder='请输入手机号码'
            placeholderClass='landing-page__placeholder'
            onInput={(event) => updateField('contactPhone', event.detail.value)}
          />
          {errors.contactPhone && <Text className='landing-page__error'>{errors.contactPhone}</Text>}
        </View>

        <View className='landing-page__field'>
          <Text className='landing-page__label'>补充说明</Text>
          <Textarea
            className={`landing-page__textarea ${errors.description ? 'landing-page__input--error' : ''}`}
            value={form.description}
            maxlength={300}
            placeholder='请描述需要办理的内容'
            placeholderClass='landing-page__placeholder'
            onInput={(event) => updateField('description', event.detail.value)}
          />
          {errors.description && <Text className='landing-page__error'>{errors.description}</Text>}
        </View>
      </View>

      <CheckboxGroup
        className='landing-page__agreement'
        onChange={(event) => {
          setAgreed(event.detail.value.includes('agreed'))
          setErrors((current) => ({ ...current, agreement: undefined }))
        }}
      >
        <Checkbox className='landing-page__checkbox' value='agreed' checked={agreed} color='#07c160' />
        <Text className='landing-page__agreement-text'>我已阅读并同意</Text>
        <Text className='landing-page__link' onClick={() => showPolicy('privacy')}>《隐私政策》</Text>
        <Text className='landing-page__agreement-text'>和</Text>
        <Text className='landing-page__link' onClick={() => showPolicy('service')}>《服务说明》</Text>
      </CheckboxGroup>
      {errors.agreement && <Text className='landing-page__agreement-error'>{errors.agreement}</Text>}

      <Button
        className='landing-page__submit'
        hoverClass='landing-page__submit--pressed'
        onClick={handleSubmit}
      >
        提交申请
      </Button>

      <View className='landing-page__footer'>
        <Text>服务时间：工作日 9:00-18:00</Text>
        <Text>客服电话：400-800-1234</Text>
        <Text>第三方企业服务，请根据实际需求自愿提交</Text>
      </View>
    </View>
  )
}