'use client';

// S3: 설계사 실무 맞춤 추천 질문
const SUGGESTED_QUESTIONS = [
    "암보험 면책기간이 뭐야?",
    "CI보험 vs 건강보험 차이 알려줘",
    "변액보험 환급률 계산법은?",
    "실손보험 자기부담금 기준 요약해줘",
];

interface AIEmptyStateProps {
    apiKey: string | null;
    onQuestionClick: (question: string) => void;
}

export default function AIEmptyState({ apiKey, onQuestionClick }: AIEmptyStateProps) {
    // API 키가 없는 경우 — 키 설정 안내
    if (!apiKey) {
        return (
            <div className="p-10 text-center">
                <div className="bg-amber-50 border border-amber-200 rounded-3xl p-5 sm:p-8 animate-in fade-in slide-in-from-bottom-2 duration-500">
                    <div className="text-3xl sm:text-4xl mb-3 sm:mb-4">🔑</div>
                    <h4 className="text-amber-800 font-bold mb-1.5 sm:mb-2 text-sm sm:text-base">Gemini API 키가 필요합니다</h4>
                    <p className="text-xs sm:text-sm text-amber-700 leading-relaxed mb-4 sm:mb-6">
                        AI 지능형 검색과 실시간 음성 기록을 사용하려면<br />
                        개인 API 키 설정을 먼저 완료해 주세요.
                    </p>
                    <div className="bg-white/60 p-3 sm:p-4 rounded-2xl text-[10px] sm:text-xs text-amber-600 border border-amber-100 text-left">
                        <p className="font-bold mb-1 sm:mb-1.5 flex items-center gap-1.5">
                            <span>💡</span> 설정 방법:
                        </p>
                        <ol className="space-y-0.5 sm:space-y-1 list-decimal list-inside opacity-90">
                            <li>Google AI Studio에서 무료 API 키 발급</li>
                            <li>우측 상단 프로필 → AI 설정 메뉴 클릭</li>
                            <li>발급받은 API 키 입력 후 저장</li>
                        </ol>
                    </div>
                </div>
            </div>
        );
    }

    // API 키가 있는 상태 — S3: 추천 질문 + Empty State
    return (
        <div className="p-8 text-center">
            <div className="text-slate-400">
                <div className="text-4xl mb-4 opacity-50">💡</div>
                <p className="text-sm font-bold">상담·판매에 필요한 지식을 찾아보세요!</p>
                <p className="text-xs mt-1 mb-5">사업단 설계사들이 작성한 위키 지식을 AI가 분석해 답해드립니다.</p>
            </div>

            {/* S3: 추천 질문 칩 */}
            <div className="space-y-2">
                <p className="text-[10px] font-bold text-slate-300 uppercase tracking-wider">추천 질문</p>
                <div className="flex flex-wrap justify-center gap-2">
                    {SUGGESTED_QUESTIONS.map((q, i) => (
                        <button
                            key={i}
                            onClick={() => onQuestionClick(q)}
                            className="px-3 py-1.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 text-xs font-medium rounded-full border border-indigo-100 hover:border-indigo-200 transition-all hover:shadow-sm active:scale-95"
                        >
                            {q}
                        </button>
                    ))}
                </div>
            </div>
        </div>
    );
}