import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useJellyfinContext } from '../context/JellyfinContext/JellyfinContext';
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { MediaItem } from '../api/jellyfin';
import { Loader } from '../components/Loader';
import './Genres.css';

export const Genres = () => {
    const { setPageTitle } = usePageTitle();
    const api = useJellyfinContext();
    const [genres, setGenres] = useState<MediaItem[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    
    useEffect(() => {
        setPageTitle('Genres');
    }, [setPageTitle]);

    useEffect(() => {
        const fetchAllGenres = async () => {
            setLoading(true);
            setError(null);
            try {
                // Get genres by searching with empty term (should return all)
                const allGenres = await api.searchGenres('', 200);
                setGenres(allGenres || []);
            } catch (err) {
                console.error('Error fetching genres:', err);
                setError('Failed to load genres');
            } finally {
                setLoading(false);
            }
        };

        if (api.auth.token) {
            fetchAllGenres();
        }
    }, [api]);

    if (loading) {
        return <Loader />;
    }

    if (error) {
        return <div className="error">{error}</div>;
    }

    return (
        <div className="genres-page">
            <div className="genres-header">
                <h2>Music Genres</h2>
                <p>Browse your music by genre</p>
            </div>

            {genres.length === 0 ? (
                <div className="no-genres">
                    <p>No genres found in your music library</p>
                </div>
            ) : (
                <div className="genres-grid">
                    {genres.map((genre) => (
                        <Link 
                            key={genre.Id} 
                            to={`/genre/${encodeURIComponent(genre.Name || '')}`}
                            className="genre-card"
                        >
                            <div className="genre-card-content">
                                <h3 className="genre-name">{genre.Name}</h3>
                                {genre.UserData?.UnplayedItemCount !== undefined && (
                                    <p className="genre-stats">
                                        {genre.UserData.UnplayedItemCount} tracks
                                    </p>
                                )}
                            </div>
                        </Link>
                    ))}
                </div>
            )}
        </div>
    );
};