'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { auth } from '@/lib/firebase';

interface InsuranceMetadata {
    id: string;
    productId: string;
    companyId: string;
    companyName: string;
    productName: string;
    category: 'life' | 'non_life' | 'variable';
    pageCount?: number;
    effectiveDateRange?: { start: string; end?: string };
    isSalesStopped: boolean;
}

interface InsuranceSummary {
    id: string;
    productId: string;
    level: 1 | 2 | 3;
    sectionTitle?: string;
    content: string;
    pageRange?: { start: number; end: number };
}

type TabLevel = 1 | 2 | 3;

const categoryLabels: Record<string, string> = {
    life: '생명보험',
    non_life: '손해보험',
    variable: '변액보험',
};

export default function TermDetailClient() {
    const params = useParams();
    const router = useRouter();
    const productId = params.productId as string;
    
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);
    const [metadata, setMetadata] = useState<InsuranceMetadata | null>(null);
    const [activeLevel, setActiveLevel] = useState<TabLevel>(1);
    
    // Level 1 요약
    const [level1Summary, setLevel1Summary] = useState<InsuranceSummary | null>(null);
    
    // Level 2 섹션 요약들
    const [level2Summaries, setLevel2Summaries] = useState<InsuranceSummary[]>([]);
    
    // Level 3 청크 수
    const [chunksCount, setChunksCount] = useState(0);
    
    // Level 2 아코디언 상태
    const [openAccordion, setOpenAccordion] = useState<number | null>(null);
    
    // Level 3 검색
    const [searchQuery, setSearchQuery] = useState('');
    const [searchResults, setSearchResults] = useState<any[]>([]);
    const [searching, setSearching] = useState(false);

    // 인덱싱 히스토리
    const [history, setHistory] = useState<Array<{
        id: string;
        status: string;
        chunksCount: number;
        error: string | null;
        isReindex: boolean;
        createdAt: string | null;
        updatedAt: string | null;
    }>>([]);
    const [historyLoading, setHistoryLoading] = useState(false);

    useEffect(() => {
        async function fetchData() {
            try {
                setLoading(true);
                
                // 메타데이터 조회
                const metaRes = await fetch(`/api/admin/insurance/terms/${productId}`);
                if (!metaRes.ok) throw new Error('상품 정보 로드 실패');
                const metaData = await metaRes.json();
                setMetadata(metaData.metadata);
                
                // 요약 조회
                const summaryRes = await fetch(`/api/admin/insurance/terms/${productId}/summaries`);
                if (summaryRes.ok) {
                    const summaryData = await summaryRes.json();
                    const summaries = summaryData.summaries || [];
                    setLevel1Summary(summaries.find((s: InsuranceSummary) => s.level === 1) || null);
                    setLevel2Summaries(summaries.filter((s: InsuranceSummary) => s.level === 2));
                    setChunksCount(summaryData.chunksCount || 0);
                }
            } catch (e) {
                setError(e instanceof Error ? e.message : '알 수 없는 오류');
            } finally {
                setLoading(false);
            }
        }
        
        if (productId) {
            fetchData();
        }
    }, [productId]);

    useEffect(() => {
        if (!productId) return;
        async function fetchHistory() {
            setHistoryLoading(true);
            try {
                const res = await fetch(`/api/admin/insurance/terms/${productId}/history`);
                if (res.ok) {
                    const data = await res.json();
                    setHistory(data.history || []);
                }
            } catch (e) {
                console.error('History fetch error:', e);
            } finally {
                setHistoryLoading(false);
            }
        }
        fetchHistory();
    }, [productId]);

    const handleSearch = async () => {
        if (!searchQuery.trim()) return;
        
        setSearching(true);
        try {
            const res = await fetch(`/api/admin/insurance/terms/${productId}/search`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ query: searchQuery.trim() })
            });
            
            if (res.ok) {
                const data = await res.json();
                setSearchResults(data.results || []);
            }
        } catch (e) {
            console.error('Search error:', e);
        } finally {
            setSearching(false);
        }
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
        );
    }

    if (error || !metadata) {
        return (
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
                {error || '상품 정보를 찾을 수 없습니다.'}
            </div>
        );
    }

    return (
        <div className="space-y-6">
            {/* 뒤로가기 */}
            <Link
                href="/admin/terms"
                className="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-800"
            >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                </svg>
                약관 목록으로
            </Link>

            {/* 상품 정보 헤더 */}
            <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl p-6">
                <div className="flex items-start justify-between">
                    <div>
                        <div className="flex items-center gap-2 mb-2">
                            <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
                                {categoryLabels[metadata.category]}
                            </span>
                            {metadata.isSalesStopped && (
                                <span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
                                    판매중단
                                </span>
                            )}
                        </div>
                        <h1 className="text-2xl font-bold">{metadata.productName}</h1>
                        <p className="text-sm opacity-80 mt-1">{metadata.companyName}</p>
                    </div>
                    <div className="text-right text-sm opacity-80">
                        {metadata.pageCount && <p>{metadata.pageCount}p</p>}
                        {metadata.effectiveDateRange?.start && (
                            <p>{metadata.effectiveDateRange.start}</p>
                        )}
                    </div>
                </div>
            </div>

            {/* Level 탭 */}
            <div className="flex border-b border-slate-200 bg-white rounded-t-xl">
                {[
                    { level: 1 as TabLevel, label: '핵심 요약', icon: '💡', desc: '전체 핵심 내용' },
                    { level: 2 as TabLevel, label: '섹션별 요약', icon: '📑', desc: `${level2Summaries.length}개 섹션` },
                    { level: 3 as TabLevel, label: '원문 검색', icon: '🔍', desc: `${chunksCount}개 청크` },
                ].map(tab => (
                    <button
                        key={tab.level}
                        onClick={() => setActiveLevel(tab.level)}
                        className={`flex-1 py-4 px-4 text-center transition-colors relative ${
                            activeLevel === tab.level
                                ? 'text-blue-700 font-semibold'
                                : 'text-slate-500 hover:text-slate-700'
                        }`}
                    >
                        <div className="flex items-center justify-center gap-2">
                            <span>{tab.icon}</span>
                            <span>{tab.label}</span>
                        </div>
                        <p className="text-xs mt-0.5 opacity-70">{tab.desc}</p>
                        {activeLevel === tab.level && (
                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"></div>
                        )}
                    </button>
                ))}
            </div>

            {/* Level별 컨텐츠 */}
            <div className="bg-white border border-t-0 border-slate-200 rounded-b-xl p-6 min-h-[300px]">
                {/* Level 1: 핵심 요약 */}
                {activeLevel === 1 && (
                    <div className="space-y-4">
                        {level1Summary ? (
                            <>
                                <div className="bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6">
                                    <div className="flex items-start gap-4">
                                        <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                            <span className="text-2xl">💡</span>
                                        </div>
                                        <div className="flex-1">
                                            <div className="flex items-center gap-2 mb-2">
                                                <h3 className="font-bold text-blue-900">핵심 요약</h3>
                                                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">
                                                    Level 1
                                                </span>
                                            </div>
                                            <p className="text-slate-800 leading-relaxed whitespace-pre-wrap">
                                                {level1Summary.content}
                                            </p>
                                            {level1Summary.pageRange && (
                                                <p className="text-xs text-slate-500 mt-3">
                                                    참조: {level1Summary.pageRange.start}-{level1Summary.pageRange.end}p
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            </>
                        ) : (
                            <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 text-center">
                                <span className="text-3xl mb-3 block">⏳</span>
                                <h3 className="font-semibold text-amber-800 mb-1">요약 생성 중</h3>
                                <p className="text-sm text-amber-700">
                                    이 상품의 핵심 요약이 생성 중입니다. 잠시 후 다시 확인해주세요.
                                </p>
                            </div>
                        )}
                    </div>
                )}

                {/* Level 2: 섹션별 요약 */}
                {activeLevel === 2 && (
                    <div className="space-y-2">
                        {level2Summaries.length > 0 ? (
                            <>
                                <div className="text-sm text-slate-600 mb-3">
                                    총 <span className="font-semibold">{level2Summaries.length}</span>개 섹션
                                </div>
                                <div className="divide-y divide-slate-200 border border-slate-200 rounded-xl overflow-hidden">
                                    {level2Summaries.map((summary, index) => {
                                        const isOpen = openAccordion === index;
                                        return (
                                            <div key={summary.id || index} className="bg-white">
                                                <button
                                                    onClick={() => setOpenAccordion(isOpen ? null : index)}
                                                    className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-slate-50 transition-colors"
                                                >
                                                    <div className="flex items-center gap-3 min-w-0">
                                                        <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
                                                            isOpen ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600'
                                                        }`}>
                                                            {index + 1}
                                                        </span>
                                                        <span className="font-medium text-slate-800 truncate">
                                                            {summary.sectionTitle || `섹션 ${index + 1}`}
                                                        </span>
                                                        {summary.pageRange && (
                                                            <span className="text-xs text-slate-400">
                                                                {summary.pageRange.start}-{summary.pageRange.end}p
                                                            </span>
                                                        )}
                                                    </div>
                                                    <svg
                                                        className={`w-5 h-5 text-slate-400 transition-transform ${isOpen ? 'rotate-180' : ''}`}
                                                        fill="none"
                                                        viewBox="0 0 24 24"
                                                        stroke="currentColor"
                                                    >
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                                    </svg>
                                                </button>
                                                {isOpen && (
                                                    <div className="px-4 pb-4">
                                                        <div className="pl-9 text-sm text-slate-700 leading-relaxed whitespace-pre-wrap">
                                                            {summary.content}
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            </>
                        ) : (
                            <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 text-center">
                                <span className="text-3xl mb-3 block">⏳</span>
                                <h3 className="font-semibold text-amber-800 mb-1">섹션 요약 생성 중</h3>
                                <p className="text-sm text-amber-700">
                                    Level 1 요약이 먼저 생성된 후 섹션별 요약이 생성됩니다.
                                </p>
                            </div>
                        )}
                    </div>
                )}

                {/* Level 3: 원문 검색 */}
                {activeLevel === 3 && (
                    <div className="space-y-4">
                        <div className="flex gap-2">
                            <input
                                type="text"
                                value={searchQuery}
                                onChange={e => setSearchQuery(e.target.value)}
                                onKeyDown={e => e.key === 'Enter' && handleSearch()}
                                placeholder="약관 내용 검색... (예: 사망보험금, 면책사항)"
                                className="flex-1 px-4 py-3 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                            />
                            <button
                                onClick={handleSearch}
                                disabled={searching || !searchQuery.trim()}
                                className="px-6 py-3 bg-blue-600 text-white rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {searching ? '검색 중...' : '검색'}
                            </button>
                        </div>

                        <div className="text-sm text-slate-600">
                            총 <span className="font-semibold">{chunksCount}</span>개 청크 검색 가능
                        </div>

                        {searchResults.length > 0 && (
                            <div className="space-y-2">
                                <h4 className="text-sm font-semibold text-slate-700">
                                    검색 결과 ({searchResults.length}건)
                                </h4>
                                <div className="divide-y divide-slate-200 border border-slate-200 rounded-xl overflow-hidden">
                                    {searchResults.map((result, index) => (
                                        <div key={index} className="p-4 bg-white hover:bg-slate-50">
                                            <div className="flex items-center gap-2 mb-1">
                                                <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">
                                                    {result.chunk?.pageNumber}p
                                                </span>
                                                <span className="text-xs text-slate-400">
                                                    유사도: {(result.score * 100).toFixed(1)}%
                                                </span>
                                            </div>
                                            <p className="text-sm text-slate-700 line-clamp-3">
                                                {result.chunk?.chunkText?.slice(0, 200)}...
                                            </p>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        {!searching && searchResults.length === 0 && searchQuery && (
                            <div className="text-center py-8 text-slate-500">
                                검색 결과가 없습니다.
                            </div>
                        )}

                        {!searchQuery && (
                            <div className="text-center py-8 text-slate-500">
                                검색어를 입력하고 검색 버튼을 클릭하세요
                            </div>
                        )}
                    </div>
                )}
            </div>

            {/* 인덱싱 히스토리 섹션 (Item 24) */}
            <div className="bg-white border border-slate-200 rounded-xl p-6">
                <h2 className="text-lg font-semibold text-slate-800 mb-4">인덱싱 히스토리</h2>
                {historyLoading ? (
                    <div className="flex items-center justify-center py-8">
                        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                    </div>
                ) : history.length === 0 ? (
                    <p className="text-sm text-slate-500 text-center py-6">인덱싱 히스토리가 없습니다.</p>
                ) : (
                    <div className="space-y-3">
                        {history.map((item, index) => {
                            const statusColor =
                                item.status === 'complete' ? 'bg-emerald-500' :
                                item.status === 'failed' ? 'bg-red-500' :
                                item.status === 'processing' ? 'bg-blue-500' :
                                'bg-amber-500';
                            const statusLabel =
                                item.status === 'complete' ? '완료' :
                                item.status === 'failed' ? '실패' :
                                item.status === 'processing' ? '진행 중' :
                                '대기';
                            return (
                                <div key={item.id} className="flex items-start gap-4">
                                    {/* 타임라인 도트 */}
                                    <div className="flex flex-col items-center">
                                        <div className={`w-3 h-3 rounded-full flex-shrink-0 mt-1 ${statusColor}`}></div>
                                        {index < history.length - 1 && (
                                            <div className="w-px flex-1 bg-slate-200 mt-1" style={{ minHeight: '24px' }}></div>
                                        )}
                                    </div>
                                    {/* 히스토리 내용 */}
                                    <div className="flex-1 pb-3">
                                        <div className="flex items-center gap-2 flex-wrap">
                                            <span className={`text-xs px-2 py-0.5 rounded-full text-white ${statusColor}`}>
                                                {statusLabel}
                                            </span>
                                            {item.isReindex && (
                                                <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-600">
                                                    재인덱싱
                                                </span>
                                            )}
                                            {item.chunksCount > 0 && (
                                                <span className="text-xs text-slate-500">{item.chunksCount}개 청크</span>
                                            )}
                                        </div>
                                        {item.error && (
                                            <p className="text-xs text-red-600 mt-1 break-all">{item.error}</p>
                                        )}
                                        <p className="text-xs text-slate-400 mt-1">
                                            {item.createdAt
                                                ? new Date(item.createdAt).toLocaleString('ko-KR', {
                                                    year: 'numeric', month: '2-digit', day: '2-digit',
                                                    hour: '2-digit', minute: '2-digit'
                                                })
                                                : '날짜 없음'}
                                        </p>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>
        </div>
    );
}