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, useParams } from 'react-router-dom';

interface SectionData {
    title: string;
    description?: string;
    items: MediaItem[];
}

export const SectionMore: React.FC = () => {
    const { setPageTitle } = usePageTitle();
    const { section } = useParams<{ section: string }>();
    const navigate = useNavigate();
    const [sectionData, setSectionData] = useState<SectionData | null>(null);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);

    const fetchSectionData = 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/${section}`;
            } else {
                // Use development backend URL for localhost
                const backendUrl = import.meta.env.VITE_BACKEND_URL || 'http://localhost:5140';
                fetchUrl = `${backendUrl}/api/discover/${section}`;
            }
            
            console.log('Fetching section 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('Section data received:', data);
            setSectionData(data);
            setPageTitle(data.title);
        } catch (e: any) {
            console.error(`Failed to fetch ${section} data:`, e);
            setError(e.message || `Failed to fetch ${section} content.`);
        } finally {
            setLoading(false);
        }
    }, [section, setPageTitle]);

    useEffect(() => {
        if (section) {
            fetchSectionData();
        }
    }, [section, fetchSectionData]);

    if (loading) {
        return (
            <div className="section-more-page">
                <div className="section-header">
                    <h1>{section ? section.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Section'}</h1>
                </div>
                <Loader />
            </div>
        );
    }

    if (error) {
        return (
            <div className="section-more-page">
                <div className="section-header">
                    <h1>{section ? section.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Section'}</h1>
                </div>
                <div className="error-section">
                    <div className="error-message">{error}</div>
                    <p>We're having trouble loading this section. Please try again later.</p>
                </div>
            </div>
        );
    }

    if (!sectionData) {
        return (
            <div className="section-more-page">
                <div className="section-header">
                    <h1>{section ? section.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : 'Section'}</h1>
                </div>
                <div className="error-section">
                    <p>No data available for this section.</p>
                </div>
            </div>
        );
    }

    return (
        <div className="section-more-page">
            <div className="section-header">
                <h1>{sectionData.title}</h1>
                {sectionData.description && <p>{sectionData.description}</p>}
            </div>
            <MediaList
                items={sectionData.items}
                isLoading={false}
                type={section?.includes('album') ? 'album' : 'song'}
                title=""
                discoverMode={true}
                infiniteData={{ pages: [sectionData.items], pageParams: [0] }}
            />
        </div>
    );
};