import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Button, Typography, Spin, Row, Col, Empty, Tag } from 'antd';
import { ReadOutlined, ClockCircleOutlined, UserOutlined, BookOutlined } from '@ant-design/icons';
import { getVBCourses } from '../api';

const { Title, Paragraph } = Typography;

const VBCourses = () => {
  const [courses, setCourses] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchCourses = async () => {
        try {
            const res = await getVBCourses();
            setCourses(res.data);
        } catch (error) {
            console.error("Failed to fetch VB Courses:", error);
        } finally {
            setLoading(false);
        }
    }
    fetchCourses();
  }, []);

  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 }}>
                VB <span style={{ color: '#00f0ff' }}>CODING COURSES</span>
            </Title>
            <Paragraph style={{ color: '#aaa', fontSize: 18, maxWidth: 600, margin: '0 auto' }}>
                探索 Vibe Coding 软件与硬件课程，开启您的编程之旅。
            </Paragraph>
        </div>

        {courses.length === 0 ? (
            <div style={{ textAlign: 'center', marginTop: 100, zIndex: 2, position: 'relative' }}>
                <Empty description={<span style={{ color: '#666' }}>暂无课程内容</span>} />
            </div>
        ) : (
            <Row gutter={[32, 32]} justify="center" style={{ padding: '0 20px', position: 'relative', zIndex: 2 }}>
                {courses.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%',
                                display: 'flex',
                                flexDirection: 'column'
                            }}>
                                <div style={{ height: 200, background: '#000', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                                    {item.display_cover_image ? (
                                        <img src={item.display_cover_image} alt={item.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                    ) : (
                                        <ReadOutlined style={{ fontSize: 40, color: '#333' }} />
                                    )}
                                    <div style={{ position: 'absolute', top: 10, right: 10, display: 'flex', gap: '5px' }}>
                                        {item.tag && (
                                            <Tag color="volcano" style={{ marginRight: 0 }}>{item.tag}</Tag>
                                        )}
                                        <Tag color={item.course_type === 'hardware' ? 'purple' : 'cyan'}>
                                            {item.course_type_display || (item.course_type === 'hardware' ? '硬件课程' : '软件课程')}
                                        </Tag>
                                    </div>
                                </div>
                                <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
                                    <h3 style={{ color: '#fff', fontSize: 20, marginBottom: 10 }}>{item.title}</h3>
                                    <div style={{ color: '#888', marginBottom: 15, fontSize: 14 }}>
                                        <span style={{ marginRight: 15 }}><UserOutlined /> {item.instructor}</span>
                                        <span style={{ marginRight: 15 }}><ClockCircleOutlined /> {item.duration}</span>
                                        <span><BookOutlined /> {item.lesson_count} 课时</span>
                                    </div>
                                    <p style={{ color: '#aaa', marginBottom: 20, flex: 1 }}>{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 VBCourses;