import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Button } from '@/client/components/ui/button';
import { Badge } from '@/client/components/ui/badge';
import { Input } from '@/client/components/ui/input';
import { Textarea } from '@/client/components/ui/textarea';
import { Label } from '@/client/components/ui/label';
import { Separator } from '@/client/components/ui/separator';
import { 
  MapPin, 
  Phone, 
  Mail, 
  Clock, 
  MessageCircle,
  Send,
  CheckCircle,
  Users,
  Building
} from 'lucide-react';

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    subject: '',
    message: ''
  });

  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 这里可以添加表单提交逻辑
    console.log('表单数据:', formData);
    setIsSubmitted(true);
    // 重置表单
    setFormData({
      name: '',
      email: '',
      phone: '',
      company: '',
      subject: '',
      message: ''
    });
  };

  const contactInfo = [
    {
      icon: <MapPin className="h-6 w-6" />,
      title: "公司地址",
      content: "北京市海淀区中关村科技园区\n创新大厦A座15层",
      description: "交通便利，地铁直达"
    },
    {
      icon: <Phone className="h-6 w-6" />,
      title: "联系电话",
      content: "400-123-4567\n010-8888-9999",
      description: "工作日 9:00-18:00"
    },
    {
      icon: <Mail className="h-6 w-6" />,
      title: "电子邮箱",
      content: "contact@yuanhengtech.com\nsupport@yuanhengtech.com",
      description: "24小时内回复"
    },
    {
      icon: <Clock className="h-6 w-6" />,
      title: "工作时间",
      content: "周一至周五 9:00-18:00\n周六 9:00-12:00",
      description: "节假日除外"
    }
  ];

  const departments = [
    {
      name: "商务合作",
      description: "项目合作、渠道合作、战略合作",
      contact: "张经理",
      phone: "138-0013-8000",
      email: "business@yuanhengtech.com"
    },
    {
      name: "技术支持",
      description: "技术咨询、产品支持、售后服务",
      contact: "李工程师",
      phone: "139-0013-9000",
      email: "support@yuanhengtech.com"
    },
    {
      name: "人才招聘",
      description: "人才共享、项目外包、技术咨询",
      contact: "王总监",
      phone: "136-0013-6000",
      email: "hr@yuanhengtech.com"
    },
    {
      name: "媒体合作",
      description: "品牌宣传、媒体采访、活动合作",
      contact: "陈主管",
      phone: "137-0013-7000",
      email: "media@yuanhengtech.com"
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <div className="inline-flex items-center px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-sm font-medium mb-6">
              <MessageCircle className="h-4 w-4 mr-2" />
              联系我们
            </div>
            
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              期待与您合作
            </h1>
            
            <p className="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto mb-8">
              无论您有任何问题或合作意向，我们都将竭诚为您服务
            </p>
          </div>
        </div>
      </div>

      {/* Contact Information */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">联系信息</h2>
            <p className="text-xl text-gray-600">多种联系方式，方便您随时与我们沟通</p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {contactInfo.map((info, index) => (
              <Card key={index} className="border-0 shadow-lg text-center">
                <CardHeader>
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
                    {info.icon}
                  </div>
                  <CardTitle>{info.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <p className="text-gray-700 whitespace-pre-line">{info.content}</p>
                    <p className="text-sm text-gray-500">{info.description}</p>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Contact Form */}
      <div className="py-20 bg-gray-50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">在线咨询</h2>
            <p className="text-xl text-gray-600">填写表单，我们将尽快与您联系</p>
          </div>

          {isSubmitted ? (
            <Card className="border-0 shadow-lg text-center py-12">
              <CardContent>
                <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">提交成功！</h3>
                <p className="text-gray-600 mb-6">
                  感谢您的咨询，我们将在24小时内与您联系。
                </p>
                <Button 
                  onClick={() => setIsSubmitted(false)}
                  variant="outline"
                >
                  继续咨询
                </Button>
              </CardContent>
            </Card>
          ) : (
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle>咨询表单</CardTitle>
                <CardDescription>请填写您的联系信息和咨询内容</CardDescription>
              </CardHeader>
              <CardContent>
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="name">姓名 *</Label>
                      <Input
                        id="name"
                        name="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        placeholder="请输入您的姓名"
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">邮箱 *</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="请输入您的邮箱"
                        required
                      />
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="phone">电话</Label>
                      <Input
                        id="phone"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        placeholder="请输入您的联系电话"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="company">公司名称</Label>
                      <Input
                        id="company"
                        name="company"
                        value={formData.company}
                        onChange={handleInputChange}
                        placeholder="请输入您的公司名称"
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="subject">咨询主题 *</Label>
                    <Input
                      id="subject"
                      name="subject"
                      value={formData.subject}
                      onChange={handleInputChange}
                      placeholder="请输入咨询主题"
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="message">详细内容 *</Label>
                    <Textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      placeholder="请详细描述您的需求或问题"
                      rows={6}
                      required
                    />
                  </div>

                  <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700">
                    <Send className="h-4 w-4 mr-2" />
                    提交咨询
                  </Button>
                </form>
              </CardContent>
            </Card>
          )}
        </div>
      </div>

      {/* Department Contacts */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">各部门联系方式</h2>
            <p className="text-xl text-gray-600">根据您的需求联系对应的部门</p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {departments.map((dept, index) => (
              <Card key={index} className="border-0 shadow-lg hover:shadow-xl transition-all duration-300">
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <Building className="h-5 w-5 mr-2" />
                    {dept.name}
                  </CardTitle>
                  <CardDescription>{dept.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">联系人：</span>
                      <span className="font-medium">{dept.contact}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">电话：</span>
                      <span className="font-medium">{dept.phone}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-gray-600">邮箱：</span>
                      <span className="font-medium text-blue-600">{dept.email}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Map & Location */}
      <div className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">公司位置</h2>
            <p className="text-xl text-gray-600">欢迎莅临参观指导</p>
          </div>

          <Card className="border-0 shadow-lg">
            <CardHeader>
              <CardTitle className="flex items-center">
                <MapPin className="h-5 w-5 mr-2" />
                元亨科技有限公司
              </CardTitle>
              <CardDescription>北京市海淀区中关村科技园区创新大厦A座15层</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="bg-gradient-to-r from-blue-100 to-purple-100 rounded-lg p-8 text-center">
                <div className="max-w-md mx-auto">
                  <h3 className="text-xl font-semibold mb-4">交通指南</h3>
                  <div className="space-y-2 text-gray-700">
                    <p>🚇 地铁：10号线中关村站A出口，步行5分钟</p>
                    <p>🚌 公交：中关村南站，多条线路可达</p>
                    <p>🚗 自驾：园区提供地下停车场</p>
                  </div>
                </div>
              </div>
              
              {/* 这里可以添加真实的地图组件 */}
              <div className="mt-6 bg-gray-200 rounded-lg h-64 flex items-center justify-center">
                <div className="text-center">
                  <MapPin className="h-12 w-12 text-gray-400 mx-auto mb-2" />
                  <p className="text-gray-600">地图位置展示</p>
                  <p className="text-sm text-gray-500">(实际项目中可集成百度地图或高德地图)</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Quick Actions */}
      <div className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold mb-4">
            立即开始合作
          </h2>
          <p className="text-xl text-blue-100 mb-8">
            选择最适合您的联系方式，开启合作之旅
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button variant="secondary" size="lg">
              <Phone className="h-4 w-4 mr-2" />
              立即致电
            </Button>
            <Button variant="secondary" size="lg">
              <Mail className="h-4 w-4 mr-2" />
              发送邮件
            </Button>
            <Button variant="secondary" size="lg">
              <Users className="h-4 w-4 mr-2" />
              在线咨询
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}