'use client';

import React, { useState } from 'react';
import { MapPin, Phone, Mail } from 'lucide-react';

interface FormData {
  name: string;
  phone: string;
  email: string;
  description: string;
}

interface FormErrors {
  name?: string;
  phone?: string;
  email?: string;
  description?: string;
}

const Contact: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    name: '',
    phone: '',
    email: '',
    description: '',
  });
  
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<{type: 'success' | 'error', message: string} | null>(null);

  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};

    if (!formData.name.trim()) {
      newErrors.name = '请输入姓名';
    }

    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!formData.phone.trim()) {
      newErrors.phone = '请输入电话';
    } else if (!phoneRegex.test(formData.phone)) {
      newErrors.phone = '请输入正确的手机号';
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!formData.email.trim()) {
      newErrors.email = '请输入邮箱';
    } else if (!emailRegex.test(formData.email)) {
      newErrors.email = '请输入正确的邮箱地址';
    }

    if (!formData.description.trim()) {
      newErrors.description = '请描述您的需求';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // 清除该字段的错误
    if (errors[name as keyof FormErrors]) {
      setErrors(prev => ({ ...prev, [name]: undefined }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }

    setIsSubmitting(true);
    setSubmitStatus(null);

    try {
      const response = await fetch('/api/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (response.ok) {
        setSubmitStatus({
          type: 'success',
          message: data.message || '留言提交成功，我们会尽快与您联系！'
        });
        // 清空表单
        setFormData({
          name: '',
          phone: '',
          email: '',
          description: '',
        });
      } else {
        setSubmitStatus({
          type: 'error',
          message: data.error || '提交失败，请稍后再试'
        });
      }
    } catch (error) {
      console.error('提交错误:', error);
      setSubmitStatus({
        type: 'error',
        message: '网络错误，请检查网络连接后重试'
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section id="contact" className="py-24 bg-feie-dark text-feie-white relative overflow-hidden">
        {/* Abstract background element */}
        <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
             <div className="absolute top-1/2 left-1/4 w-96 h-96 bg-feie-gold rounded-full blur-[120px]"></div>
        </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
          
          <div className="space-y-8">
            <div>
              <h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-3">联系方式 • Contact</h2>
              <h3 className="text-4xl md:text-5xl font-serif leading-tight">
                期待与您的合作 <br/>
                <span className="text-feie-white/50">共创价值</span>
              </h3>
            </div>
            
            <p className="text-gray-400 font-light text-lg">
              无论您有项目需求还是技术咨询，我们都随时准备为您提供专业的解答和服务。
            </p>

            <div className="space-y-6 pt-6">
              <div className="flex items-start gap-4 group">
                <div className="p-3 bg-white/5 rounded-sm group-hover:bg-feie-gold/20 transition-colors border border-white/10">
                  <MapPin className="w-6 h-6 text-feie-gold" />
                </div>
                <div>
                  <p className="text-sm text-gray-400 uppercase tracking-wider mb-1">注册地址</p>
                  <p className="text-xl font-serif">江苏省南京市溧水区永阳街道中大街81号8幢1630室</p>
                </div>
              </div>

              <div className="flex items-start gap-4 group">
                <div className="p-3 bg-white/5 rounded-sm group-hover:bg-feie-gold/20 transition-colors border border-white/10">
                  <Phone className="w-6 h-6 text-feie-gold" />
                </div>
                <div>
                  <p className="text-sm text-gray-400 uppercase tracking-wider mb-1">联系电话</p>
                  <p className="text-xl font-serif">19844561014</p>
                </div>
              </div>

              <div className="flex items-start gap-4 group">
                <div className="p-3 bg-white/5 rounded-sm group-hover:bg-feie-gold/20 transition-colors border border-white/10">
                  <Mail className="w-6 h-6 text-feie-gold" />
                </div>
                <div>
                  <p className="text-sm text-gray-400 uppercase tracking-wider mb-1">电子邮箱</p>
                  <a href="mailto:feie9454@gmail.com" className="text-xl font-serif hover:text-feie-gold transition-colors">
                    feie9454@gmail.com
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-feie-cream p-8 md:p-10 rounded-sm text-feie-dark shadow-2xl">
            <h4 className="text-2xl font-serif mb-6">在线留言</h4>
            
            {submitStatus && (
              <div className={`mb-6 p-4 rounded ${
                submitStatus.type === 'success' 
                  ? 'bg-green-100 text-green-800 border border-green-300' 
                  : 'bg-red-100 text-red-800 border border-red-300'
              }`}>
                {submitStatus.message}
              </div>
            )}
            
            <form className="space-y-6" onSubmit={handleSubmit}>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-sm font-bold uppercase tracking-wider text-gray-500 mb-2">
                    姓名 <span className="text-red-500">*</span>
                  </label>
                  <input 
                    type="text" 
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    className={`w-full bg-white border-b-2 p-3 focus:border-feie-gold outline-none transition-colors ${
                      errors.name ? 'border-red-500' : 'border-gray-200'
                    }`}
                    placeholder="您的姓名" 
                  />
                  {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
                </div>
                <div>
                  <label className="block text-sm font-bold uppercase tracking-wider text-gray-500 mb-2">
                    电话 <span className="text-red-500">*</span>
                  </label>
                  <input 
                    type="tel" 
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    className={`w-full bg-white border-b-2 p-3 focus:border-feie-gold outline-none transition-colors ${
                      errors.phone ? 'border-red-500' : 'border-gray-200'
                    }`}
                    placeholder="联系电话" 
                  />
                  {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
                </div>
              </div>
              <div>
                <label className="block text-sm font-bold uppercase tracking-wider text-gray-500 mb-2">
                  邮箱 <span className="text-red-500">*</span>
                </label>
                <input 
                  type="email" 
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  className={`w-full bg-white border-b-2 p-3 focus:border-feie-gold outline-none transition-colors ${
                    errors.email ? 'border-red-500' : 'border-gray-200'
                  }`}
                  placeholder="example@email.com" 
                />
                {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
              </div>
              <div>
                <label className="block text-sm font-bold uppercase tracking-wider text-gray-500 mb-2">
                  需求描述 <span className="text-red-500">*</span>
                </label>
                <textarea 
                  rows={4} 
                  name="description"
                  value={formData.description}
                  onChange={handleChange}
                  className={`w-full bg-white border-b-2 p-3 focus:border-feie-gold outline-none transition-colors resize-none ${
                    errors.description ? 'border-red-500' : 'border-gray-200'
                  }`}
                  placeholder="请简要描述您的需求..."
                ></textarea>
                {errors.description && <p className="text-red-500 text-sm mt-1">{errors.description}</p>}
              </div>
              <button 
                type="submit" 
                disabled={isSubmitting}
                className={`w-full py-4 font-serif font-bold uppercase tracking-widest transition-colors duration-300 ${
                  isSubmitting 
                    ? 'bg-gray-400 text-gray-200 cursor-not-allowed' 
                    : 'bg-feie-dark text-feie-white hover:bg-feie-gold'
                }`}
              >
                {isSubmitting ? '发送中...' : '发送信息'}
              </button>
            </form>
          </div>

        </div>
      </div>
    </section>
  );
};

export default Contact;