import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message, Statistic } from 'antd';
import { ArrowLeftOutlined, ClockCircleOutlined, GiftOutlined, ShoppingCartOutlined } from '@ant-design/icons';
import { getServiceDetail, createServiceOrder } from '../api';
import { motion } from 'framer-motion';

const { Title, Paragraph } = Typography;

const ServiceDetail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [service, setService] = useState(null);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();

  const refCode = searchParams.get('ref') || 'flw666';

  useEffect(() => {
    const fetchDetail = async () => {
      try {
        const response = await getServiceDetail(id);
        setService(response.data);
      } catch (error) {
        console.error("Failed to fetch service detail:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchDetail();
  }, [id]);

  const handlePurchase = async (values) => {
      setSubmitting(true);
      try {
          const orderData = {
              service: service.id,
              customer_name: values.customer_name,
              company_name: values.company_name,
              phone_number: values.phone_number,
              email: values.email,
              requirements: values.requirements,
              ref_code: refCode
          };
          await createServiceOrder(orderData);
          message.success('需求已提交，我们的销售顾问将尽快与您联系！');
          setIsModalOpen(false);
      } catch (error) {
          console.error(error);
          message.error('提交失败，请重试');
      } finally {
          setSubmitting(false);
      }
  };

  if (loading) {
    return (
        <div style={{ textAlign: 'center', padding: '100px 0' }}>
            <Spin size="large" tip="Loading..." />
        </div>
    );
  }

  if (!service) {
    return (
        <div style={{ textAlign: 'center', padding: '100px 0' }}>
            <Empty description="Service not found" />
            <Button type="primary" onClick={() => navigate('/services')} style={{ marginTop: 20 }}>
                Return to Services
            </Button>
        </div>
    );
  }

  return (
    <div style={{ padding: '20px 0' }}>
      <Button 
        type="text" 
        icon={<ArrowLeftOutlined />} 
        style={{ color: '#fff', marginBottom: 20 }}
        onClick={() => navigate('/services')}
      >
        返回服务列表
      </Button>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <Row gutter={[40, 40]}>
            <Col xs={24} md={16}>
                <div style={{ textAlign: 'left', marginBottom: 40 }}>
                    <Title level={1} style={{ color: '#fff' }}>
                        {service.title}
                    </Title>
                    <Paragraph style={{ color: '#888', fontSize: 18 }}>
                        {service.description}
                    </Paragraph>
                    
                    <div style={{ 
                        marginTop: 30, 
                        background: 'rgba(255,255,255,0.03)', 
                        padding: '24px', 
                        borderRadius: 16, 
                        border: '1px solid rgba(255,255,255,0.08)',
                        backdropFilter: 'blur(10px)',
                        boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
                    }}>
                        <Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
                            <div style={{ width: 4, height: 18, background: service.color, marginRight: 10, borderRadius: 2 }} />
                            服务详情
                        </Title>
                        <Descriptions 
                            column={1} 
                            labelStyle={{ color: '#888', fontWeight: 'normal' }} 
                            contentStyle={{ color: '#fff', fontWeight: '500' }}
                        >
                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: service.color }} /> 交付周期</span>}>
                                {service.delivery_time || '待沟通'}
                            </Descriptions.Item>
                            <Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><GiftOutlined style={{ marginRight: 8, color: service.color }} /> 交付内容</span>}>
                                {service.delivery_content || '根据需求定制'}
                            </Descriptions.Item>
                        </Descriptions>
                    </div>
                </div>

                {service.display_detail_image ? (
                    <div style={{ 
                        width: '100%', 
                        background: '#111', 
                        borderRadius: 12, 
                        overflow: 'hidden',
                        boxShadow: `0 0 30px ${service.color}22`,
                        border: `1px solid ${service.color}33`
                    }}>
                        <img 
                            src={service.display_detail_image} 
                            alt={service.title} 
                            style={{ width: '100%', display: 'block' }} 
                        />
                    </div>
                ) : (
                    <div style={{ textAlign: 'center', padding: 100, background: '#111', borderRadius: 12, color: '#666' }}>
                        暂无详情图片
                    </div>
                )}
            </Col>
            
            <Col xs={24} md={8}>
                <div style={{ position: 'sticky', top: 100 }}>
                    <div style={{ 
                        background: '#1f1f1f', 
                        padding: 30, 
                        borderRadius: 16, 
                        border: `1px solid ${service.color}44`,
                        boxShadow: `0 0 20px ${service.color}11`
                    }}>
                        <Title level={3} style={{ color: '#fff', marginTop: 0 }}>服务报价</Title>
                        <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
                            <span style={{ fontSize: 36, color: service.color, fontWeight: 'bold' }}>¥{service.price}</span>
                            <span style={{ color: '#888', marginLeft: 8 }}>/ {service.unit} 起</span>
                        </div>
                        
                        <div style={{ marginBottom: 25, display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
                            {service.features_list && service.features_list.map((feat, i) => (
                                <Tag 
                                    key={i} 
                                    style={{ 
                                        margin: 0,
                                        padding: '4px 12px',
                                        background: `${service.color}11`,
                                        color: service.color,
                                        border: `1px solid ${service.color}66`,
                                        borderRadius: '6px',
                                        fontSize: '14px',
                                        backdropFilter: 'blur(4px)'
                                    }}
                                >
                                    {feat}
                                </Tag>
                            ))}
                        </div>

                        <Button 
                            type="primary" 
                            size="large" 
                            block 
                            icon={<ShoppingCartOutlined />}
                            style={{ 
                                height: 50, 
                                background: service.color, 
                                borderColor: service.color,
                                color: '#000',
                                fontWeight: 'bold'
                            }}
                            onClick={() => setIsModalOpen(true)}
                        >
                            立即咨询 / 购买
                        </Button>
                        <p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
                            * 具体价格可能因需求复杂度而异，提交需求后我们将提供详细报价单
                        </p>
                    </div>
                </div>
            </Col>
        </Row>
      </motion.div>

      {/* Purchase Modal */}
      <Modal
        title={`咨询/购买 - ${service.title}`}
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        footer={null}
        destroyOnHidden
      >
        <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式和需求，我们的技术顾问将在 24 小时内与您联系。</p>
        <Form
          form={form}
          layout="vertical"
          onFinish={handlePurchase}
        >
          <Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input placeholder="例如：张经理" />
          </Form.Item>
          <Form.Item label="公司/机构名称" name="company_name">
            <Input placeholder="例如：某某科技有限公司" />
          </Form.Item>
          <Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
            <Input placeholder="13800000000" />
          </Form.Item>
          <Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
            <Input placeholder="example@company.com" />
          </Form.Item>
          <Form.Item label="需求描述" name="requirements">
            <Input.TextArea rows={4} placeholder="请简单描述您的业务场景或具体需求..." />
          </Form.Item>
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
            <Button onClick={() => setIsModalOpen(false)}>取消</Button>
            <Button type="primary" htmlType="submit" loading={submitting}>提交需求</Button>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default ServiceDetail;