const { useEffect, useRef } = React;

const TranscriptionList = ({ transcriptions, currentTime, onSeek, activeIndex }) => {
    const scrollRef = useRef(null);
    const itemRefs = useRef([]);

    useEffect(() => {
        if (activeIndex !== -1 && itemRefs.current[activeIndex]) {
            itemRefs.current[activeIndex].scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }
    }, [activeIndex]);

    const parseTime = (timeStr) => {
        if (!timeStr) return 0;
        const [h, m, s] = timeStr.split(':');
        return parseInt(h) * 3600 + parseInt(m) * 60 + parseFloat(s);
    };

    return (
        <div className="glass-panel rounded-2xl flex flex-col h-[600px] md:h-[800px] overflow-hidden">
            <div className="p-4 border-b border-slate-700/50 bg-slate-900/30">
                <h2 className="font-semibold text-slate-200 flex items-center gap-2">
                    <svg className="w-4 h-4 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                    </svg>
                    Transcript
                </h2>
            </div>

            <div className="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar" ref={scrollRef}>
                {transcriptions.map((t, i) => {
                    const isActive = i === activeIndex;
                    const speakerName = t.speaker_identification?.name || t.speaker_id || "Unknown";
                    const isVoiceover = t.contains_voiceover;

                    return (
                        <div
                            key={i}
                            ref={el => itemRefs.current[i] = el}
                            onClick={() => onSeek(parseTime(t.start))}
                            className={`
                                p-4 rounded-xl cursor-pointer transition-all duration-200
                                ${isActive
                                    ? 'bg-sky-500/10 border-sky-500/20 shadow-lg shadow-sky-900/20 translate-x-1'
                                    : 'hover:bg-slate-800/50 border-transparent hover:border-slate-700/50'
                                }
                                border border-transparent
                            `}
                        >
                            <div className="flex justify-between items-baseline mb-1">
                                <span className={`
                                    text-xs font-bold uppercase tracking-wider
                                    ${isVoiceover ? 'text-indigo-400' : 'text-sky-400'}
                                `}>
                                    {speakerName}
                                </span>
                                <span className="text-xs font-mono text-slate-500">{t.start.slice(0, 8)}</span>
                            </div>
                            <p className={`
                                text-sm leading-relaxed
                                ${isActive ? 'text-slate-100' : 'text-slate-400'}
                            `}>
                                {t.transcription}
                            </p>

                            {/* Confidence indicators - subtle */}
                            {isActive && (
                                <div className="mt-2 flex gap-2">
                                    {t.perceived_voice_gender && (
                                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">
                                            {t.perceived_voice_gender.gender}
                                        </span>
                                    )}
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

window.TranscriptionList = TranscriptionList;