import React, { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { fetch as fetchStories } from '../../stores/stories/storiesSlice';
import UserAvatar from '../UserAvatar';
import { mdiPlus } from '@mdi/js';
import BaseIcon from '../BaseIcon';

export default function StoriesList() {
  const dispatch = useAppDispatch();
  const { stories, loading } = useAppSelector((state) => state.stories);
  const { currentUser } = useAppSelector((state) => state.auth);

  useEffect(() => {
    dispatch(fetchStories({ page: 1, limit: 20 }));
  }, [dispatch]);

  // Group stories by author
  const storiesByAuthor = stories.reduce((acc: any, story: any) => {
    const authorId = story.author?.id;
    if (!authorId) return acc;
    if (!acc[authorId]) {
      acc[authorId] = {
        author: story.author,
        stories: []
      };
    }
    acc[authorId].stories.push(story);
    return acc;
  }, {});

  const authorsWithStories = Object.values(storiesByAuthor);

  return (
    <div className="flex items-center space-x-4 overflow-x-auto pb-4 scrollbar-hide px-4">
      {/* Current User Story / Add Story */}
      <div className="flex flex-col items-center space-y-1 flex-shrink-0">
        <div className="relative p-[2px] rounded-full bg-gray-200 dark:bg-gray-800">
          <UserAvatar 
            username={currentUser?.firstName || 'Me'} 
            image={currentUser?.avatar} 
            className="w-16 h-16 border-2 border-white dark:border-[#0b0e14]" 
          />
          <div className="absolute bottom-0 right-0 bg-[#00d4ff] rounded-full p-1 border-2 border-white dark:border-[#0b0e14]">
            <BaseIcon path={mdiPlus} size={12} className="text-white" />
          </div>
        </div>
        <span className="text-[10px] dark:text-gray-400 font-medium">Your Story</span>
      </div>

      {/* Authors with Stories */}
      {authorsWithStories.map((item: any) => (
        <div key={item.author.id} className="flex flex-col items-center space-y-1 flex-shrink-0 cursor-pointer">
          <div className="p-[2px] rounded-full bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7]">
            <div className="p-[2px] bg-white dark:bg-[#0b0e14] rounded-full">
              <UserAvatar 
                username={item.author.firstName} 
                image={item.author.avatar} 
                className="w-16 h-16" 
              />
            </div>
          </div>
          <span className="text-[10px] dark:text-gray-400 font-medium truncate w-16 text-center">
            {item.author.firstName}
          </span>
        </div>
      ))}

      {loading && stories.length === 0 && (
        <div className="flex space-x-4 animate-pulse">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="flex flex-col items-center space-y-1">
              <div className="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full" />
              <div className="w-12 h-2 bg-gray-200 dark:bg-gray-800 rounded" />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
