import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router';
import { Button, Tabs, message, Spin, Tag, Typography, Space, Divider } from 'antd';
import { ArrowLeftOutlined, LikeOutlined, BugOutlined, CommentOutlined } from '@ant-design/icons';
import WorkAPI from '../../api/workApi';
import BugReportSection from '../../components/BugReportSection';
import DiscussionSection from '../../components/DiscussionSection';
import type { Work } from '../../api/otherType';

const { Title, Text, Paragraph } = Typography;
const { TabPane } = Tabs;

const WorkPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [work, setWork] = useState<Work | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('details');

  // 加载作品数据
  useEffect(() => {
    const loadWork = async () => {
      try {
        const workData = await WorkAPI.getWorkById(Number(id));
        setWork(workData);
      } catch (error) {
        message.error('加载作品失败');
        navigate('/');
      } finally {
        setLoading(false);
      }
    };

    loadWork();
  }, [id, navigate]);

  // 点赞处理
  const handleLike = async () => {
    try {
      await WorkAPI.likeWork(Number(id));
      setWork(prev => prev ? { ...prev, likes: prev.likes + 1 } : null);
      message.success('点赞成功');
    } catch (error) {
      message.error('点赞失败');
    }
  };

  if (loading) {
    return <Spin size="large" className="center-spinner" />;
  }

  if (!work) {
    return <div>作品不存在</div>;
  }

  return (
    <div className="work-page-container">
      <Button 
        type="text" 
        icon={<ArrowLeftOutlined />} 
        onClick={() => navigate(-1)}
        className="back-button"
      >
        返回
      </Button>

      <div className="work-header">
        <Title level={2}>{work.title}</Title>
        <Text type="secondary">作者: {work.author}</Text>
        
        <div className="work-meta">
          <Space size="middle">
            <Tag color="blue">{work.categoryName}</Tag>
            <Text>浏览: {work.views}</Text>
            <Text>点赞: {work.likes}</Text>
            <Text>上传时间: {new Date(work.createTime).toLocaleDateString()}</Text>
          </Space>
        </div>

        <Button 
          type="primary" 
          icon={<LikeOutlined />} 
          onClick={handleLike}
          className="like-button"
        >
          点赞
        </Button>
      </div>

      <Divider />

      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="作品详情" key="details">
          <div className="work-content">
            <Title level={4}>作品描述</Title>
            <Paragraph>{work.description}</Paragraph>
            
            <Title level={4}>作品内容</Title>
            <div className="content-container">
              {work.content}
            </div>
          </div>
        </TabPane>

        <TabPane 
          tab={
            <span>
              <BugOutlined /> Bug反馈
            </span>
          } 
          key="bugs"
        >
          <BugReportSection workId={work.id} />
        </TabPane>

        <TabPane 
          tab={
            <span>
              <CommentOutlined /> 交流区
            </span>
          } 
          key="discussions"
        >
          <DiscussionSection workId={work.id} />
        </TabPane>
      </Tabs>
    </div>
  );
};

export default WorkPage;