'use client';

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

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 t = useTranslations('Contact');
  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 = t('form.errors.nameRequired');
    }

    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!formData.phone.trim()) {
      newErrors.phone = t('form.errors.phoneRequired');
    } else if (!phoneRegex.test(formData.phone)) {
      newErrors.phone = t('form.errors.phoneInvalid');
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!formData.email.trim()) {
      newErrors.email = t('form.errors.emailRequired');
    } else if (!emailRegex.test(formData.email)) {
      newErrors.email = t('form.errors.emailInvalid');
    }

    if (!formData.description.trim()) {
      newErrors.description = t('form.errors.descRequired');
    }

    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 || t('form.success')
        });
        // 清空表单
        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">{t('title')} • {t('subtitle')}</h2>
              <h3 className="text-4xl md:text-5xl font-serif leading-tight">
                {t('heading')} <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">{t('info.address')}</p>
                  <p className="text-xl font-serif">{t('info.addressValue')}</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">{t('info.phone')}</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">{t('info.email')}</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">
                    {t('form.name')} <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={t('form.name')} 
                  />
                  {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">
                    {t('form.phone')} <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={t('form.phone')} 
                  />
                  {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">
                  {t('form.email')} <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">
                  {t('form.description')} <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={t('form.description')}
                ></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 ? t('form.submitting') : t('form.submit')}
              </button>
            </form>
          </div>

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

export default Contact;