'use client';

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface AIResultsProps {
    isSearching: boolean;
    answer: string | null;
    sources: { id: string; title: string }[];
    aiError: string | null;
    searchQuery: string;
    onSelect: (docId: string) => void;
    onRetry: (query: string) => void;
}

export default function AIResults({ isSearching, answer, sources, aiError, searchQuery, onSelect, onRetry }: AIResultsProps) {
    // M2: 로딩 상태
    if (isSearching) {
        return (
            <div className="p-6 text-center space-y-4">
                <div className="text-4xl mb-2 animate-bounce">✨</div>
                <p className="text-indigo-600 font-bold animate-pulse">위키 지식을 분석하고 있습니다...</p>
                <div className="flex justify-center gap-1.5 mt-2">
                    <span className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce [animation-delay:0ms]" />
                    <span className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce [animation-delay:150ms]" />
                    <span className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce [animation-delay:300ms]" />
                </div>
                <p className="text-xs text-slate-400 mt-2">질문과 관련된 문서를 찾아 종합하고 있어요</p>
            </div>
        );
    }

    // AI 답변 카드 (S4: 마크다운 렌더링)
    if (answer) {
        return (
            <div className="space-y-4 animate-in slide-in-from-bottom-2 duration-300">
                <div className="bg-indigo-600 text-white p-6 rounded-3xl shadow-xl shadow-indigo-100 relative overflow-hidden">
                    <div className="absolute top-0 right-0 p-4 opacity-10 text-6xl">✨</div>
                    <h3 className="text-sm font-bold mb-3 flex items-center gap-2 opacity-80">
                        <span className="bg-white/20 p-1 rounded-lg">🤖</span> AI 지능형 답변
                    </h3>
                    {/* S4: 마크다운 렌더링 */}
                    <div className="text-base leading-relaxed prose prose-invert prose-sm max-w-none [&_h1]:text-lg [&_h2]:text-base [&_h3]:text-sm [&_p]:my-1.5 [&_ul]:my-1.5 [&_ol]:my-1.5 [&_li]:my-0.5">
                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
                            {answer}
                        </ReactMarkdown>
                    </div>
                    {/* M1: 면책 조항 */}
                    <p className="text-[10px] text-indigo-200 mt-3 leading-relaxed opacity-70">
                        ※ 본 답변은 위키 문서 기반 AI 참고 정보입니다. 정확한 내용은 약관 원문을 확인해 주세요.
                    </p>
                </div>

                {/* S5: 출처 — 모바일 1열, 데스크탑 2열 */}
                {sources.length > 0 && (
                    <div className="space-y-2">
                        <h4 className="text-xs font-bold text-slate-400 ml-2">근거 지식 (출처)</h4>
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                            {sources.map((source, i) => (
                                <button
                                    key={i}
                                    onClick={() => onSelect(source.id)}
                                    className="flex items-center gap-2 p-3 bg-slate-50 hover:bg-white hover:shadow-md hover:-translate-y-0.5 border border-slate-100 rounded-2xl transition-all text-left group"
                                >
                                    <span className="text-sm group-hover:scale-110 transition-transform">📄</span>
                                    <span className="text-xs font-bold text-slate-700 truncate">{source.title}</span>
                                </button>
                            ))}
                        </div>
                    </div>
                )}
            </div>
        );
    }

    // M4: 에러 핸들링 (재시도 버튼 포함)
    if (aiError) {
        return (
            <div className="p-5 bg-red-50 text-red-600 rounded-3xl border border-red-100 space-y-3">
                <div className="flex items-center gap-3">
                    <span className="text-2xl">⚠️</span>
                    <div>
                        <p className="font-bold text-sm">검색 중 문제가 발생했어요</p>
                        <p className="text-xs opacity-80 mt-0.5">
                            {aiError.includes('API') || aiError.includes('key')
                                ? 'API 키를 확인해 주세요. 키가 올바른지, 사용량 초과 여부를 점검해 보세요.'
                                : '잠시 후 다시 시도해 주세요.'}
                        </p>
                    </div>
                </div>
                <button
                    onClick={() => onRetry(searchQuery)}
                    className="w-full py-2 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-bold rounded-xl transition-colors"
                >
                    🔄 다시 검색하기
                </button>
            </div>
        );
    }

    return null;
}