import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Card, 
  Badge, 
  Table, 
  Avatar, 
  Button, 
  Space, 
  Tag, 
  Typography, 
  Select, 
  Drawer, 
  Form,
  Empty,
  Spin
} from 'antd';
import { 
  UserOutlined, 
  VerifiedOutlined, 
  ShopOutlined, 
  FilterOutlined,
  YoutubeOutlined,
  InstagramOutlined,
  LinkedinOutlined,
  FacebookOutlined,
  GlobalOutlined,
  MessageOutlined
} from '@ant-design/icons';
import { format } from 'date-fns';
import supabase from '../utils/supabase';

// API response type definition based on backend structure
interface ApiPost {
  post_id: string;
  title: string;
  description: string;
  platform: string;
  post_url: string;
  published_at: string;
  updated_at: string;
  influencer_id: string;
  views_count?: number;
  likes_count?: number;
  comments_count?: number;
  shares_count?: number;
  influencer?: {
    influencer_id: string;
    name: string;
    platform: string;
    profile_url: string;
    followers_count: number;
  };
}

// Frontend representation of a post
interface FrontendPost {
  id: string;
  title: string;
  description: string;
  author: string;
  authorType: 'influencer' | 'brand' | 'official';
  platform: 'youtube' | 'instagram' | 'facebook' | 'linkedin' | 'tiktok';
  contentType: 'post' | 'video' | 'reel' | 'short';
  timestamp: string;
  engagement: {
    views?: number;
    likes?: number;
    comments?: number;
    shares?: number;
  };
  url?: string;
}

interface PostListProps {
  influencerId?: string; // Optional influencer ID to filter posts by influencer
  projectId?: string; // Optional project ID to filter posts by project
}

const { Text, Title } = Typography;
const { Option } = Select;

const PostList: React.FC<PostListProps> = ({ influencerId, projectId }) => {
  const navigate = useNavigate();
  const [posts, setPosts] = useState<FrontendPost[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedPost, setSelectedPost] = useState<FrontendPost | null>(null);
  const [platformFilter, setPlatformFilter] = useState<string>('all');
  const [contentTypeFilter, setContentTypeFilter] = useState<string>('all');
  const [showFilters, setShowFilters] = useState<boolean>(false);
  const [totalPosts, setTotalPosts] = useState<number>(0);
  const [offset, setOffset] = useState<number>(0);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
  const observer = useRef<IntersectionObserver | null>(null);
  const loadMoreRef = useRef<HTMLDivElement>(null);
  
  // Fetch posts data
  const fetchPosts = async () => {
    setLoading(true);
    setError(null);
    setPosts([]);
    setOffset(0);
    setHasMore(true);
    
    try {
      // Build query parameters
      const params = new URLSearchParams();
      const pageSize = 20;
      params.append('limit', pageSize.toString());
      params.append('offset', '0');
      params.append('sort', 'published_at');
      params.append('order', 'desc');
      
      if (platformFilter && platformFilter !== 'all') {
        params.append('platform', platformFilter);
      }
      
      if (influencerId) {
        params.append('influencer_id', influencerId);
      }
      
      if (projectId) {
        params.append('project_id', projectId);
      }
      
      // Get auth token from Supabase
      const { data: { session } } = await supabase.auth.getSession();
      const token = session?.access_token;
      
      if (!token) {
        console.error('Authentication token not found');
        setError('Authentication required. Please log in again.');
        setLoading(false);
        // Fall back to mock data if no token
        const mockData = getMockPosts();
        setPosts(mockData);
        setTotalPosts(mockData.length);
        setHasMore(false);
        return;
      }
      
      // Make API request
      const response = await fetch(`http://localhost:4000/api/posts?${params.toString()}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        }
      });
      
      if (response.status === 401) {
        console.error('Authentication failed: Unauthorized');
        setError('Your session has expired. Please log in again.');
        // Fall back to mock data on auth error
        const mockData = getMockPosts();
        setPosts(mockData);
        setTotalPosts(mockData.length);
        setHasMore(false);
        setLoading(false);
        return;
      }
      
      if (!response.ok) {
        throw new Error(`API request failed with status: ${response.status}`);
      }
      
      const data = await response.json();
      
      if (data && Array.isArray(data.posts)) {
        // Transform API posts to frontend format
        const frontendPosts: FrontendPost[] = data.posts.map((apiPost: ApiPost) => ({
          id: apiPost.post_id,
          title: apiPost.title || 'Untitled Post',
          description: apiPost.description || '',
          author: apiPost.influencer?.name || 'Unknown Author',
          authorType: 'influencer', // Default to influencer
          platform: apiPost.platform as FrontendPost['platform'], // Cast to expected platform type
          contentType: determineContentType(apiPost),
          timestamp: apiPost.published_at,
          engagement: {
            views: apiPost.views_count,
            likes: apiPost.likes_count,
            comments: apiPost.comments_count,
            shares: apiPost.shares_count
          },
          url: apiPost.post_url
        }));
        
        setPosts(frontendPosts);
        setTotalPosts(data.total || frontendPosts.length);
        setOffset(frontendPosts.length);
        setHasMore(frontendPosts.length === pageSize);
      } else {
        console.warn('Invalid data format received from API, using mock data');
        // Fall back to mock data if API response format is unexpected
        const mockData = getMockPosts();
        setPosts(mockData);
        setTotalPosts(mockData.length);
        setHasMore(false);
      }
    } catch (err) {
      console.error('Error fetching posts:', err);
      setError('Failed to fetch posts. Using mock data instead.');
      // Fall back to mock data on error
      const mockData = getMockPosts();
      setPosts(mockData);
      setTotalPosts(mockData.length);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  };
  
  // Filter posts based on selected filters
  const filteredPosts = posts.filter((post) => {
    if (platformFilter !== 'all' && post.platform !== platformFilter) {
      return false;
    }
    
    if (contentTypeFilter !== 'all' && post.contentType !== contentTypeFilter) {
      return false;
    }
    
    return true;
  });
  
  // Get platform icon
  const getPlatformIcon = (platform: string) => {
    switch (platform) {
      case 'youtube':
        return <YoutubeOutlined style={{ color: '#FF0000' }} />;
      case 'instagram':
        return <InstagramOutlined style={{ color: '#E1306C' }} />;
      case 'facebook':
        return <FacebookOutlined style={{ color: '#1877F2' }} />;
      case 'linkedin':
        return <LinkedinOutlined style={{ color: '#0A66C2' }} />;
      default:
        return <GlobalOutlined />;
    }
  };
  
  // Get content type badge
  const getContentTypeBadge = (contentType?: string) => {
    if (!contentType) return null;
    
    switch (contentType) {
      case 'post':
        return <Tag color="blue">Post</Tag>;
      case 'video':
        return <Tag color="green">Video</Tag>;
      case 'reel':
        return <Tag color="purple">Reel</Tag>;
      case 'short':
        return <Tag color="orange">Short</Tag>;
      default:
        return null;
    }
  };
  
  // Get author type badge
  const getAuthorTypeBadge = (authorType: string) => {
    switch (authorType) {
      case 'influencer':
        return <Badge count={<UserOutlined style={{ color: '#1890ff' }} />} />;
      case 'brand':
        return <Badge count={<ShopOutlined style={{ color: '#52c41a' }} />} />;
      case 'official':
        return <Badge count={<VerifiedOutlined style={{ color: '#722ed1' }} />} />;
      default:
        return null;
    }
  };
  
  // Get platform name
  const getPlatformName = (platform: string) => {
    switch (platform) {
      case 'youtube':
        return 'YouTube';
      case 'instagram':
        return 'Instagram';
      case 'facebook':
        return 'Facebook';
      case 'linkedin':
        return 'LinkedIn';
      case 'tiktok':
        return 'TikTok';
      default:
        return platform;
    }
  };
  
  // Handle post click to view comments
  const handleViewComments = (postId: string) => {
    navigate(`/comments?post_id=${postId}`);
  };
  
  // 根据帖子信息确定内容类型
  const determineContentType = (apiPost: ApiPost): 'post' | 'video' | 'reel' | 'short' => {
    const platform = apiPost.platform?.toLowerCase();
    const url = apiPost.post_url?.toLowerCase() || '';
    
    if (platform === 'youtube') {
      if (url.includes('/shorts/')) {
        return 'short';
      }
      return 'video';
    }
    
    if (platform === 'instagram') {
      if (url.includes('/reel/')) {
        return 'reel';
      }
      return 'post';
    }
    
    if (platform === 'tiktok') {
      return 'short';
    }
    
    return 'post';
  };
  
  // Helper function to get mock posts (extracted from useMockData)
  const getMockPosts = (): FrontendPost[] => {
    return [
      {
        id: '1',
        title: 'How to Get Started with React',
        description: 'A beginner-friendly guide to React development',
        author: 'Jane Smith',
        authorType: 'influencer',
        platform: 'youtube',
        contentType: 'video',
        timestamp: '2023-05-15T14:30:00Z',
        engagement: {
          views: 15000,
          likes: 1200,
          comments: 85,
          shares: 320
        },
        url: 'https://youtube.com/watch?v=abc123'
      },
      // ... add more mock posts as needed
    ];
  };
  
  // 加载更多数据的函数
  const loadMorePosts = useCallback(async () => {
    if (isLoadingMore || !hasMore) return;
    
    console.log('Loading more posts from offset:', offset);
    setIsLoadingMore(true);
    try {
      // 构建查询参数
      const params = new URLSearchParams();
      const pageSize = 20;
      params.append('limit', pageSize.toString());
      params.append('offset', offset.toString());
      params.append('sort', 'published_at');
      params.append('order', 'desc');
      
      if (platformFilter && platformFilter !== 'all') {
        params.append('platform', platformFilter);
      }
      
      if (influencerId) {
        params.append('influencer_id', influencerId);
      }
      
      if (projectId) {
        params.append('project_id', projectId);
      }
      
      // 获取认证token
      const token = await getAuthToken();
      
      if (!token) {
        console.error('Authentication token not found');
        setError('Authentication required. Please log in again.');
        setIsLoadingMore(false);
        return;
      }
      
      console.log('Fetching more posts with params:', params.toString());
      
      // 发送API请求
      const response = await fetch(`http://localhost:4000/api/posts?${params.toString()}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        }
      });
      
      if (response.status === 401) {
        console.error('Authentication failed: Unauthorized');
        setError('Your session has expired. Please log in again.');
        setIsLoadingMore(false);
        return;
      }
      
      if (!response.ok) {
        throw new Error(`API request failed with status: ${response.status}`);
      }
      
      const data = await response.json();
      console.log('Received more posts:', data?.posts?.length || 0);
      
      if (data && Array.isArray(data.posts)) {
        // 转换API返回的数据为前端需要的格式
        const newPosts: FrontendPost[] = data.posts.map((apiPost: ApiPost) => ({
          id: apiPost.post_id,
          title: apiPost.title || 'Untitled Post',
          description: apiPost.description || '',
          author: apiPost.influencer?.name || 'Unknown Author',
          authorType: 'influencer', // 默认为influencer类型
          platform: apiPost.platform as FrontendPost['platform'],
          contentType: determineContentType(apiPost),
          timestamp: apiPost.published_at,
          engagement: {
            views: apiPost.views_count,
            likes: apiPost.likes_count,
            comments: apiPost.comments_count,
            shares: apiPost.shares_count
          },
          url: apiPost.post_url
        }));
        
        // 更新状态
        setPosts(prevPosts => [...prevPosts, ...newPosts]);
        setTotalPosts(data.total || totalPosts);
        setOffset(prevOffset => prevOffset + newPosts.length);
        
        // 检查是否还有更多数据
        setHasMore(newPosts.length === pageSize);
        
        console.log('Updated posts count:', posts.length + newPosts.length);
      } else {
        // 如果没有更多数据
        console.log('No more posts available');
        setHasMore(false);
      }
    } catch (err) {
      console.error('Error fetching more posts:', err);
      setError('Failed to fetch more posts.');
    } finally {
      setIsLoadingMore(false);
    }
  }, [offset, platformFilter, influencerId, projectId, isLoadingMore, hasMore, totalPosts, posts.length]);

  // 设置Intersection Observer来监测滚动
  useEffect(() => {
    if (loading) return;
    
    if (observer.current) {
      observer.current.disconnect();
    }
    
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore && !isLoadingMore) {
        console.log('Intersection observed, loading more posts...');
        loadMorePosts();
      }
    }, { 
      rootMargin: '100px', // 提前100px触发加载
      threshold: 0.1 // 降低阈值，使其更容易触发
    });
    
    if (loadMoreRef.current) {
      observer.current.observe(loadMoreRef.current);
    }
    
    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [loading, hasMore, isLoadingMore, loadMorePosts]);
  
  // 在组件加载时获取数据
  useEffect(() => {
    console.log('Fetching initial posts data...');
    fetchPosts();
    
    // 组件卸载时清理
    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [influencerId, projectId, platformFilter]);
  
  // 获取Supabase会话和token的函数
  const getAuthToken = async () => {
    try {
      // 尝试从localStorage中查找Supabase token
      // Supabase通常将token存储在以sb-开头的键中
      const keys = Object.keys(localStorage);
      const supabaseTokenKey = keys.find(key => key.startsWith('sb-') && localStorage.getItem(key)?.includes('access_token'));
      
      if (supabaseTokenKey) {
        try {
          const supabaseData = JSON.parse(localStorage.getItem(supabaseTokenKey) || '{}');
          return supabaseData.access_token;
        } catch (e) {
          console.error('Error parsing Supabase token:', e);
        }
      }
      
      // 如果没有找到Supabase token，尝试使用常规token
      return localStorage.getItem('token');
    } catch (error) {
      console.error('Error getting auth token:', error);
      return null;
    }
  };
  
  if (error) {
    return <div>{error}</div>;
  }
  
  return (
    <div className="post-list-container">
      <Card 
        title="Posts" 
        extra={
          <Space>
            <Button 
              icon={<FilterOutlined />} 
              onClick={() => setShowFilters(true)}
            >
              Filters
            </Button>
          </Space>
        }
        loading={loading}
        className="mb-4"
      >
        <Table 
          dataSource={filteredPosts}
          rowKey="id"
          pagination={false}
          onRow={(post) => ({
            onClick: () => handleViewComments(post.id),
            style: { cursor: 'pointer' }
          })}
          columns={[
            {
              title: 'Post',
              dataIndex: 'title',
              key: 'title',
              render: (_: unknown, post: FrontendPost) => (
                <div>
                  <Space align="start">
                    {getPlatformIcon(post.platform)}
                    <div>
                      <div>
                        <Text strong>{post.title}</Text> {' '}
                        {getContentTypeBadge(post.contentType)}
                      </div>
                      <div>
                        <Text type="secondary" ellipsis={{ tooltip: post.description }}>
                          {post.description?.length > 80 
                            ? `${post.description.substring(0, 80)}...` 
                            : post.description}
                        </Text>
                      </div>
                      <div style={{ marginTop: 4 }}>
                        <Space size={16}>
                          <Text type="secondary">
                            {format(new Date(post.timestamp), 'MMM d, yyyy')}
                          </Text>
                          {post.url && (
                            <a 
                              href={post.url} 
                              target="_blank" 
                              rel="noopener noreferrer"
                              onClick={(e) => e.stopPropagation()} // Prevent row click when clicking the link
                            >
                              View Post
                            </a>
                          )}
                        </Space>
                      </div>
                    </div>
                  </Space>
                </div>
              ),
            },
            {
              title: 'Author',
              dataIndex: 'author',
              key: 'author',
              render: (_: unknown, post: FrontendPost) => (
                <Space>
                  <Avatar icon={<UserOutlined />} />
                  <Text>{post.author}</Text>
                  {getAuthorTypeBadge(post.authorType)}
                </Space>
              ),
            },
            {
              title: 'Platform',
              dataIndex: 'platform',
              key: 'platform',
              render: (platform: string) => getPlatformName(platform),
            },
            {
              title: 'Engagement',
              key: 'engagement',
              render: (_: unknown, post: FrontendPost) => (
                <Space direction="vertical" size={0}>
                  {post.engagement.views !== undefined && (
                    <Text>Views: {post.engagement.views.toLocaleString()}</Text>
                  )}
                  {post.engagement.likes !== undefined && (
                    <Text>Likes: {post.engagement.likes.toLocaleString()}</Text>
                  )}
                  {post.engagement.comments !== undefined && (
                    <Text>Comments: {post.engagement.comments.toLocaleString()}</Text>
                  )}
                  {post.engagement.shares !== undefined && (
                    <Text>Shares: {post.engagement.shares.toLocaleString()}</Text>
                  )}
                </Space>
              ),
            },
            {
              title: 'Actions',
              key: 'actions',
              render: (_: unknown, post: FrontendPost) => (
                <Space>
                  <Button 
                    type="link" 
                    onClick={(e) => {
                      e.stopPropagation(); // Prevent row click
                      setSelectedPost(post);
                    }}
                  >
                    Details
                  </Button>
                  <Button
                    type="link"
                    icon={<MessageOutlined />}
                    onClick={(e) => {
                      e.stopPropagation(); // Prevent row click
                      handleViewComments(post.id);
                    }}
                  >
                    Comments
                  </Button>
                </Space>
              ),
            },
          ]}
          scroll={{ x: 'max-content' }}
        />
        
        {/* 无限滚动加载指示器 */}
        <div 
          ref={loadMoreRef} 
          style={{ 
            textAlign: 'center', 
            padding: '20px 0',
            visibility: loading || !hasMore ? 'hidden' : 'visible'
          }}
        >
          {isLoadingMore && (
            <div className="py-4">
              <Spin tip="Loading more posts..." />
            </div>
          )}
          {!hasMore && posts.length > 0 && (
            <div className="py-4 text-gray-500">
              No more posts to load
            </div>
          )}
          {!hasMore && posts.length === 0 && !loading && (
            <Empty description="No posts found" />
          )}
        </div>
      </Card>
      
      {/* Filters Drawer */}
      <Drawer
        title="Filters"
        placement="right"
        onClose={() => setShowFilters(false)}
        open={showFilters}
        width={300}
      >
        <Form layout="vertical">
          <Form.Item label="Platform">
            <Select 
              value={platformFilter} 
              onChange={(value: string) => setPlatformFilter(value)}
              style={{ width: '100%' }}
            >
              <Option value="all">All Platforms</Option>
              <Option value="youtube">YouTube</Option>
              <Option value="instagram">Instagram</Option>
              <Option value="facebook">Facebook</Option>
              <Option value="linkedin">LinkedIn</Option>
              <Option value="tiktok">TikTok</Option>
            </Select>
          </Form.Item>
          
          <Form.Item label="Content Type">
            <Select 
              value={contentTypeFilter} 
              onChange={(value: string) => setContentTypeFilter(value)}
              style={{ width: '100%' }}
            >
              <Option value="all">All Types</Option>
              <Option value="post">Post</Option>
              <Option value="video">Video</Option>
              <Option value="reel">Reel</Option>
              <Option value="short">Short</Option>
            </Select>
          </Form.Item>
        </Form>
      </Drawer>
      
      {/* Post Detail Drawer */}
      <Drawer
        title="Post Details"
        placement="right"
        onClose={() => setSelectedPost(null)}
        open={!!selectedPost}
        width={500}
      >
        {selectedPost && (
          <div>
            <Title level={4}>{selectedPost.title}</Title>
            <Space>
              {getPlatformIcon(selectedPost.platform)}
              <Text>{getPlatformName(selectedPost.platform)}</Text>
              {getContentTypeBadge(selectedPost.contentType)}
            </Space>
            
            <div style={{ margin: '16px 0' }}>
              <Text>{selectedPost.description}</Text>
            </div>
            
            <div style={{ margin: '16px 0' }}>
              <Text strong>Author:</Text> {selectedPost.author} {getAuthorTypeBadge(selectedPost.authorType)}
            </div>
            
            <div style={{ margin: '16px 0' }}>
              <Text strong>Published:</Text> {format(new Date(selectedPost.timestamp), 'PPP')}
            </div>
            
            <Card title="Engagement Statistics">
              <Space direction="vertical" size={8} style={{ width: '100%' }}>
                {selectedPost.engagement.views !== undefined && (
                  <div>
                    <Text strong>Views:</Text> {selectedPost.engagement.views.toLocaleString()}
                  </div>
                )}
                {selectedPost.engagement.likes !== undefined && (
                  <div>
                    <Text strong>Likes:</Text> {selectedPost.engagement.likes.toLocaleString()}
                  </div>
                )}
                {selectedPost.engagement.comments !== undefined && (
                  <div>
                    <Text strong>Comments:</Text> {selectedPost.engagement.comments.toLocaleString()}
                  </div>
                )}
                {selectedPost.engagement.shares !== undefined && (
                  <div>
                    <Text strong>Shares:</Text> {selectedPost.engagement.shares.toLocaleString()}
                  </div>
                )}
              </Space>
            </Card>
            
            {selectedPost.url && (
              <div style={{ marginTop: 16 }}>
                <Button type="primary" href={selectedPost.url} target="_blank">
                  View Original Post
                </Button>
              </div>
            )}
          </div>
        )}
      </Drawer>
    </div>
  );
};

export default PostList;