import React, { useState, useEffect } from 'react';
import { Typography, Input, Button, List, Tag, Avatar, Card, Space, Spin, message, Badge, Tooltip, Tabs, Row, Col } from 'antd';
import { SearchOutlined, PlusOutlined, UserOutlined, MessageOutlined, EyeOutlined, CheckCircleFilled, FireOutlined, StarFilled, QuestionCircleOutlined, ShareAltOutlined, SoundOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { getTopics, getStarUsers, getAnnouncements } from '../api';
import { useAuth } from '../context/AuthContext';
import CreateTopicModal from '../components/CreateTopicModal';
import LoginModal from '../components/LoginModal';

const { Title, Text, Paragraph } = Typography;

const ForumList = () => {
  const navigate = useNavigate();
  const { user } = useAuth();
  
  const [loading, setLoading] = useState(true);
  const [topics, setTopics] = useState([]);
  const [starUsers, setStarUsers] = useState([]);
  const [announcements, setAnnouncements] = useState([]);
  const [searchText, setSearchText] = useState('');
  const [category, setCategory] = useState('all');
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [loginModalVisible, setLoginModalVisible] = useState(false);

  const fetchTopics = async (search = '', cat = '') => {
    setLoading(true);
    try {
      const params = {};
      if (search) params.search = search;
      if (cat && cat !== 'all') params.category = cat;
      
      const res = await getTopics(params);
      setTopics(res.data.results || res.data); // Support pagination result or list
    } catch (error) {
      console.error(error);
      message.error('获取帖子列表失败');
    } finally {
      setLoading(false);
    }
  };

  const fetchStarUsers = async () => {
      try {
          const res = await getStarUsers();
          setStarUsers(res.data);
      } catch (error) {
          console.error("Fetch star users failed", error);
      }
  };

  const fetchAnnouncements = async () => {
      try {
          const res = await getAnnouncements();
          setAnnouncements(res.data.results || res.data);
      } catch (error) {
          console.error("Fetch announcements failed", error);
      }
  };

  useEffect(() => {
    fetchTopics(searchText, category);
    fetchStarUsers();
    fetchAnnouncements();
  }, [category]);

  const handleSearch = (value) => {
    setSearchText(value);
    fetchTopics(value, category);
  };

  const handleCreateClick = () => {
    if (!user) {
      setLoginModalVisible(true);
      return;
    }
    setCreateModalVisible(true);
  };

  const getCategoryIcon = (cat) => {
      switch(cat) {
          case 'help': return <QuestionCircleOutlined style={{ color: '#faad14' }} />;
          case 'share': return <ShareAltOutlined style={{ color: '#1890ff' }} />;
          case 'notice': return <SoundOutlined style={{ color: '#ff4d4f' }} />;
          default: return <MessageOutlined style={{ color: '#00b96b' }} />;
      }
  };

  const getCategoryLabel = (cat) => {
      switch(cat) {
          case 'help': return '求助';
          case 'share': return '分享';
          case 'notice': return '公告';
          default: return '讨论';
      }
  };

  const items = [
    { key: 'all', label: '全部话题' },
    { key: 'discussion', label: '技术讨论' },
    { key: 'help', label: '求助问答' },
    { key: 'share', label: '经验分享' },
    { key: 'notice', label: '官方公告' },
  ];

  return (
    <div style={{ minHeight: '100vh', paddingBottom: 60 }}>
      {/* Hero Section */}
      <div style={{ 
        textAlign: 'center', 
        padding: '80px 20px 40px', 
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%)'
      }}>
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <Title level={1} style={{ color: '#fff', fontFamily: "'Orbitron', sans-serif", marginBottom: 10 }}>
            <span style={{ color: '#00b96b' }}>Quant Speed</span> Developer Community
          </Title>
          <Text style={{ color: '#888', fontSize: 18, maxWidth: 600, display: 'block', margin: '0 auto 30px' }}>
            技术交流 · 硬件开发 · 官方支持
          </Text>
        </motion.div>

        <div style={{ maxWidth: 600, margin: '0 auto', display: 'flex', gap: 10 }}>
          <Input 
            size="large" 
            placeholder="搜索感兴趣的话题..." 
            prefix={<SearchOutlined style={{ color: '#666' }} />}
            style={{ borderRadius: 8, background: 'rgba(255,255,255,0.1)', border: '1px solid #333', color: '#fff' }}
            onChange={(e) => setSearchText(e.target.value)}
            onPressEnter={(e) => handleSearch(e.target.value)}
          />
          <Button 
            type="primary" 
            size="large" 
            icon={<PlusOutlined />} 
            onClick={handleCreateClick}
            style={{ height: 'auto', borderRadius: 8 }}
          >
            发布新帖
          </Button>
        </div>
      </div>

      {/* Content Section */}
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px' }}>
        <Row gutter={24}>
            <Col xs={24} md={18}>
                <Tabs 
                    defaultActiveKey="all" 
                    items={items} 
                    onChange={setCategory}
                    tabBarStyle={{ color: '#fff' }}
                />
                <List
                    loading={loading}
                    itemLayout="vertical"
                    dataSource={topics}
                    renderItem={(item) => (
                        <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        >
                        <Card
                            hoverable
                            style={{ 
                            marginBottom: 16, 
                            background: 'rgba(20,20,20,0.6)', 
                            border: item.is_pinned ? '1px solid rgba(0, 185, 107, 0.4)' : '1px solid rgba(255,255,255,0.1)',
                            backdropFilter: 'blur(10px)',
                            boxShadow: item.is_pinned ? '0 0 10px rgba(0, 185, 107, 0.1)' : 'none'
                            }}
                            bodyStyle={{ padding: '20px 24px' }}
                            onClick={() => navigate(`/forum/${item.id}`)}
                        >
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                            <div style={{ flex: 1 }}>
                                <div style={{ marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                                {item.is_pinned && <Tag color="red" icon={<FireOutlined />}>置顶</Tag>}
                                <Tag icon={getCategoryIcon(item.category)} style={{ background: 'transparent', color: '#fff', border: '1px solid #444' }}>
                                    {getCategoryLabel(item.category)}
                                </Tag>
                                {item.is_verified_owner && (
                                    <Tooltip title="已验证购买过相关产品">
                                    <Tag icon={<CheckCircleFilled />} color="#00b96b" style={{ margin: 0 }}>认证用户</Tag>
                                    </Tooltip>
                                )}
                                <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold', cursor: 'pointer' }}>
                                    {item.title}
                                </Text>
                                </div>
                                
                                <Paragraph 
                                ellipsis={{ rows: 2 }} 
                                style={{ color: '#aaa', marginBottom: 12, fontSize: 14 }}
                                >
                                {item.content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')} {/* Simple markdown strip */}
                                </Paragraph>
                                
                                {item.content.match(/!\[.*?\]\((.*?)\)/) && (
                                    <div style={{ marginBottom: 12 }}>
                                        <img 
                                            src={item.content.match(/!\[.*?\]\((.*?)\)/)[1]} 
                                            alt="cover" 
                                            style={{ maxHeight: 150, borderRadius: 8, maxWidth: '100%' }} 
                                        />
                                    </div>
                                )}

                                <Space size="middle" style={{ color: '#666', fontSize: 13 }}>
                                <Space>
                                    <Avatar src={item.author_info?.avatar_url} icon={<UserOutlined />} size="small" />
                                    <Text style={{ color: item.author_info?.is_star ? '#ffd700' : '#888', fontWeight: item.author_info?.is_star ? 'bold' : 'normal' }}>
                                        {item.author_info?.nickname || '匿名用户'}
                                    </Text>
                                    {item.author_info?.is_star && (
                                        <Tooltip title={item.author_info.title || "技术专家"}>
                                            <StarFilled style={{ color: '#ffd700' }} />
                                        </Tooltip>
                                    )}
                                </Space>
                                <span>•</span>
                                <span>{new Date(item.created_at).toLocaleDateString()}</span>
                                {item.product_info && (
                                    <Tag color="blue" style={{ marginLeft: 8 }}>{item.product_info.name}</Tag>
                                )}
                                </Space>
                            </div>

                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, minWidth: 80 }}>
                                <div style={{ textAlign: 'center' }}>
                                <MessageOutlined style={{ fontSize: 16, color: '#00b96b' }} />
                                <div style={{ color: '#fff', fontWeight: 'bold' }}>{item.replies?.length || 0}</div>
                                </div>
                                <div style={{ textAlign: 'center', marginTop: 5 }}>
                                <EyeOutlined style={{ fontSize: 16, color: '#666' }} />
                                <div style={{ color: '#888', fontSize: 12 }}>{item.view_count || 0}</div>
                                </div>
                            </div>
                            </div>
                        </Card>
                        </motion.div>
                    )}
                    locale={{ emptyText: <div style={{ color: '#666', padding: 40 }}>暂无帖子，来发布第一个吧！</div> }}
                />
            </Col>
            
            <Col xs={0} md={6}>
                <Card 
                    title={<Space><StarFilled style={{ color: '#ffd700' }} /><span style={{ color: '#fff' }}>技术专家榜</span></Space>}
                    style={{ background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
                >
                    <div style={{ textAlign: 'center', padding: '20px 0', color: '#666' }}>
                        {starUsers.length > 0 ? (
                            starUsers.map(u => (
                                <div key={u.id} style={{ marginBottom: 15, display: 'flex', alignItems: 'center', gap: 10 }}>
                                    <Avatar size="large" src={u.avatar_url} icon={<UserOutlined />} />
                                    <div style={{ textAlign: 'left' }}>
                                        <div style={{ color: '#fff', fontWeight: 'bold' }}>
                                            {u.nickname} <StarFilled style={{ color: '#ffd700', fontSize: 12 }} />
                                        </div>
                                        <div style={{ color: '#666', fontSize: 12 }}>{u.title || '技术专家'}</div>
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div style={{ color: '#888' }}>暂无上榜专家</div>
                        )}
                    </div>
                </Card>
                
                <Card 
                    title={<Space><SoundOutlined style={{ color: '#ff4d4f' }} /><span style={{ color: '#fff' }}>社区公告</span></Space>}
                    style={{ marginTop: 20, background: 'rgba(20,20,20,0.6)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)' }}
                    headStyle={{ borderBottom: '1px solid rgba(255,255,255,0.1)' }}
                >
                    <List
                        size="small"
                        dataSource={announcements}
                        renderItem={item => (
                            <List.Item style={{ padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'block' }}>
                                {item.display_image_url && (
                                    <div style={{ marginBottom: 8 }}>
                                        <img src={item.display_image_url} alt={item.title} style={{ width: '100%', borderRadius: 4 }} />
                                    </div>
                                )}
                                <div style={{ color: '#fff', marginBottom: 4, fontWeight: 'bold' }}>
                                    {item.link_url ? (
                                        <a href={item.link_url} target="_blank" rel="noopener noreferrer" style={{ color: '#fff' }}>{item.title}</a>
                                    ) : (
                                        <span>{item.title}</span>
                                    )}
                                </div>
                                 <div style={{ color: '#888', fontSize: 12 }}>
                                    {item.content}
                                </div>
                            </List.Item>
                        )}
                        locale={{ emptyText: <div style={{ color: '#666', padding: '20px 0', textAlign: 'center' }}>暂无公告</div> }}
                    />
                </Card>
            </Col>
        </Row>
      </div>

      <CreateTopicModal 
        visible={createModalVisible}
        onClose={() => setCreateModalVisible(false)}
        onSuccess={() => fetchTopics(searchText, category)}
      />
      
      <LoginModal
        visible={loginModalVisible}
        onClose={() => setLoginModalVisible(false)}
        onLoginSuccess={() => {
             setCreateModalVisible(true);
        }}
      />
    </div>
  );
};

export default ForumList;
