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 { useNavigate } from 'react-router-dom';
import { PullToRefreshWrapper } from '../components/PullToRefreshWrapper';
import './Discover.css';

interface DiscoverySection {
    title: string;
    description?: string;
    tracks: MediaItem[];
}

interface AlbumDiscoverySection {
    title: string;
    description?: string;
    albums: MediaItem[];
}

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

interface DiscoveryData {
    for_you?: DiscoverySection;
    genres?: GenreSection[];
    new_releases?: DiscoverySection;
    trending?: DiscoverySection;
    trending_albums?: AlbumDiscoverySection;
    new_albums?: AlbumDiscoverySection;
}

export const Discover: React.FC = () => {
    const { setPageTitle } = usePageTitle();
    const [discoveryData, setDiscoveryData] = useState<DiscoveryData>({});
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);
    const navigate = useNavigate();

    const fetchDiscoveryData = 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';
            } else {
                // Use development backend URL for localhost
                const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5140';
                fetchUrl = `${backendUrl}/api/discover`;
            }
            
            console.log('Environment:', window.location.hostname);
            console.log('Fetching comprehensive discovery data from:', fetchUrl);
            const response = await fetch(fetchUrl);
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            console.log('Discovery data received:', data);
            setDiscoveryData(data);
        } catch (e: any) {
            console.error("Failed to fetch discovery data:", e);
            setError(e.message || 'Failed to fetch discovery content.');
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        setPageTitle('Discover');
        fetchDiscoveryData();
    }, [setPageTitle, fetchDiscoveryData]);

    if (loading) {
        return (
            <PullToRefreshWrapper onRefresh={fetchDiscoveryData}>
                <div className="discover-page">
                    <div className="discover-header">
                        <h1>Discover</h1>
                        <p>Finding new music just for you...</p>
                    </div>
                    <Loader />
                </div>
            </PullToRefreshWrapper>
        );
    }

    if (error) {
        return (
            <PullToRefreshWrapper onRefresh={fetchDiscoveryData}>
                <div className="discover-page">
                    <div className="discover-header">
                        <h1>Discover</h1>
                        <p>Explore new music tailored to your taste</p>
                    </div>
                    <div className="error-section">
                        <div className="error-message">{error}</div>
                        <p>We're having trouble loading new music recommendations. Please try again later.</p>
                    </div>
                </div>
            </PullToRefreshWrapper>
        );
    }

    const hasContent = Object.keys(discoveryData).length > 0;
    if (!hasContent) {
        return (
            <PullToRefreshWrapper onRefresh={fetchDiscoveryData}>
                <div className="discover-page">
                    <div className="discover-header">
                        <h1>Discover</h1>
                        <p>Explore new music tailored to your taste</p>
                    </div>
                    <div className="empty-state">
                        <h3>No recommendations available</h3>
                        <p>Start listening to music to get personalized recommendations!</p>
                    </div>
                </div>
            </PullToRefreshWrapper>
        );
    }

    return (
        <PullToRefreshWrapper onRefresh={fetchDiscoveryData}>
            <div className="discover-page">
                <div className="discover-header">
                    <h1>Discover</h1>
                    <p>Explore new music tailored to your taste</p>
                </div>

                <div className="discovery-sections">
                    {/* For You Section */}
                    {discoveryData.for_you && discoveryData.for_you.tracks.length > 0 && (
                        <div className="discovery-section">
                            <div className="section-header">
                                <div>
                                    <h2>{discoveryData.for_you.title}</h2>
                                    <p>{discoveryData.for_you.description}</p>
                                </div>
                                <button className="see-more-button" onClick={() => navigate('/section/for-you')}>See More</button>
                            </div>
                            <MediaList
                                items={discoveryData.for_you.tracks}
                                isLoading={false}
                                type="song"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [discoveryData.for_you.tracks], pageParams: [0] }}
                            />
                        </div>
                    )}

                    {/* New Releases Section */}
                    {discoveryData.new_releases && discoveryData.new_releases.tracks.length > 0 && (
                        <div className="discovery-section">
                            <div className="section-header">
                                <div>
                                    <h2>{discoveryData.new_releases.title}</h2>
                                    <p>{discoveryData.new_releases.description}</p>
                                </div>
                                <button className="see-more-button" onClick={() => navigate('/section/new-releases')}>See More</button>
                            </div>
                            <MediaList
                                items={discoveryData.new_releases.tracks}
                                isLoading={false}
                                type="song"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [discoveryData.new_releases.tracks], pageParams: [0] }}
                            />
                        </div>
                    )}

                    {/* Trending Section */}
                    {discoveryData.trending && discoveryData.trending.tracks.length > 0 && (
                        <div className="discovery-section">
                            <div className="section-header">
                                <div>
                                    <h2>{discoveryData.trending.title}</h2>
                                    <p>{discoveryData.trending.description}</p>
                                </div>
                                <button className="see-more-button" onClick={() => navigate('/section/trending')}>See More</button>
                            </div>
                            <MediaList
                                items={discoveryData.trending.tracks}
                                isLoading={false}
                                type="song"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [discoveryData.trending.tracks], pageParams: [0] }}
                            />
                        </div>
                    )}

                    {/* Popular Albums Section */}
                    {discoveryData.trending_albums && discoveryData.trending_albums.albums.length > 0 && (
                        <div className="discovery-section">
                            <div className="section-header">
                                <div>
                                    <h2>{discoveryData.trending_albums.title}</h2>
                                    <p>{discoveryData.trending_albums.description}</p>
                                </div>
                                <button className="see-more-button" onClick={() => navigate('/section/trending-albums')}>See More</button>
                            </div>
                            <MediaList
                                items={discoveryData.trending_albums.albums}
                                isLoading={false}
                                type="album"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [discoveryData.trending_albums.albums], pageParams: [0] }}
                            />
                        </div>
                    )}

                    {/* New Albums Release Section */}
                    {discoveryData.new_albums && discoveryData.new_albums.albums.length > 0 && (
                        <div className="discovery-section">
                            <div className="section-header">
                                <div>
                                    <h2>New Albums Release</h2>
                                    <p>Fresh albums just for you</p>
                                </div>
                                <button className="see-more-button" onClick={() => navigate('/section/new-albums')}>See More</button>
                            </div>
                            <MediaList
                                items={discoveryData.new_albums.albums}
                                isLoading={false}
                                type="album"
                                title=""
                                discoverMode={true}
                                infiniteData={{ pages: [discoveryData.new_albums.albums], pageParams: [0] }}
                            />
                        </div>
                    )}

                    {/* Genre Sections */}
                    {discoveryData.genres && discoveryData.genres.length > 0 && (
                        <>
                            <div className="genres-container">
                                <div className="section-header">
                                    <div>
                                        <h2>Explore by Genre</h2>
                                        <p>Discover new music across different genres</p>
                                    </div>
                                    <button className="see-more-button" onClick={() => navigate('/section/genres')}>See More</button>
                                </div>
                            </div>
                            {discoveryData.genres.map((genreSection: GenreSection, index: number) => (
                                <div key={index} className="discovery-section genre-section">
                                    <div className="section-header">
                                        <div>
                                            <h3>{genreSection.title}</h3>
                                        </div>
                                        <button className="see-more-button" onClick={() => navigate(`/section/genre-${encodeURIComponent(genreSection.genre)}`)}>See More</button>
                                    </div>
                                    <MediaList
                                        items={genreSection.tracks}
                                        isLoading={false}
                                        type="song"
                                        title=""
                                        discoverMode={true}
                                        infiniteData={{ pages: [genreSection.tracks], pageParams: [0] }}
                                    />
                                </div>
                            ))}
                        </>
                    )}
                </div>
            </div>
        </PullToRefreshWrapper>
    );
};