import React, { useEffect } from 'react';
import { ProgressSpinner } from 'primereact/progressspinner';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import CommunityMessage from '@/components/feeds/messages/CommunityMessage';
import useWindowWidth from '@/hooks/useWindowWidth';

const StackerNewsIconComponent = () => (
    <svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
        <path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
    </svg>
);

const fetchStackerNews = async () => {
    const response = await axios.get('/api/stackernews');
    return response.data.data.items.items;
};

const StackerNewsFeed = ({ searchQuery }) => {
    const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
    const windowWidth = useWindowWidth();

    if (isLoading) {
        return (
            <div className="h-[100vh] min-bottom-bar:w-[86vw] max-sidebar:w-[100vw]">
                <ProgressSpinner className='w-full mt-24 mx-auto' />
            </div>
        );
    }

    if (error) {
        console.error('Error fetching Stacker News:', error);
        return <div className="text-red-500 text-center p-4">Error loading data. Please try again later.</div>;
    }

    const filteredItems = items
        .filter(item =>
            searchQuery ? item.title.toLowerCase().includes(searchQuery.toLowerCase()) : true
        )
        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

    return (
        <div className="h-full w-full">
            <div className="mx-0 mt-4">
                {filteredItems && filteredItems.length > 0 ? (
                    filteredItems.map(item => (
                        <CommunityMessage
                            key={item.id}
                            message={{
                                id: item.id,
                                author: item.user.name,
                                avatar: "https://pbs.twimg.com/profile_images/1403162883941359619/oca7LMQ2_400x400.png",
                                content: item.title,
                                timestamp: item.createdAt,
                                channel: "~devs",
                                additionalContent: `Sats: ${item.sats}`
                            }}
                            searchQuery={searchQuery}
                            windowWidth={windowWidth}
                            platform="stackernews"
                            platformIcon={<StackerNewsIconComponent />}
                            platformLink={`https://stacker.news/items/${item.id}`}
                        />
                    ))
                ) : (
                    <div className="text-gray-400 text-center p-4">No items available.</div>
                )}
            </div>
        </div>
    );
};

export default StackerNewsFeed;