const DetailPanel = ({ data, onMarkWrong, isMarkedWrong }) => {
    if (!data) {
        return (
            <div className="glass-panel rounded-2xl p-6 h-full flex items-center justify-center text-slate-500">
                <p>Select a segment to view details</p>
            </div>
        );
    }

    const {
        start, end,
        speaker_id,
        transcription,
        confidence,
        contains_voiceover,
        perceived_voice_gender,
        speaker_identification
    } = data;

    return (
        <div className="glass-panel rounded-2xl p-6 h-auto animate-fade-in border-l-4 border-l-sky-500/50">
            <div className="flex justify-between items-start mb-6">
                <div>
                    <h2 className="text-lg font-bold text-white mb-1">Segment Details</h2>
                    <p className="text-sm font-mono text-slate-400">{start} - {end}</p>
                </div>

                <button
                    onClick={() => onMarkWrong()}
                    className={`
                        px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2
                        ${isMarkedWrong
                            ? 'bg-red-500/20 text-red-400 ring-1 ring-red-500/50'
                            : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-red-300'
                        }
                    `}
                >
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                    {isMarkedWrong ? 'Flagged as Error' : 'Mark as Wrong'}
                </button>
            </div>

            <div className="space-y-6">
                {/* Confidence Score */}
                <div>
                    <div className="flex justify-between text-sm mb-1">
                        <span className="text-slate-400">Transcription Confidence</span>
                        <span className="text-emerald-400 font-mono">{(confidence * 100).toFixed(1)}%</span>
                    </div>
                    <div className="h-1.5 bg-slate-800 rounded-full overflow-hidden">
                        <div
                            className="h-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]"
                            style={{ width: `${confidence * 100}%` }}
                        />
                    </div>
                </div>

                <div className="grid grid-cols-2 gap-4">
                    {/* Speaker Info */}
                    <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800">
                        <div className="text-xs text-slate-500 uppercase tracking-widest mb-2 font-semibold">Speaker Identity</div>
                        {speaker_identification ? (
                            <>
                                <div className="text-base text-sky-300 font-medium">{speaker_identification.name || "Unknown"}</div>
                                <div className="text-xs text-slate-400 mt-1">{speaker_identification.title}</div>
                                <div className="text-xs text-slate-500 mt-2 font-mono">
                                    Prob: {speaker_identification.probability} ({speaker_identification.source_of_information})
                                </div>
                            </>
                        ) : (
                            <div className="text-slate-400">{speaker_id}</div>
                        )}
                    </div>

                    {/* Gender Info */}
                    <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800">
                        <div className="text-xs text-slate-500 uppercase tracking-widest mb-2 font-semibold">Voice Analysis</div>
                        <div className="flex items-center gap-2 mb-1">
                            {perceived_voice_gender.gender === 'male' ? (
                                <span className="text-blue-400 text-lg">♂ Male</span>
                            ) : perceived_voice_gender.gender === 'female' ? (
                                <span className="text-pink-400 text-lg">♀ Female</span>
                            ) : (
                                <span className="text-slate-400">? Unknown</span>
                            )}
                        </div>
                        <div className="text-xs text-slate-500 mt-2 font-mono">
                            Certainty: {perceived_voice_gender.probability}
                        </div>
                        <div className="mt-3">
                            <span className={`text-xs px-2 py-1 rounded border ${contains_voiceover
                                ? 'border-indigo-500/30 bg-indigo-500/10 text-indigo-400'
                                : 'border-slate-700 bg-slate-800 text-slate-400'
                                }`}>
                                {contains_voiceover ? 'Voiceover' : 'On-screen'}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

window.DetailPanel = DetailPanel;