'use client';

import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function RecentChats() {
    const router = useRouter();
    const [me, setMe] = useState('');
    const [allChats, setAllChats] = useState([]);
    useEffect(() => {
        // Retrieve 'me' from localStorage
        const storedMe = localStorage.getItem('me');
        if (storedMe) {
            setMe(storedMe);
        }

        // Retrieve all chats stored in localStorage
        const allKeys = Object.keys(localStorage);
        const chats = allKeys.filter((key) => key !== 'me' && key !== 's_tkn' && key !== 'a_l' && key !== 'u_id' && key !== 'ally-supports-cache').map((key) => {
            return {
                username: key,
                chatData: JSON.parse(localStorage.getItem(key)),
            };
        });

        setAllChats(chats);
    }, []);

    const handleUserSelect = (username) => {
        router.push(`/u/${username}`);
    };

    return (
        <div>
            <h1 style={{ color: '#fff', marginBottom: '10px' }}>Chats</h1>
            {allChats.length === 0 ? (
                <div className='pulse-and-fade' style={{ color: '#7d7d7d', fontSize: '16px', marginBottom: '20px' }}>
                    <p>{me ? 'This looks empty. Open sidebar to go to the find page to look for someone to chat.' : 'Log in to start chatting!'}</p>
                </div>
            ) : (
                <ul style={{ listStyleType: 'none', padding: 0 }}>
                    {allChats.map((chat, index) => (
                        <li
                            key={index}
                            style={{
                                color: '#fff',
                                cursor: 'pointer',
                                marginBottom: '15px',
                                display: 'flex',
                                alignItems: 'center',
                            }}
                            onClick={() => handleUserSelect(chat.username)}
                        >
                            <div
                                style={{
                                    width: '40px',
                                    height: '40px',
                                    position: 'relative',
                                    marginRight: '10px',
                                }}
                            >
                                <Image
                                    src={`https://ui-avatars.com/api/?background=random&name=${encodeURIComponent(
                                        chat.username
                                    )}`}
                                    alt={`${chat.username}'s avatar`}
                                    layout="fill"
                                    objectFit="cover"
                                    style={{ borderRadius: '50%' }}
                                />
                            </div>
                            <span style={{ textDecoration: 'none', color: '#fff', fontSize: '16px' }}>
                                {chat.username} {chat.username === me ? '(Me)' : ''}
                            </span>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}