import React, { useState, useEffect, useCallback } from 'react';
import { MediaList } from '../components/MediaList';
import { MediaItem } from '../api/jellyfin';
import { Loader } from '../components/Loader';
import { usePageTitle } from '../context/PageTitleContext/PageTitleContext';
import { usePullToRefresh } from '../hooks/usePullToRefresh';
import { useScrollRestore } from '../hooks/useScrollRestore';
import { PullToRefreshIndicator } from '../components/PullToRefreshIndicator';
import { useNavigate } from 'react-router-dom';

interface GenreSection {
    genre: string;
    title: string;
    description: string;
    tracks: MediaItem[];
}

interface GenresData {
    title: string;
    description: string;
    genres: GenreSection[];
    total_count: number;
}

export const GenresOverview: React.FC = () => {
    const { setPageTitle } = usePageTitle();
    const navigate = useNavigate();
    
    const [genresData, setGenresData] = useState<GenresData | null>(null);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);

    const fetchGenresData = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            // Determine the correct backend URL based on environment
            let fetchUrl;
            
            // Check if we're on the live site
            if (window.location.hostname === 'music.samcloud.ca') {
                // Use relative URL for live site (will use the same domain with reverse proxy)
                fetchUrl = `/api/discover/genres?t=${Date.now()}`;
            } else {
                // Use localhost for development
                fetchUrl = `http://localhost:5140/api/discover/genres?t=${Date.now()}`;
            }
            
            console.log('Fetching genres overview from:', fetchUrl);
            const response = await fetch(fetchUrl);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            const data: GenresData = await response.json();
            console.log('Genres overview data:', data);
            
            setGenresData(data);
            setPageTitle(`${data.title || 'All Genres'} (${data.total_count || 0} genres)`);
        } catch (error) {
            console.error('Error fetching genres overview:', error);
            setError(error instanceof Error ? error.message : 'Unknown error occurred');
        } finally {
            setLoading(false);
        }
    }, [setPageTitle]);

    // Enhanced pull-to-refresh with desktop support and animated indicator
    const { containerRef, isRefreshing, pullDistance, refreshThreshold } = usePullToRefresh({ onRefresh: fetchGenresData });
    // Restore scroll position when navigating back
    useScrollRestore(containerRef as unknown as React.MutableRefObject<HTMLElement | null>, 'genres-overview')

    useEffect(() => {
        fetchGenresData();
    }, [fetchGenresData]);

    if (loading) {
        return (
            <div className="genres-overview-page home-page">
                <div className="section-header">
                    <h1>All Genres</h1>
                </div>
                <Loader />
            </div>
        );
    }

    if (error) {
        return (
            <div className="genres-overview-page home-page">
                <div className="section-header">
                    <h1>All Genres</h1>
                    <p>Error: {error}</p>
                </div>
            </div>
        );
    }

    if (!genresData || !genresData.genres || genresData.genres.length === 0) {
        return (
            <div className="genres-overview-page home-page">
                <div className="section-header">
                    <h1>All Genres</h1>
                    <p>No genres available.</p>
                </div>
            </div>
        );
    }

    return (
        <div 
            className="genres-overview-page home-page" 
            ref={containerRef}
            style={{ 
                height: '100vh', 
                overflow: 'auto',
                display: 'flex',
                flexDirection: 'column'
            }}
        >
            <div
                style={{
                    // Smoothly translate content while pulling
                    transform: pullDistance ? `translateY(${Math.min(pullDistance, 120)}px)` : undefined,
                    transition: isRefreshing || pullDistance === 0 ? 'transform 200ms ease' : 'none',
                    willChange: 'transform',
                    flex: 1,
                    overflow: 'auto'
                }}
            >
                {/* Pull indicator + relocated Refresh action inside the pull space */}
                {(pullDistance > 0 || isRefreshing) && (
                    <div
                        style={{
                            position: 'sticky',
                            top: 0,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            height: 60,
                            marginTop: -60,
                            opacity: 0.98,
                            color: 'var(--text-primary, #fff)'
                        }}
                    >
                        <div
                            onClick={!isRefreshing ? fetchGenresData : undefined}
                            title={!isRefreshing ? 'Refresh' : undefined}
                            aria-label={!isRefreshing ? 'Refresh' : undefined}
                            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, pointerEvents: 'auto', cursor: !isRefreshing ? 'pointer' : 'default' }}
                        >
                            <PullToRefreshIndicator pullDistance={pullDistance} threshold={refreshThreshold} refreshing={isRefreshing} />
                        </div>
                    </div>
                )}
                
                <div className="section-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem', marginBottom: '2rem' }}>
                    <div>
                        <h1 style={{ marginBottom: 4 }}>{genresData.title}</h1>
                        <p style={{ marginTop: 0 }}>{genresData.description}</p>
                    </div>
                </div>
                
                {/* Genre sections - vertical layout */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
                    {genresData.genres.map((genreSection: GenreSection, index: number) => (
                        <div key={`genre-${genreSection.genre}-${index}`} className="section">
                            <div className="section-header">
                                <div className="container">
                                    <div className="section_title">{genreSection.title}</div>
                                    <div className="section_desc">{genreSection.description}</div>
                                </div>
                                <div 
                                    className="see-more noSelect" 
                                    onClick={() => navigate(`/section/genre-${encodeURIComponent(genreSection.genre)}?limit=100`)}
                                >
                                    See more (100)
                                </div>
                            </div>
                            <MediaList
                                items={genreSection.tracks}
                                isLoading={false}
                                type="song"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [genreSection.tracks], pageParams: [0] }}
                            />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};