import { useEffect } from 'react';
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';

interface AIWhispersProps {
    onTranscription: (text: string) => void;
    apiKey: string | null;
}

export default function AIWhispers({ onTranscription, apiKey }: AIWhispersProps) {
    const {
        isListening,
        transcript,
        interimTranscript,
        startListening,
        stopListening
    } = useSpeechRecognition({
        lang: 'ko-KR',
        continuous: true,
        interimResults: true
    });

    // 상위 컴포넌트로 전사 내용 전달 (필요 시)
    useEffect(() => {
        if (transcript) {
            onTranscription(transcript);
        }
    }, [transcript, onTranscription]);

    const handleToggleRecording = () => {
        if (isListening) {
            stopListening();
        } else {
            startListening();
        }
    };

    return (
        <div className="bg-white rounded-xl shadow-sm border border-indigo-100/50 overflow-hidden">
            {/* Header / Status Bar */}
            <div className="px-4 py-3 bg-indigo-50/50 border-b border-indigo-100/50 flex items-center justify-between">
                <div className="flex items-center gap-2">
                    <div className={`w-2 h-2 rounded-full ${isListening ? 'bg-red-500 animate-pulse' : 'bg-slate-300'}`} />
                    <span className="text-xs font-semibold text-indigo-900">
                        {isListening ? 'AI Whispers Listening...' : '마이크 대기 중'}
                    </span>
                </div>
                {/* Visualizer Placeholder */}
                {isListening && (
                    <div className="flex gap-0.5 h-3 items-end">
                        <div className="w-0.5 bg-indigo-400 animate-pulse h-full" style={{ animationDelay: '0ms' }} />
                        <div className="w-0.5 bg-indigo-400 animate-pulse h-2/3" style={{ animationDelay: '100ms' }} />
                        <div className="w-0.5 bg-indigo-400 animate-pulse h-full" style={{ animationDelay: '200ms' }} />
                        <div className="w-0.5 bg-indigo-400 animate-pulse h-1/3" style={{ animationDelay: '150ms' }} />
                    </div>
                )}
            </div>

            {/* Transcription Area */}
            <div className="p-4 min-h-[120px] max-h-[200px] overflow-y-auto bg-slate-50/30">
                {transcript || interimTranscript ? (
                    <p className="text-slate-700 leading-relaxed text-sm whitespace-pre-wrap">
                        {transcript}
                        {interimTranscript && <span className="text-slate-400 ml-1">{interimTranscript}</span>}
                        {isListening && <span className="inline-block w-1.5 h-4 ml-1 bg-indigo-400 animate-pulse align-middle"></span>}
                    </p>
                ) : (
                    <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-2">
                        <svg className="w-6 h-6 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 15a3 3 0 003-3V5a3 3 0 00-6 0v7a3 3 0 003 3z" />
                        </svg>
                        <p className="text-xs">마이크 버튼을 눌러 말씀해 주세요</p>
                    </div>
                )}
            </div>
            <div className="px-4 py-3 bg-indigo-50/50 border-t border-indigo-100/50 flex justify-center">
                <button
                    onClick={handleToggleRecording}
                    className={`px-4 py-2 rounded-full text-xs font-bold transition-all active:scale-95 flex items-center gap-2 ${isListening
                        ? 'bg-red-100 text-red-600 hover:bg-red-200'
                        : 'bg-indigo-600 text-white hover:bg-indigo-700 shadow-md shadow-indigo-100'
                        }`}
                >
                    {isListening ? (
                        <>
                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clipRule="evenodd" /></svg>
                            중지
                        </>
                    ) : (
                        <>
                            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4z" /><path d="M3 10a5 5 0 0110 0v1a1 1 0 002 0v-1a7 7 0 00-14 0v1a1 1 0 002 0v-1z" /></svg>
                            기록 시작
                        </>
                    )}
                </button>
            </div>
            {isListening && (
                <div className="p-3 bg-red-50 text-red-600 text-xs rounded-xl flex items-center gap-2 hidden">
                    {/* Error handling moved to hook or parent */}
                </div>
            )}

            <div className={`min-h-[100px] max-h-[200px] overflow-y-auto p-3 bg-white border border-slate-100 rounded-2xl text-sm leading-relaxed ${isListening ? 'border-indigo-200 ring-2 ring-indigo-50' : ''}`}>
                {transcript ? (
                    <p className="text-slate-700">
                        {transcript}
                        {interimTranscript && <span className="text-slate-400">{interimTranscript}</span>}
                        {isListening && <span className="inline-block w-1.5 h-4 ml-1 bg-indigo-400 animate-pulse align-middle"></span>}
                    </p>
                ) : (
                    <p className="text-slate-400 italic text-xs">
                        {isListening ? '경청하고 있습니다...' : '상담이나 회의를 기록해보세요.'}
                    </p>
                )}
            </div>

            <p className="text-[10px] text-slate-400 text-center">
                실시간 음성 데이터는 저장 전까지 암호화되어 안전하게 처리됩니다.
            </p>
        </div>
    );
}