import { h } from 'preact';
import { useState, useEffect, useRef } from 'preact/hooks';
import { marked } from 'marked';
import htm from 'htm';

const html = htm.bind(h);

export function Player({ deck, fontSize, onExit }) {
    const [index, setIndex] = useState(0);
    const containerRef = useRef(null);

    useEffect(() => {
        const handleKeyDown = (e) => {
            if (e.key === 'Escape') {
                e.preventDefault();
                onExit();
            } else {
                setIndex(prev => {
                    if (prev < deck.length - 1) {
                        return prev + 1;
                    }
                    return prev;
                });
            }
        };

        window.addEventListener('keydown', handleKeyDown);
        
        if (containerRef.current) {
            containerRef.current.focus();
        }

        return () => window.removeEventListener('keydown', handleKeyDown);
    }, [deck.length, onExit]);

    const handleClick = (e) => {
        setIndex(prev => {
            if (prev < deck.length - 1) {
                return prev + 1;
            }
            return prev;
        });
    };

    const currentSlide = deck[index];
    const rawHtml = marked.parse(currentSlide.content || '# (Empty Slide)');

    return html`
        <div class="player-container" 
             ref=${containerRef}
             onClick=${handleClick}
             title="Click to advance">
            <div class="slide-content" 
                 style="font-size: ${fontSize}px;"
                 dangerouslySetInnerHTML=${{ __html: rawHtml }}></div>
            <div class="hint-overlay">
                ${index + 1} / ${deck.length} • Press ESC to exit
            </div>
        </div>
    `;
}