'use client';

import { useRef, useEffect, useCallback, useState } from 'react';
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition';

interface TermVersion {
    effectiveDate: string;
    endDate: string | null;
    isCurrent: boolean;
}

interface SearchInputProps {
    searchMode: 'normal' | 'ai' | 'insurance';
    setSearchMode: (mode: 'normal' | 'ai' | 'insurance') => void;
    searchQuery: string;
    setSearchQuery: (query: string) => void;
    onDebouncedQuery: (query: string) => void;
    onAISearch: (query: string) => void;
    isSearching: boolean;
    apiKey: string | null;
    inputRef: React.RefObject<HTMLInputElement | null>;
    targetDate: string | null;
    setTargetDate: (date: string | null) => void;
    selectedProductId?: string;
}

export default function SearchInput({
    searchMode,
    setSearchMode,
    searchQuery,
    setSearchQuery,
    onDebouncedQuery,
    onAISearch,
    isSearching,
    apiKey,
    inputRef,
    targetDate,
    setTargetDate,
    selectedProductId,
}: SearchInputProps) {
    const debounceRef = useRef<NodeJS.Timeout | null>(null);
    const [voiceError, setVoiceError] = useState<string | null>(null);
    const [suggestions, setSuggestions] = useState<Array<{ productId: string; productName: string; companyName: string; generationType: string }>>([]);
    const [showSuggestions, setShowSuggestions] = useState(false);
    const [selectedIndex, setSelectedIndex] = useState(-1);
    const autocompleteRef = useRef<NodeJS.Timeout | null>(null);

    // CL-7: 과거 약관 버전 조회 관련 state
    const [versionMode, setVersionMode] = useState<'current' | 'historical'>('current');
    const [versions, setVersions] = useState<TermVersion[]>([]);
    const [loadingVersions, setLoadingVersions] = useState(false);
    const [joinDate, setJoinDate] = useState<string>(''); // YYYY-MM 형식

    // 🎤 음성 검색 훅
    const {
        isListening,
        isSupported: isVoiceSupported,
        startListening,
        stopListening,
        resetTranscript,
    } = useSpeechRecognition({
        lang: 'ko-KR',
        continuous: false,
        interimResults: true,
        onResult: (text, isFinal) => {
            if (isFinal) {
                setSearchQuery(text);
                // AI 모드 → 자동 매직 검색 실행
                if (searchMode === 'ai') {
                    setTimeout(() => onAISearch(text), 200);
                } else {
                    // 일반 모드 → 디바운스 트리거
                    onDebouncedQuery(text);
                }
            } else {
                // interim 결과 → 실시간 검색어 반영
                setSearchQuery(text);
            }
        },
        onError: (err) => {
            setVoiceError(err);
            setTimeout(() => setVoiceError(null), 3000);
        },
    });

    const handleVoiceToggle = () => {
        if (isListening) {
            stopListening();
        } else {
            resetTranscript();
            setSearchQuery('');
            setVoiceError(null);
            startListening();
        }
    };

    function handleSelectSuggestion(item: typeof suggestions[0]) {
        setSearchQuery(item.productName);
        setShowSuggestions(false);
        setSuggestions([]);
        setSelectedIndex(-1);
        onDebouncedQuery(item.productName);
    }

    // S2: 일반 검색 디바운싱 (300ms)
    const handleChange = useCallback((value: string) => {
        setSearchQuery(value);
        if (searchMode === 'normal') {
            if (debounceRef.current) clearTimeout(debounceRef.current);
            debounceRef.current = setTimeout(() => {
                onDebouncedQuery(value);
            }, 300);

            // 자동완성 API 호출
            if (value.trim().length >= 2) {
                if (autocompleteRef.current) clearTimeout(autocompleteRef.current);
                autocompleteRef.current = setTimeout(async () => {
                    try {
                        const res = await fetch(`/api/ai/autocomplete?q=${encodeURIComponent(value)}`);
                        if (res.ok) {
                            const data = await res.json();
                            setSuggestions(Array.isArray(data) ? data : []);
                            setShowSuggestions(true);
                        }
                    } catch { /* silent */ }
                }, 300);
            } else {
                setSuggestions([]);
                setShowSuggestions(false);
            }
        }
    }, [searchMode, setSearchQuery, onDebouncedQuery]);

    // CL-7: 버전 모드 변경 처리
    const handleVersionModeChange = useCallback((mode: 'current' | 'historical') => {
        setVersionMode(mode);
        if (mode === 'current') {
            setTargetDate(null);
            setJoinDate('');
            setVersions([]);
        }
    }, [setTargetDate]);

    // CL-7: 상품 ID 또는 버전 모드 변경 시 versions API 호출
    useEffect(() => {
        if (versionMode !== 'historical' || !selectedProductId) {
            setVersions([]);
            return;
        }
        let cancelled = false;
        setLoadingVersions(true);
        fetch(`/api/ai/versions?productId=${encodeURIComponent(selectedProductId)}`)
            .then(res => res.ok ? res.json() : Promise.reject(res))
            .then(data => {
                if (!cancelled) {
                    setVersions(Array.isArray(data?.versions) ? data.versions : []);
                }
            })
            .catch(() => {
                if (!cancelled) setVersions([]);
            })
            .finally(() => {
                if (!cancelled) setLoadingVersions(false);
            });
        return () => { cancelled = true; };
    }, [versionMode, selectedProductId]);

    // CL-7: 가입일 입력 시 매핑되는 버전을 자동 선택 (클라이언트 필터링)
    const handleJoinDateChange = useCallback((value: string) => {
        setJoinDate(value);
        if (!value) {
            setTargetDate(null);
            return;
        }
        // versions 배열에서 해당 날짜에 해당하는 버전 찾기
        const inputDate = value + '-01'; // YYYY-MM → YYYY-MM-01 비교용
        const matched = versions.find(v => {
            const start = v.effectiveDate;
            const end = v.endDate ?? '9999-12-31';
            return inputDate >= start && inputDate <= end;
        });
        if (matched) {
            setTargetDate(matched.effectiveDate);
        } else if (versions.length === 0) {
            // versions 미로드 상태: 입력값을 그대로 targetDate로 설정
            setTargetDate(value);
        } else {
            setTargetDate(null);
        }
    }, [versions, setTargetDate]);

    // CL-7: 버전 드롭다운 레이블 생성
    function formatVersionLabel(v: TermVersion): string {
        const start = v.effectiveDate.slice(0, 7); // YYYY-MM
        if (v.isCurrent) return `${start} (현행)`;
        const end = v.endDate ? v.endDate.slice(0, 7) : '';
        return end ? `${start} ~ ${end}` : start;
    }

    // cleanup
    useEffect(() => {
        return () => {
            if (debounceRef.current) clearTimeout(debounceRef.current);
            if (autocompleteRef.current) clearTimeout(autocompleteRef.current);
        };
    }, []);

    // CL-7: searchMode가 ai 외로 바뀌면 버전 관련 상태 초기화
    useEffect(() => {
        if (searchMode !== 'ai') {
            setVersionMode('current');
            setTargetDate(null);
            setJoinDate('');
            setVersions([]);
        }
    }, [searchMode, setTargetDate]);

    // CL-7: joinDate에 매핑된 버전 표시용
    const mappedVersion = joinDate
        ? versions.find(v => {
            const inputDate = joinDate + '-01';
            const start = v.effectiveDate;
            const end = v.endDate ?? '9999-12-31';
            return inputDate >= start && inputDate <= end;
        })
        : null;

    return (
        <div className="p-3 sm:p-4 bg-white grow-0 flex flex-col">
            {/* Search Mode Tabs */}
            <div className="flex bg-slate-50 p-1 sm:p-1.5 border-b border-gray-100 rounded-2xl mb-3">
                <button
                    onClick={() => setSearchMode('normal')}
                    className={`flex-1 py-3 sm:py-2 text-xs sm:text-xs font-bold rounded-2xl transition-all ${searchMode === 'normal' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                >
                    일반 검색
                </button>
                <button
                    onClick={() => setSearchMode('ai')}
                    className={`flex-1 py-3 sm:py-2 text-xs sm:text-xs font-bold rounded-2xl transition-all flex items-center justify-center gap-1.5 ${searchMode === 'ai' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                >
                    <span>✨</span> AI 매직 검색 {!apiKey && <span className="text-[10px] text-amber-500">(키 필요)</span>}
                </button>
                <button
                    onClick={() => setSearchMode('insurance')}
                    className={`flex-1 py-3 sm:py-2 text-xs sm:text-xs font-bold rounded-2xl transition-all flex items-center justify-center gap-1.5 ${searchMode === 'insurance' ? 'bg-white text-amber-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'}`}
                >
                    <span>📄</span> 약관 PDF
                </button>
            </div>

            {/* Voice Error Toast */}
            {voiceError && (
                <div className="mb-2 px-3 py-2 bg-red-50 text-red-600 text-xs rounded-xl flex items-center gap-2 animate-in fade-in">
                    <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    {voiceError}
                </div>
            )}

            {/* Search Input - insurance 탭에서는 숨김 */}
            {searchMode !== 'insurance' && (
                <div className="relative">

                    {/* CL-7: 조회 기준 라디오 — AI 매직 검색 모드에서만 표시 */}
                    {searchMode === 'ai' && (
                        <div className="mb-2 flex flex-col gap-1.5">
                            {/* 라디오 버튼 행 */}
                            <div className="flex items-center gap-4 px-1">
                                <label className="flex items-center gap-1.5 cursor-pointer select-none">
                                    <input
                                        type="radio"
                                        name="versionMode"
                                        value="current"
                                        checked={versionMode === 'current'}
                                        onChange={() => handleVersionModeChange('current')}
                                        className="w-3.5 h-3.5 accent-indigo-600"
                                    />
                                    <span className="text-xs text-slate-600 font-medium">현행 약관</span>
                                </label>
                                <label className="flex items-center gap-1.5 cursor-pointer select-none">
                                    <input
                                        type="radio"
                                        name="versionMode"
                                        value="historical"
                                        checked={versionMode === 'historical'}
                                        onChange={() => handleVersionModeChange('historical')}
                                        className="w-3.5 h-3.5 accent-indigo-600"
                                    />
                                    <span className="text-xs text-slate-600 font-medium">가입 시점 약관</span>
                                </label>
                            </div>

                            {/* CL-7: 가입 시점 약관 선택 시 추가 옵션 표시 */}
                            {versionMode === 'historical' && (
                                <div className="flex flex-col gap-2 px-1 pt-1 pb-2 bg-indigo-50/60 rounded-xl border border-indigo-100">
                                    {/* 가입일 직접 입력 */}
                                    <div className="flex items-center gap-2">
                                        <label className="text-xs text-slate-500 whitespace-nowrap min-w-[52px]">가입일</label>
                                        <input
                                            type="month"
                                            value={joinDate}
                                            onChange={e => handleJoinDateChange(e.target.value)}
                                            className="flex-1 text-xs border border-gray-200 rounded-xl px-2.5 py-1.5 bg-white focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-200 transition-all"
                                            placeholder="YYYY-MM"
                                        />
                                        {/* 매핑된 버전 인라인 표시 */}
                                        {joinDate && (
                                            <span className={`text-[11px] px-2 py-1 rounded-lg whitespace-nowrap ${mappedVersion ? 'bg-indigo-100 text-indigo-700 font-medium' : 'bg-slate-100 text-slate-400'}`}>
                                                {mappedVersion
                                                    ? formatVersionLabel(mappedVersion)
                                                    : versions.length > 0 ? '해당 버전 없음' : '버전 로딩 중...'}
                                            </span>
                                        )}
                                    </div>

                                    {/* 약관 버전 드롭다운 */}
                                    {(versions.length > 0 || loadingVersions) && (
                                        <div className="flex items-center gap-2">
                                            <label className="text-xs text-slate-500 whitespace-nowrap min-w-[52px]">버전 선택</label>
                                            {loadingVersions ? (
                                                <span className="text-xs text-slate-400 animate-pulse">버전 목록 로딩 중...</span>
                                            ) : (
                                                <select
                                                    value={targetDate ?? ''}
                                                    onChange={e => setTargetDate(e.target.value || null)}
                                                    className="flex-1 text-xs border border-gray-200 rounded-xl px-2.5 py-1.5 bg-white focus:outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-200 transition-all appearance-none cursor-pointer"
                                                >
                                                    <option value="">버전을 선택하세요</option>
                                                    {versions.map(v => (
                                                        <option key={v.effectiveDate} value={v.effectiveDate}>
                                                            {formatVersionLabel(v)}
                                                        </option>
                                                    ))}
                                                </select>
                                            )}
                                        </div>
                                    )}

                                    {/* selectedProductId 없을 때 안내 */}
                                    {!selectedProductId && !loadingVersions && versions.length === 0 && (
                                        <p className="text-[11px] text-slate-400 px-0.5">
                                            자동완성에서 상품을 선택하면 버전 목록이 표시됩니다.
                                        </p>
                                    )}
                                </div>
                            )}
                        </div>
                    )}

                <div className={`flex items-center bg-gray-50 border-2 transition-all duration-200 rounded-2xl px-3 sm:px-4 py-2 sm:py-3 ${isListening ? 'border-red-400 bg-red-50/30' : searchMode === 'ai' ? 'border-indigo-400 bg-indigo-50/30' : 'border-transparent focus-within:border-indigo-400 focus-within:bg-white'}`}>
                    {searchMode === 'ai' ? (
                        <span className="text-xl mr-3">💬</span>
                    ) : (
                        <svg className="w-5 h-5 text-indigo-500 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    )}
                    <input
                        ref={inputRef}
                        type="text"
                        role="combobox"
                        aria-label="검색"
                        aria-expanded={showSuggestions && suggestions.length > 0}
                        aria-autocomplete="list"
                        placeholder={isListening ? "🎤 말씀하세요..." : searchMode === 'ai' ? "상담에 필요한 지식을 질문해 보세요 (예: 암보험 면책기간 요약)" : "약관, 상품, 판매 노하우 검색..."}
                        className="flex-1 text-lg border-none focus:ring-0 placeholder-gray-400 bg-transparent outline-none p-0"
                        value={searchQuery}
                        onChange={(e) => handleChange(e.target.value)}
                        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
                        onKeyDown={(e) => {
                            if (showSuggestions && suggestions.length > 0) {
                                if (e.key === 'ArrowDown') {
                                    e.preventDefault();
                                    setSelectedIndex(prev => (prev + 1) % suggestions.length);
                                    return;
                                }
                                if (e.key === 'ArrowUp') {
                                    e.preventDefault();
                                    setSelectedIndex(prev => (prev - 1 + suggestions.length) % suggestions.length);
                                    return;
                                }
                                if (e.key === 'Enter' && selectedIndex >= 0) {
                                    e.preventDefault();
                                    handleSelectSuggestion(suggestions[selectedIndex]);
                                    return;
                                }
                                if (e.key === 'Escape') {
                                    setShowSuggestions(false);
                                    setSelectedIndex(-1);
                                    return;
                                }
                            }
                            if (e.key === 'Enter' && searchMode === 'ai') {
                                onAISearch(searchQuery);
                            }
                        }}
                    />

                    {/* 🎤 Voice Search Button */}
                    {isVoiceSupported && (
                        <button
                            onClick={handleVoiceToggle}
                            aria-label={isListening ? '음성 인식 중지' : '음성으로 검색'}
                            className={`ml-1 p-2.5 rounded-xl transition-all active:scale-90 ${isListening
                                ? 'bg-red-100 text-red-600 animate-pulse'
                                : 'text-slate-400 hover:text-indigo-600 hover:bg-indigo-50'
                                }`}
                        >
                            {isListening ? (
                                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                    <rect x="6" y="6" width="12" height="12" rx="2" />
                                </svg>
                            ) : (
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
                                </svg>
                            )}
                        </button>
                    )}

                    {searchMode === 'ai' && (
                        <button
                            onClick={() => onAISearch(searchQuery)}
                            disabled={isSearching || !searchQuery.trim()}
                            className="ml-2 bg-indigo-600 text-white px-3 sm:px-4 py-3 sm:py-1.5 rounded-xl text-xs sm:text-sm font-bold active:scale-95 disabled:opacity-50 transition-all flex flex-col items-center justify-center leading-tight min-w-[56px] sm:min-w-0 h-[56px] sm:h-auto"
                        >
                            {isSearching ? (
                                <span className="animate-pulse">...</span>
                            ) : (
                                <>
                                    <span className="sm:hidden">매직</span>
                                    <span className="sm:hidden">검색</span>
                                    <span className="hidden sm:inline">매직 검색</span>
                                </>
                            )}
                        </button>
                    )}
                </div>

                {/* 자동완성 드롭다운 */}
                {showSuggestions && suggestions.length > 0 && (
                    <div className="absolute left-0 right-0 top-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-50 max-h-60 overflow-y-auto">
                        {suggestions.map((item, idx) => (
                            <button
                                key={item.productId}
                                className={`w-full text-left px-4 py-2.5 text-sm hover:bg-indigo-50 transition-colors ${idx === selectedIndex ? 'bg-indigo-50 text-indigo-700' : 'text-gray-700'}`}
                                onMouseDown={(e) => e.preventDefault()}
                                onClick={() => handleSelectSuggestion(item)}
                            >
                                <span className="font-medium">{item.companyName}</span>
                                <span className="mx-1.5 text-gray-300">·</span>
                                <span>{item.productName}</span>
                            </button>
                        ))}
                    </div>
                )}
                </div>
            )}
        </div>
    );
}