import { useState } from 'react';
import { motion } from 'framer-motion';
import {
  MapPin,
  Phone,
  Mail,
  Clock,
  Send,
  User,
  MessageSquare,
  Building2,
  Briefcase,
  ArrowRight,
  CheckCircle,
} from 'lucide-react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { COMPANY_INFO, CONTACT_INFO } from '../lib/constants';
import { usePageTitle } from '../hooks/usePageTitle';

/**
 * Contact 组件 - 联系我们页面
 */

// 招聘信息数据
const jobPositions = [
  {
    id: 1,
    title: '高级投资经理',
    department: '投资部',
    location: '北京',
    type: '全职',
    salary: '30K-50K/月',
  },
  {
    id: 2,
    title: 'Java 开发工程师',
    department: '技术部',
    location: '北京',
    type: '全职',
    salary: '25K-40K/月',
  },
  {
    id: 3,
    title: '财务顾问',
    department: '金融部',
    location: '上海',
    type: '全职',
    salary: '20K-35K/月',
  },
  {
    id: 4,
    title: '产品经理',
    department: '产品部',
    location: '北京',
    type: '全职',
    salary: '28K-45K/月',
  },
];

// 表单状态类型
interface ContactFormData {
  name: string;
  email: string;
  subject: string;
  message: string;
}

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

/**
 * Contact 组件
 */
export const Contact: React.FC = () => {
  usePageTitle('联系我们');
  const [formData, setFormData] = useState<ContactFormData>({
    name: '',
    email: '',
    subject: '',
    message: '',
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  // 表单验证
  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};

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

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

    if (!formData.subject.trim()) {
      newErrors.subject = '请输入邮件主题';
    }

    if (!formData.message.trim()) {
      newErrors.message = '请输入留言内容';
    } else if (formData.message.trim().length < 10) {
      newErrors.message = '留言内容至少需要 10 个字符';
    }

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

  // 处理输入变化
  const handleInputChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    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);

    // 模拟表单提交
    await new Promise((resolve) => setTimeout(resolve, 1500));

    setIsSubmitting(false);
    setSubmitSuccess(true);
    setFormData({ name: '', email: '', subject: '', message: '' });

    // 3秒后重置成功状态
    setTimeout(() => setSubmitSuccess(false), 3000);
  };

  return (
    <motion.div
      className="min-h-screen bg-background"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {/* 顶部导航 */}
      <Header />

      {/* 主内容 */}
      <main>
        {/* 页面标题 */}
        <section className="pt-32 pb-16 bg-gradient-to-br from-primary to-primary-light">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center text-white"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h1 className="text-4xl md:text-5xl font-bold mb-4">
                联系我们
              </h1>
              <p className="text-xl text-white/80 max-w-3xl mx-auto">
                诚挚期待与您合作，欢迎随时与我们联系
              </p>
            </motion.div>
          </div>
        </section>

        {/* 联系信息 */}
        <section className="py-16 -mt-8">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {CONTACT_INFO.map((info, index) => {
                const Icon = info.icon;
                return (
                  <motion.div
                    key={info.id}
                    className="bg-white rounded-xl shadow-lg p-6 text-center hover:shadow-xl transition-shadow"
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1, duration: 0.5 }}
                    whileHover={{ y: -5 }}
                  >
                    <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-accent/20 mb-4">
                      <Icon size={28} className="text-accent" />
                    </div>
                    <h3 className="text-sm text-gray-500 mb-2">{info.title}</h3>
                    <p className="font-medium text-primary-dark">{info.content}</p>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </section>

        {/* 联系表单和地图 */}
        <section className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid lg:grid-cols-2 gap-12">
              {/* 联系表单 */}
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                  <h2 className="text-2xl font-bold text-primary-dark mb-2">
                    发送留言
                  </h2>
                  <p className="text-gray-600 mb-8">
                    请填写以下表单，我们将尽快与您联系
                  </p>

                  {/* 成功提示 */}
                  {submitSuccess && (
                    <motion.div
                      className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3"
                      initial={{ opacity: 0, scale: 0.9 }}
                      animate={{ opacity: 1, scale: 1 }}
                    >
                      <CheckCircle size={24} className="text-green-600" />
                      <div>
                        <p className="font-medium text-green-800">提交成功！</p>
                        <p className="text-sm text-green-600">
                          我们已收到您的留言，会尽快回复您。
                        </p>
                      </div>
                    </motion.div>
                  )}

                  <form onSubmit={handleSubmit} className="space-y-6">
                    {/* 姓名 */}
                    <div>
                      <label
                        htmlFor="name"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        姓名 <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <User
                          size={20}
                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
                        />
                        <input
                          type="text"
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleInputChange}
                          placeholder="请输入您的姓名"
                          className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all ${
                            errors.name
                              ? 'border-red-300 focus:border-red-500'
                              : 'border-gray-200 focus:border-primary'
                          }`}
                        />
                      </div>
                      {errors.name && (
                        <p className="mt-1 text-sm text-red-500">{errors.name}</p>
                      )}
                    </div>

                    {/* 邮箱 */}
                    <div>
                      <label
                        htmlFor="email"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        邮箱 <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <Mail
                          size={20}
                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
                        />
                        <input
                          type="email"
                          id="email"
                          name="email"
                          value={formData.email}
                          onChange={handleInputChange}
                          placeholder="请输入您的邮箱"
                          className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all ${
                            errors.email
                              ? 'border-red-300 focus:border-red-500'
                              : 'border-gray-200 focus:border-primary'
                          }`}
                        />
                      </div>
                      {errors.email && (
                        <p className="mt-1 text-sm text-red-500">{errors.email}</p>
                      )}
                    </div>

                    {/* 主题 */}
                    <div>
                      <label
                        htmlFor="subject"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        主题 <span className="text-red-500">*</span>
                      </label>
                      <div className="relative">
                        <MessageSquare
                          size={20}
                          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
                        />
                        <select
                          id="subject"
                          name="subject"
                          value={formData.subject}
                          onChange={handleInputChange}
                          className={`w-full pl-10 pr-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all appearance-none bg-white ${
                            errors.subject
                              ? 'border-red-300 focus:border-red-500'
                              : 'border-gray-200 focus:border-primary'
                          }`}
                        >
                          <option value="">请选择主题</option>
                          <option value="业务咨询">业务咨询</option>
                          <option value="投资合作">投资合作</option>
                          <option value="技术支持">技术支持</option>
                          <option value="媒体合作">媒体合作</option>
                          <option value="其他">其他</option>
                        </select>
                      </div>
                      {errors.subject && (
                        <p className="mt-1 text-sm text-red-500">{errors.subject}</p>
                      )}
                    </div>

                    {/* 留言内容 */}
                    <div>
                      <label
                        htmlFor="message"
                        className="block text-sm font-medium text-gray-700 mb-2"
                      >
                        留言内容 <span className="text-red-500">*</span>
                      </label>
                      <textarea
                        id="message"
                        name="message"
                        value={formData.message}
                        onChange={handleInputChange}
                        rows={5}
                        placeholder="请详细描述您的需求..."
                        className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-none ${
                          errors.message
                            ? 'border-red-300 focus:border-red-500'
                            : 'border-gray-200 focus:border-primary'
                        }`}
                      />
                      {errors.message && (
                        <p className="mt-1 text-sm text-red-500">{errors.message}</p>
                      )}
                    </div>

                    {/* 提交按钮 */}
                    <motion.button
                      type="submit"
                      disabled={isSubmitting}
                      className={`w-full py-4 rounded-lg font-medium text-white transition-all flex items-center justify-center gap-2 ${
                        isSubmitting
                          ? 'bg-gray-400 cursor-not-allowed'
                          : 'bg-primary hover:bg-primary-light'
                      }`}
                      whileHover={!isSubmitting ? { scale: 1.02 } : {}}
                      whileTap={!isSubmitting ? { scale: 0.98 } : {}}
                    >
                      {isSubmitting ? (
                        <>
                          <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                          提交中...
                        </>
                      ) : (
                        <>
                          <Send size={20} />
                          提交留言
                        </>
                      )}
                    </motion.button>
                  </form>
                </div>
              </motion.div>

              {/* 地图和地址信息 */}
              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
 {/* 地图和办公环境 */}
                 <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-2 mb-6">
                   <div className="aspect-[4/3] rounded-xl overflow-hidden relative">
                     <img 
                       src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1200&h=900&fit=crop"
                       alt="诚裕集团总部大楼 - 现代化办公大厦"
                       className="w-full h-full object-cover"
                     />
                     <div className="absolute bottom-4 left-4 right-4 bg-white/95 backdrop-blur-sm rounded-lg p-3 shadow-lg">
                       <p className="text-primary-dark font-medium text-sm mb-1">
                         📍 诚裕集团总部
                       </p>
                       <p className="text-gray-600 text-xs">
                         北京市朝阳区建国路88号诚裕大厦
                       </p>
                       <motion.button
                         className="mt-2 px-4 py-1 bg-primary text-white rounded text-xs hover:bg-primary-light transition-colors"
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                       >
                         在地图中查看
                       </motion.button>
                     </div>
                   </div>
                 </div>

 {/* 办公环境展示 */}
                 <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
                   <div className="aspect-[16/9] overflow-hidden">
                     <img 
                       src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&h=675&fit=crop"
                       alt="诚裕集团办公环境 - 现代化工作空间"
                       className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                     />
                   </div>
                 </div>

                 {/* 公司详细信息 */}
                 <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                   <h3 className="text-lg font-semibold text-primary-dark mb-4">
                     公司信息
                   </h3>
                   <div className="space-y-4">
                     <div className="flex items-start gap-3">
                       <MapPin size={20} className="text-accent mt-0.5" />
                       <div>
                         <p className="text-sm text-gray-500">总部地址</p>
                         <p className="text-primary-dark">
                           {COMPANY_INFO.headquarters}诚裕大厦
                         </p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <Phone size={20} className="text-accent mt-0.5" />
                       <div>
                         <p className="text-sm text-gray-500">服务热线</p>
                         <p className="text-primary-dark">{COMPANY_INFO.phone}</p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <Mail size={20} className="text-accent mt-0.5" />
                       <div>
                         <p className="text-sm text-gray-500">商务邮箱</p>
                         <p className="text-primary-dark">{COMPANY_INFO.email}</p>
                       </div>
                     </div>
                     <div className="flex items-start gap-3">
                       <Clock size={20} className="text-accent mt-0.5" />
                       <div>
                         <p className="text-sm text-gray-500">工作时间</p>
                         <p className="text-primary-dark">{COMPANY_INFO.workingHours}</p>
                       </div>
                     </div>
                   </div>
                 </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* 招聘信息 */}
        <section className="py-20 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              className="text-center mb-12"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-3xl font-bold text-primary-dark mb-4">
                加入诚裕
              </h2>
              <p className="text-lg text-gray-600">
                我们正在寻找优秀的人才，与我们共创未来
              </p>
            </motion.div>

            <div className="grid md:grid-cols-2 gap-6">
              {jobPositions.map((job, index) => (
                <motion.div
                  key={job.id}
                  className="p-6 bg-background rounded-xl border border-gray-100 hover:shadow-md transition-shadow"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1, duration: 0.5 }}
                  whileHover={{ y: -3 }}
                >
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <h3 className="text-lg font-semibold text-primary-dark mb-1">
                        {job.title}
                      </h3>
                      <p className="text-sm text-gray-500 flex items-center gap-4">
                        <span className="flex items-center gap-1">
                          <Building2 size={14} />
                          {job.department}
                        </span>
                        <span className="flex items-center gap-1">
                          <MapPin size={14} />
                          {job.location}
                        </span>
                      </p>
                    </div>
                    <span className="px-3 py-1 bg-accent/20 text-accent-dark text-sm font-medium rounded-full">
                      {job.salary}
                    </span>
                  </div>
                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                    <span className="text-sm text-gray-500">{job.type}</span>
                    <motion.button
                      className="flex items-center gap-1 text-primary font-medium text-sm hover:text-primary-light"
                      whileHover={{ x: 3 }}
                    >
                      了解详情
                      <ArrowRight size={16} />
                    </motion.button>
                  </div>
                </motion.div>
              ))}
            </div>

            <motion.div
              className="text-center mt-8"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
            >
              <motion.button
                className="inline-flex items-center gap-2 px-8 py-3 border-2 border-primary text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-colors"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                <Briefcase size={20} />
                查看全部职位
              </motion.button>
            </motion.div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <Footer />
    </motion.div>
  );
};

export default Contact;