'use client';

import { useState, useEffect, useRef } from 'react';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Mail, Phone, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
import { COMPANY_INFO } from '@/lib/constants';

const contactFormSchema = z.object({
  name: z.string().min(2, '姓名至少需要2个字符'),
  phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
  email: z.string().email('请输入有效的邮箱地址'),
  message: z.string().min(10, '留言内容至少需要10个字符'),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

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

export function ContactSection() {
  const [isVisible, setIsVisible] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [formData, setFormData] = useState<ContactFormData>({
    name: '',
    phone: '',
    email: '',
    message: '',
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const validateField = (field: keyof ContactFormData, value: string) => {
    try {
      contactFormSchema.shape[field].parse(value);
      setErrors((prev) => ({ ...prev, [field]: undefined }));
    } catch (error) {
      if (error instanceof z.ZodError) {
        const fieldError = error.issues[0];
        if (fieldError) {
          setErrors((prev) => ({ ...prev, [field]: fieldError.message }));
        }
      }
    }
  };

  const handleChange = (field: keyof ContactFormData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      validateField(field, value);
    }
  };

  const handleBlur = (field: keyof ContactFormData, value: string) => {
    validateField(field, value);
  };

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    
    const result = contactFormSchema.safeParse(formData);
    
    if (!result.success) {
      const fieldErrors: FormErrors = {};
      result.error.issues.forEach((issue) => {
        const field = issue.path[0] as keyof ContactFormData;
        fieldErrors[field] = issue.message;
      });
      setErrors(fieldErrors);
      return;
    }

    setIsSubmitting(true);
    
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    setIsSubmitting(false);
    setIsSubmitted(true);
  }

  return (
    <section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-0 bg-gradient-radial from-[rgba(0,94,184,0.03)] via-transparent to-transparent" />
      </div>

      <div className="container-wide relative z-10">
        <div 
          className={`
            mb-16 opacity-0 translate-y-4
            ${isVisible ? 'animate-fade-in-up' : ''}
          `}
        >
          <div className="flex items-center gap-3 mb-4">
            <div className="w-8 h-px bg-gradient-to-r from-[#005EB8] to-[#C41E3A]" />
            <span className="text-sm text-[#718096] tracking-wide">联系我们</span>
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
            开启 <span className="text-[#C41E3A]">合作</span>
          </h2>
          <p className="mt-4 text-[#718096] max-w-2xl">
            无论您有任何问题或合作意向，我们都很乐意与您交流
          </p>
        </div>

        <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
          <div 
            className={`
              lg:col-span-2 space-y-8
              opacity-0 translate-y-4
              ${isVisible ? 'animate-fade-in-up stagger-1' : ''}
            `}
          >
            <div>
              <h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">联系方式</h3>
              <div className="space-y-4">
                <div className="flex items-start gap-4 group">
                  <div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                    <Mail className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-[#718096] mb-1">邮箱</p>
                    <a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
                      {COMPANY_INFO.email}
                    </a>
                  </div>
                </div>
                <div className="flex items-start gap-4 group">
                  <div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                    <Phone className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-[#718096] mb-1">电话</p>
                    <a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
                      {COMPANY_INFO.phone}
                    </a>
                  </div>
                </div>
                <div className="flex items-start gap-4 group">
                  <div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
                    <MapPin className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <p className="text-sm text-[#718096] mb-1">地址</p>
                    <p className="text-[#1A1A2E]">{COMPANY_INFO.address}</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
              <div className="flex items-center gap-2 mb-3">
                <Clock className="w-4 h-4 text-[#005EB8]" />
                <h4 className="text-sm font-medium text-[#1A1A2E]">工作时间</h4>
              </div>
              <div className="space-y-1">
                <div className="flex justify-between text-sm">
                  <span className="text-[#718096]">周一至周五</span>
                  <span className="text-[#005EB8]">9:00 - 18:00</span>
                </div>
              </div>
            </div>

            <div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
              <div className="flex items-center gap-2 mb-3">
                <HeadphonesIcon className="w-4 h-4 text-[#005EB8]" />
                <h4 className="text-sm font-medium text-[#1A1A2E]">我们的承诺</h4>
              </div>
              <div className="space-y-3">
                <div className="flex items-start gap-2">
                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
                  <p className="text-sm text-[#718096]">工作日 2 小时内快速响应您的咨询</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
                  <p className="text-sm text-[#718096]">提供免费的业务咨询和方案评估服务</p>
                </div>
                <div className="flex items-start gap-2">
                  <div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
                  <p className="text-sm text-[#718096]">根据您的需求量身定制最优解决方案</p>
                </div>
              </div>
            </div>
          </div>

          <div 
            className={`
              lg:col-span-3
              opacity-0 translate-y-4
              ${isVisible ? 'animate-fade-in-up stagger-2' : ''}
            `}
          >
            <div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0]">
              <h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h3>
              
              {isSubmitted ? (
                <div className="text-center py-12">
                  <div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
                    <CheckCircle2 className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
                  <p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-5">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <Input 
                      label="姓名"
                      id="name" 
                      placeholder="请输入您的姓名" 
                      required 
                      value={formData.name}
                      onChange={(e) => handleChange('name', e.target.value)}
                      onBlur={(e) => handleBlur('name', e.target.value)}
                      error={errors.name}
                    />
                    <Input 
                      label="电话"
                      id="phone" 
                      type="tel" 
                      placeholder="请输入您的电话" 
                      required 
                      value={formData.phone}
                      onChange={(e) => handleChange('phone', e.target.value)}
                      onBlur={(e) => handleBlur('phone', e.target.value)}
                      error={errors.phone}
                    />
                  </div>
                  <Input 
                    label="邮箱"
                    id="email" 
                    type="email" 
                    placeholder="请输入您的邮箱" 
                    required 
                    value={formData.email}
                    onChange={(e) => handleChange('email', e.target.value)}
                    onBlur={(e) => handleBlur('email', e.target.value)}
                    error={errors.email}
                  />
                  <Textarea 
                    label="留言内容"
                    id="message" 
                    placeholder="请输入您想咨询的内容" 
                    rows={5}
                    required 
                    value={formData.message}
                    onChange={(e) => handleChange('message', e.target.value)}
                    onBlur={(e) => handleBlur('message', e.target.value)}
                    error={errors.message}
                  />
                  <Button 
                    type="submit" 
                    size="lg"
                    className="w-full group"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? (
                      <>
                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        发送中...
                      </>
                    ) : (
                      <>
                        <Send className="mr-2 h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                        发送消息
                      </>
                    )}
                  </Button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}