import { View, Text, Input, Textarea } from '@tarojs/components';
import { useState } from 'react';
import NavBar from '@/components/NavBar';

export default function InvoiceApplyPage() {
  const [invoiceType, setInvoiceType] = useState<'personal' | 'company'>('personal');
  const [formData, setFormData] = useState({
    title: '',
    taxNumber: '',
    content: '商品明细',
    amount: '',
    email: '',
    remark: ''
  });

  const handleSubmit = () => {
    console.log('提交发票申请', formData);
  };

  return (
    <View className="bg-gray-100 flex flex-col" style={{ minHeight: '100vh' }}>
      <NavBar title="申请发票" />

      <View className="flex-1 p-4">
        {/* 发票类型 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">发票类型</Text>
          <View className="flex" style={{ gap: '16px' }}>
            <View
              className={`flex-1 p-3 rounded-lg border-2 text-center ${
                invoiceType === 'personal'
                  ? 'border-red-500 bg-red-50'
                  : 'border-gray-300'
              }`}
              onClick={() => setInvoiceType('personal')}
            >
              <Text className={invoiceType === 'personal' ? 'text-red-500' : 'text-gray-600'}>
                个人
              </Text>
            </View>
            <View
              className={`flex-1 p-3 rounded-lg border-2 text-center ${
                invoiceType === 'company'
                  ? 'border-red-500 bg-red-50'
                  : 'border-gray-300'
              }`}
              onClick={() => setInvoiceType('company')}
            >
              <Text className={invoiceType === 'company' ? 'text-red-500' : 'text-gray-600'}>
                企业
              </Text>
            </View>
          </View>
        </View>

        {/* 发票信息 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">发票信息</Text>

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">发票抬头</Text>
            <Input
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="请输入发票抬头"
              value={formData.title}
              onInput={(e: any) => setFormData(prev => ({ ...prev, title: e.detail.value }))}
            />
          </View>

          {invoiceType === 'company' && (
            <View className="mb-4">
              <Text className="text-sm text-gray-600 mb-2 block">税号</Text>
              <Input
                className="w-full p-3 bg-gray-100 rounded-lg text-sm"
                placeholder="请输入纳税人识别号"
                value={formData.taxNumber}
                onInput={(e: any) => setFormData(prev => ({ ...prev, taxNumber: e.detail.value }))}
              />
            </View>
          )}

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">发票内容</Text>
            <View className="flex" style={{ gap: '16px' }}>
              <View
                className={`px-4 py-2 rounded-lg ${
                  formData.content === '商品明细' ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-600'
                }`}
                onClick={() => setFormData(prev => ({ ...prev, content: '商品明细' }))}
              >
                <Text>商品明细</Text>
              </View>
              <View
                className={`px-4 py-2 rounded-lg ${
                  formData.content === '商品类别' ? 'bg-red-500 text-white' : 'bg-gray-100 text-gray-600'
                }`}
                onClick={() => setFormData(prev => ({ ...prev, content: '商品类别' }))}
              >
                <Text>商品类别</Text>
              </View>
            </View>
          </View>

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">发票金额</Text>
            <Input
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="请输入发票金额"
              type="digit"
              value={formData.amount}
              onInput={(e: any) => setFormData(prev => ({ ...prev, amount: e.detail.value }))}
            />
          </View>
        </View>

        {/* 接收方式 */}
        <View className="bg-white rounded-lg p-4 mb-4">
          <Text className="text-base font-medium mb-3 block">接收方式</Text>
          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">电子邮箱</Text>
            <Input
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="请输入接收邮箱"
              value={formData.email}
              onInput={(e: any) => setFormData(prev => ({ ...prev, email: e.detail.value }))}
            />
          </View>

          <View className="mb-4">
            <Text className="text-sm text-gray-600 mb-2 block">备注</Text>
            <Textarea
              className="w-full p-3 bg-gray-100 rounded-lg text-sm"
              placeholder="选填，可填写备注信息"
              value={formData.remark}
              onInput={(e: any) => setFormData(prev => ({ ...prev, remark: e.detail.value }))}
            />
          </View>
        </View>
      </View>

      <View className="p-4 bg-white border-t border-gray-200" style={{ paddingBottom: '20px' }}>
        <View
          className="bg-red-500 text-white rounded-full w-full h-12 flex items-center justify-center"
          onClick={handleSubmit}
        >
          <Text className="text-white font-medium">提交申请</Text>
        </View>
      </View>
    </View>
  );
}