import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Button, Typography, Spin, Row, Col, Empty } from 'antd';
import { ScanOutlined } from '@ant-design/icons';
import { getARServices } from '../api';

const { Title, Paragraph } = Typography;

const ARExperience = () => {
  const [scanning, setScanning] = useState(true);
  const [arServices, setArServices] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchAR = async () => {
        try {
            const res = await getARServices();
            setArServices(res.data);
        } catch (error) {
            console.error("Failed to fetch AR services:", error);
        } finally {
            setLoading(false);
        }
    }
    fetchAR();
  }, []);

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

  return (
    <div style={{ padding: '40px 0', minHeight: '80vh', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 60, position: 'relative', zIndex: 2 }}>
            <Title level={1} style={{ color: '#fff', letterSpacing: 4 }}>
                AR <span style={{ color: '#00f0ff' }}>UNIVERSE</span>
            </Title>
            <Paragraph style={{ color: '#aaa', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
                探索全息增强现实体验。请佩戴您的设备，或使用移动端摄像头扫描空间。
            </Paragraph>
        </div>

        {arServices.length === 0 ? (
            <div style={{ textAlign: 'center', marginTop: 100, zIndex: 2, position: 'relative' }}>
                <Empty description={<span style={{ color: '#666' }}>暂无 AR 体验内容</span>} />
            </div>
        ) : (
            <Row gutter={[32, 32]} justify="center" style={{ padding: '0 20px', position: 'relative', zIndex: 2 }}>
                {arServices.map((item, index) => (
                    <Col xs={24} md={12} lg={8} key={item.id}>
                        <motion.div
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: index * 0.1 }}
                            whileHover={{ scale: 1.02 }}
                        >
                            <div style={{ 
                                background: 'rgba(255,255,255,0.05)', 
                                border: '1px solid rgba(0,240,255,0.2)',
                                borderRadius: 12,
                                overflow: 'hidden',
                                height: '100%'
                            }}>
                                <div style={{ height: 200, background: '#000', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                    {item.display_cover_image ? (
                                        <img src={item.display_cover_image} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                    ) : (
                                        <ScanOutlined style={{ fontSize: 40, color: '#333' }} />
                                    )}
                                </div>
                                <div style={{ padding: 20 }}>
                                    <h3 style={{ color: '#fff', fontSize: 20 }}>{item.title}</h3>
                                    <p style={{ color: '#888', marginBottom: 20, minHeight: 44 }}>{item.description}</p>
                                    <Button type="primary" block ghost style={{ borderColor: '#00f0ff', color: '#00f0ff' }}>
                                        启动体验
                                    </Button>
                                </div>
                            </div>
                        </motion.div>
                    </Col>
                ))}
            </Row>
        )}

      {/* 装饰性背景 */}
      <div style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        background: `
          radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%)
        `,
        zIndex: 0,
        pointerEvents: 'none'
      }} />
      
      <div style={{
        position: 'fixed',
        bottom: 0,
        width: '100%',
        height: '300px',
        background: `linear-gradient(to top, rgba(0,0,0,0.8), transparent)`,
        zIndex: 1,
        pointerEvents: 'none'
      }} />

    </div>
  );
};

export default ARExperience;
