'use client';

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { collection, getDocs, query, where } from 'firebase/firestore';
import { db } from '@/lib/firebase';
import { COLLECTIONS } from '@/types/firestore';
import { useAIPolling } from '@/hooks/useAIPolling';
import { classifyQuery, QueryType, QUERY_TYPE_LABELS } from '@/lib/ai/queryRouter';
import QueryTypePicker from './QueryTypePicker';

interface InsuranceMetadata {
    id: string;
    companyId: string;
    companyName: string;
    productId: string;
    productName: string;
    category: string;
}

export default function InsurancePDFQuery() {
    const { user } = useAuth();
    const [companies, setCompanies] = useState<{ id: string; name: string }[]>([]);
    const [products, setProducts] = useState<InsuranceMetadata[]>([]);
    const [selectedCompany, setSelectedCompany] = useState('');
    const [selectedProduct, setSelectedProduct] = useState('');
    const [question, setQuestion] = useState('');
    // AMBIGUOUS 상태: 사용자가 유형을 직접 선택해야 할 때
    const [pendingQueryType, setPendingQueryType] = useState<QueryType | null>(null);
    // 최종 라우팅 결과 유형 표시용
    const [resolvedType, setResolvedType] = useState<QueryType | null>(null);

    const { status, answer, error, submitQuery, reset } = useAIPolling({ getToken: user ? () => user.getIdToken() : null });

    // 회사 목록 로드
    useEffect(() => {
        const loadCompanies = async () => {
            try {
                const snap = await getDocs(collection(db, COLLECTIONS.INSURANCE_METADATA));
                const allMeta = snap.docs.map(d => ({ id: d.id, ...d.data() })) as InsuranceMetadata[];
                const uniqueCompanies = Array.from(
                    new Map(allMeta.map(m => [m.companyId, { id: m.companyId, name: m.companyName }])).values()
                );
                setCompanies(uniqueCompanies);
            } catch (err) {
                console.error('회사 목록 로드 실패:', err);
            }
        };
        loadCompanies();
    }, []);

    // 회사 변경 시 상품 목록 로드
    useEffect(() => {
        if (!selectedCompany) { setProducts([]); setSelectedProduct(''); return; }
        const loadProducts = async () => {
            try {
                const q = query(
                    collection(db, COLLECTIONS.INSURANCE_METADATA),
                    where('companyId', '==', selectedCompany),
                    where('isActive', '==', true)
                );
                const snap = await getDocs(q);
                const productList = snap.docs.map(d => ({ id: d.id, ...d.data() })) as InsuranceMetadata[];
                setProducts(productList);
            } catch (err) {
                console.error('상품 목록 로드 실패:', err);
            }
        };
        loadProducts();
    }, [selectedCompany]);

    // 질의 제출 전 Router 분류
    const handleSubmit = () => {
        if (!question.trim()) return;
        const qType = classifyQuery(question.trim(), {
            companyId: selectedCompany || undefined,
            productId: selectedProduct || undefined,
        });
        if (qType === 'AMBIGUOUS') {
            setPendingQueryType('AMBIGUOUS');
            return;
        }
        executeQuery(qType);
    };

    // AMBIGUOUS 해소: 사용자가 유형 선택
    const handleTypePick = (type: Exclude<QueryType, 'AMBIGUOUS'>) => {
        setPendingQueryType(null);
        executeQuery(type);
    };

    // 실제 질의 실행
    const executeQuery = (type: Exclude<QueryType, 'AMBIGUOUS'>) => {
        setResolvedType(type);
        if (type === 'DEEP_QUERY') {
            submitQuery({ question: question.trim(), companyId: selectedCompany, productId: selectedProduct });
        } else {
            // A/B형은 즉시 응답 → useAIPolling 대신 fetch 직접 호출
            // (Step 5 / Step 9 완성 후 실제 구현. 현재는 플레이스홀더)
            submitQuery({ question: question.trim(), companyId: selectedCompany, productId: selectedProduct });
        }
    };

    const handleReset = () => {
        reset();
        setQuestion('');
        setPendingQueryType(null);
        setResolvedType(null);
    };

    const isLoading = status === 'pending';
    const canSubmit = question.trim() && !isLoading;

    return (
        <div className="p-4 space-y-4">
            {/* 상단 안내 */}
            <div className="flex items-center gap-2 text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-xl px-3 py-2">
                <span className="text-base">🤖</span>
                <span>질의 유형에 따라 보험료 DB, 전체 문서 검색, 약관 심층 분석 중 최적 방식으로 자동 처리합니다.</span>
            </div>

            {/* 회사 선택 (선택사항 — 없으면 B형 검색 유도) */}
            <div className="space-y-1.5">
                <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
                    보험사 선택 <span className="normal-case text-gray-400">(선택사항)</span>
                </label>
                <select
                    value={selectedCompany}
                    onChange={(e) => { setSelectedCompany(e.target.value); setSelectedProduct(''); reset(); setResolvedType(null); }}
                    className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 appearance-none cursor-pointer"
                    disabled={isLoading}
                >
                    <option value="">-- 전체 회사 검색 (B형) 또는 회사 선택 --</option>
                    {companies.map(c => (
                        <option key={c.id} value={c.id}>{c.name}</option>
                    ))}
                </select>
            </div>

            {/* 상품 선택 (회사 선택 시에만) */}
            {selectedCompany && (
                <div className="space-y-1.5">
                    <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">상품 선택</label>
                    {products.length === 0 ? (
                        <p className="text-sm text-gray-400 px-1">등록된 상품이 없습니다.</p>
                    ) : (
                        <select
                            value={selectedProduct}
                            onChange={(e) => { setSelectedProduct(e.target.value); reset(); setResolvedType(null); }}
                            className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 appearance-none cursor-pointer"
                            disabled={isLoading}
                        >
                            <option value="">-- 상품 선택 --</option>
                            {products.map(p => (
                                <option key={p.id} value={p.productId}>{p.productName}</option>
                            ))}
                        </select>
                    )}
                </div>
            )}

            {/* 질문 입력 */}
            <div className="space-y-1.5">
                <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">질문 입력</label>
                <textarea
                    value={question}
                    onChange={(e) => { setQuestion(e.target.value); setPendingQueryType(null); setResolvedType(null); }}
                    placeholder="예: 뇌혈관 보장 가장 넓은 회사 어디? / 40세 남성 암 진단비 보험료? / 이 특약 면책기간은?"
                    rows={3}
                    className="w-full border border-gray-200 rounded-xl px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
                    disabled={isLoading}
                />
                <button
                    onClick={handleSubmit}
                    disabled={!canSubmit}
                    className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-200 disabled:text-gray-400 text-white font-semibold py-2.5 rounded-xl text-sm transition-colors"
                >
                    {isLoading ? '분석 중...' : 'AI에게 물어보기'}
                </button>
            </div>

            {/* AMBIGUOUS: 유형 선택 UI */}
            {pendingQueryType === 'AMBIGUOUS' && (
                <div className="border border-blue-200 rounded-xl bg-blue-50/50 overflow-hidden">
                    <QueryTypePicker onSelect={handleTypePick} />
                </div>
            )}

            {/* 라우팅 유형 배지 */}
            {resolvedType && resolvedType !== 'AMBIGUOUS' && status !== 'idle' && (
                <div className="flex items-center gap-2">
                    <span className="text-xs bg-gray-100 text-gray-600 px-2.5 py-1 rounded-full font-medium">
                        {QUERY_TYPE_LABELS[resolvedType]}
                    </span>
                    <span className="text-xs text-gray-400">방식으로 처리 중</span>
                </div>
            )}

            {/* 로딩 스켈레톤 */}
            {status === 'pending' && (
                <div className="space-y-3 pt-2">
                    <div className="flex items-center gap-2 text-sm text-blue-600">
                        <div className="w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" />
                        <span>분석 중... (최대 3분)</span>
                    </div>
                    <div className="space-y-2 animate-pulse">
                        <div className="h-3 bg-gray-200 rounded w-full" />
                        <div className="h-3 bg-gray-200 rounded w-5/6" />
                        <div className="h-3 bg-gray-200 rounded w-4/6" />
                    </div>
                </div>
            )}

            {/* 완료: 답변 */}
            {status === 'complete' && answer && (
                <div className="space-y-3 pt-2">
                    <div className="flex items-center justify-between">
                        <span className="text-xs font-semibold text-green-600 bg-green-50 border border-green-200 rounded-full px-2.5 py-0.5">✅ 분석 완료</span>
                        <button onClick={handleReset} className="text-xs text-gray-400 hover:text-gray-600 underline">초기화</button>
                    </div>
                    <div className="bg-gray-50 rounded-xl p-4 text-sm text-gray-700 leading-relaxed whitespace-pre-wrap border border-gray-100 max-h-64 overflow-y-auto">
                        {answer}
                    </div>
                    <p className="text-xs text-gray-400">
                        최근 편집된 문서는 AI에 반영되기까지 최대 48시간 소요될 수 있습니다.
                    </p>
                </div>
            )}

            {/* 실패/타임아웃 */}
            {(status === 'failed' || status === 'timeout') && error && (
                <div className="space-y-2 pt-2">
                    <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded-xl px-3 py-2.5">
                        <span>⚠️</span><span>{error}</span>
                    </div>
                    <button onClick={handleReset} className="text-sm text-blue-600 hover:underline">다시 시도</button>
                </div>
            )}
        </div>
    );
}