/**
 * 비정상 궤적 모니터링 메인 애플리케이션
 */

import { fetchFilteredTracks, detectCustomTracks, moveTracksToAbnormal } from '../api/abnormal-tracks-api.js';
import { MapController } from '../components/map-controller.js';
import { VesselList } from '../components/vessel-list.js';
import { StatisticsPanel } from '../components/statistics-panel.js';
import { getDateRange, debounce } from '../utils/helpers.js';
import { REFRESH_INTERVAL, TABLE_TYPES } from '../utils/constants.js';

class AbnormalTracksApp {
    constructor() {
        this.mapController = new MapController('map');
        this.vesselList = new VesselList('vesselList');
        this.statisticsPanel = new StatisticsPanel();
        
        this.abnormalTracks = [];
        this.isCustomDetectionMode = false;
        this.customDetectedTracks = [];
        this.autoRefreshTimer = null;
        
        // 디바운스된 함수들
        this.debouncedLoadTracks = debounce(this.loadAbnormalTracks.bind(this), 300);
    }

    /**
     * 애플리케이션 초기화
     */
    async init() {
        try {
            // 컴포넌트 초기화
            await this.mapController.init();
            this.vesselList.init();
            this.statisticsPanel.init();
            
            // 이벤트 핸들러 설정
            this.setupEventHandlers();
            
            // 기본 날짜 설정 (최근 1일)
            this.setDateRange(1);
            
            // 초기 데이터 로드
            await this.loadAbnormalTracks();
            
            // 자동 새로고침 시작
            this.startAutoRefresh();
            
            console.log('Abnormal Tracks App initialized successfully');
        } catch (error) {
            console.error('Failed to initialize app:', error);
            this.showError('애플리케이션 초기화 중 오류가 발생했습니다.');
        }
    }

    /**
     * 이벤트 핸들러 설정
     */
    setupEventHandlers() {
        // 컴포넌트 이벤트 핸들러
        this.mapController.setEventHandlers({
            onTrackClick: (trackId) => this.handleMapTrackClick(trackId),
            onPointHover: (object, x, y) => this.handlePointHover(object, x, y)
        });
        
        this.vesselList.setEventHandlers({
            onVesselToggle: (vesselId) => this.handleVesselToggle(vesselId),
            onTrackSelect: (trackId, vesselId) => this.handleTrackSelect(trackId, vesselId),
            onCheckboxChange: () => this.handleCheckboxChange()
        });
        
        // UI 이벤트 핸들러
        this.setupUIEventHandlers();
    }

    /**
     * UI 이벤트 핸들러 설정
     */
    setupUIEventHandlers() {
        // 날짜 빠른 선택
        document.querySelectorAll('[data-days]').forEach(btn => {
            btn.addEventListener('click', () => {
                const days = parseInt(btn.dataset.days);
                this.setDateRange(days);
            });
        });
        
        // 조회 버튼
        document.getElementById('loadTracksBtn').addEventListener('click', () => {
            this.loadAbnormalTracks();
        });
        
        // 날짜 입력 변경
        document.getElementById('startDateInput').addEventListener('change', () => {
            if (document.getElementById('endDateInput').value) {
                this.debouncedLoadTracks();
            }
        });
        
        document.getElementById('endDateInput').addEventListener('change', () => {
            if (document.getElementById('startDateInput').value) {
                this.debouncedLoadTracks();
            }
        });
        
        // 선박 ID 엔터키 검색
        document.getElementById('vesselIdInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.loadAbnormalTracks();
            }
        });
        
        // 정렬 변경
        document.getElementById('sortSelect').addEventListener('change', (e) => {
            this.vesselList.setSortBy(e.target.value);
        });
        
        // 사용자 정의 검출
        document.getElementById('detectCustomBtn').addEventListener('click', () => {
            this.detectCustomAbnormalTracks();
        });
        
        // 전체 보기 / 선택 해제
        document.getElementById('showAllBtn').addEventListener('click', () => {
            this.showAllTracks();
        });
        
        document.getElementById('clearSelectionBtn').addEventListener('click', () => {
            this.clearSelection();
        });
        
        // 자동 검출 모드로 돌아가기
        document.getElementById('backToAutoBtn').addEventListener('click', () => {
            this.showAllTracks();
        });
        
        // 체크박스 전체 선택/해제
        document.getElementById('selectAllBtn').addEventListener('click', () => {
            this.selectAllTracks();
        });
        
        document.getElementById('deselectAllBtn').addEventListener('click', () => {
            this.deselectAllTracks();
        });
        
        // 비정상 이동
        document.getElementById('moveToAbnormalBtn').addEventListener('click', () => {
            this.showMoveToAbnormalModal();
        });
    }

    /**
     * 날짜 범위 설정
     */
    setDateRange(days) {
        const { startDate, endDate } = getDateRange(days);
        document.getElementById('startDateInput').value = startDate;
        document.getElementById('endDateInput').value = endDate;
    }

    /**
     * 비정상 궤적 데이터 로드
     */
    async loadAbnormalTracks() {
        try {
            this.vesselList.showLoading();
            
            const startDate = document.getElementById('startDateInput').value;
            const endDate = document.getElementById('endDateInput').value;
            const type = document.getElementById('typeSelect').value;
            const vesselId = document.getElementById('vesselIdInput').value;
            
            // 기본값 설정
            if (!startDate || !endDate) {
                this.setDateRange(1);
                return this.loadAbnormalTracks();
            }
            
            const filters = { startDate, endDate, type, vesselId };
            this.abnormalTracks = await fetchFilteredTracks(filters);
            
            this.vesselList.groupTracksByVessel(this.abnormalTracks);
            this.vesselList.render();
            
            this.statisticsPanel.updateStatistics(this.abnormalTracks);
            this.statisticsPanel.updateLegend(
                this.abnormalTracks, 
                this.vesselList.vesselGroups, 
                startDate, 
                endDate
            );
            
            this.mapController.updateMap(this.abnormalTracks);
            
            // 캐시 초기화
            this.mapController.clearCache();
            
        } catch (error) {
            console.error('Error loading abnormal tracks:', error);
            this.showError('데이터 로드 중 오류가 발생했습니다.');
        }
    }

    /**
     * 사용자 정의 비정상 궤적 검출
     */
    async detectCustomAbnormalTracks() {
        try {
            this.vesselList.showLoading();
            
            const tableType = document.getElementById('tableTypeSelect').value;
            const days = parseInt(document.getElementById('customPeriodSelect').value);
            const minDistance = parseFloat(document.getElementById('minDistanceInput').value) || 0;
            const minSpeed = parseFloat(document.getElementById('minSpeedInput').value) || 0;
            
            const now = new Date();
            const startTime = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
            
            const params = {
                tableType,
                startTime: startTime.toISOString().split('.')[0],
                endTime: now.toISOString().split('.')[0],
                minDistance,
                minSpeed
            };
            
            const tracks = await detectCustomTracks(params);
            
            // 사용자 정의 검출 모드 활성화
            this.isCustomDetectionMode = true;
            this.customDetectedTracks = tracks;
            this.abnormalTracks = tracks;
            
            this.vesselList.setCustomDetectionMode(true);
            this.vesselList.groupTracksByVessel(tracks);
            this.vesselList.render();
            
            this.statisticsPanel.updateStatistics(tracks);
            this.statisticsPanel.updateLegend(tracks, this.vesselList.vesselGroups);
            
            this.mapController.updateMap(tracks);
            
            // UI 상태 변경
            this.showCustomDetectionUI();
            
            alert(`${tracks.length}개의 궤적이 검출되었습니다.`);
            
        } catch (error) {
            console.error('Error detecting custom abnormal tracks:', error);
            this.showError('검출 중 오류가 발생했습니다.');
        }
    }

    /**
     * 사용자 정의 검출 UI 표시
     */
    showCustomDetectionUI() {
        document.getElementById('filterSection').style.display = 'none';
        document.getElementById('actionButtons').style.display = 'block';
        document.getElementById('backToAutoBtn').style.display = 'inline-block';
        
        this.stopAutoRefresh();
    }

    /**
     * 전체 보기 모드로 돌아가기
     */
    showAllTracks() {
        this.isCustomDetectionMode = false;
        this.vesselList.setCustomDetectionMode(false);
        
        document.getElementById('filterSection').style.display = 'block';
        document.getElementById('actionButtons').style.display = 'none';
        document.getElementById('backToAutoBtn').style.display = 'none';
        
        this.clearSelection();
        this.loadAbnormalTracks();
        this.startAutoRefresh();
    }

    /**
     * 선택 해제
     */
    clearSelection() {
        this.vesselList.selectedTracks.clear();
        this.vesselList.activeVesselId = null;
        this.vesselList.render();
        this.mapController.updateMap(this.abnormalTracks);
    }

    /**
     * 지도에서 트랙 클릭 처리
     */
    handleMapTrackClick(trackId) {
        const track = this.abnormalTracks.find(t => String(t.id) === String(trackId));
        if (!track) return;
        
        const vesselId = track.vesselId;
        
        // 선박 그룹 활성화 및 트랙 선택
        this.vesselList.toggleVessel(vesselId);
        this.vesselList.selectTrack(trackId, vesselId);
        
        this.mapController.updateMap(
            this.abnormalTracks,
            this.vesselList.selectedTracks,
            this.vesselList.activeVesselId
        );
        
        // 선택된 트랙으로 지도 조정
        this.mapController.fitToTracks([track]);
    }

    /**
     * 포인트 호버 처리
     */
    handlePointHover(object, x, y) {
        const tooltip = document.getElementById('tooltip');
        if (object) {
            tooltip.innerHTML = `
                <div class="tooltip-header">선박: ${object.vesselId}</div>
                <div class="tooltip-row">시간: ${object.time.toLocaleString('ko-KR')}</div>
                <div class="tooltip-row">포인트: ${object.index + 1} / ${object.totalPoints}</div>
            `;
            tooltip.style.left = (x + 10) + 'px';
            tooltip.style.top = (y - 10) + 'px';
            tooltip.style.display = 'block';
        } else {
            tooltip.style.display = 'none';
        }
    }

    /**
     * 선박 토글 처리
     */
    handleVesselToggle(vesselId) {
        this.mapController.updateMap(
            this.abnormalTracks,
            this.vesselList.selectedTracks,
            this.vesselList.activeVesselId
        );
        
        // 선박의 모든 트랙에 맞게 지도 조정
        const tracks = this.vesselList.vesselGroups.get(vesselId);
        if (tracks && tracks.length > 0) {
            this.mapController.fitToTracks(tracks);
        }
    }

    /**
     * 트랙 선택 처리
     */
    handleTrackSelect(trackId, vesselId) {
        this.mapController.updateMap(
            this.abnormalTracks,
            this.vesselList.selectedTracks,
            this.vesselList.activeVesselId
        );
        
        // 선택된 트랙으로 지도 조정
        const selectedTrack = this.abnormalTracks.find(t => String(t.id) === trackId);
        if (selectedTrack) {
            this.mapController.fitToTracks([selectedTrack]);
        }
    }

    /**
     * 체크박스 변경 처리
     */
    handleCheckboxChange() {
        const selectedTracks = this.vesselList.getSelectedCheckboxTracks();
        document.getElementById('selectedCount').textContent = selectedTracks.size;
        document.getElementById('moveToAbnormalBtn').disabled = selectedTracks.size === 0;
    }

    /**
     * 전체 선택
     */
    selectAllTracks() {
        document.querySelectorAll('.track-checkbox').forEach(checkbox => {
            checkbox.checked = true;
        });
        this.handleCheckboxChange();
    }

    /**
     * 전체 해제
     */
    deselectAllTracks() {
        document.querySelectorAll('.track-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        this.handleCheckboxChange();
    }

    /**
     * 비정상 이동 모달 표시
     */
    showMoveToAbnormalModal() {
        const selectedTracks = this.vesselList.getSelectedCheckboxTracks();
        if (selectedTracks.size === 0) {
            alert('선택된 궤적이 없습니다.');
            return;
        }
        
        // Bootstrap 모달 생성 및 표시 로직
        this.createMoveToAbnormalModal(selectedTracks);
    }

    /**
     * 비정상 이동 모달 생성
     */
    createMoveToAbnormalModal(selectedTracks) {
        const modalHtml = `
            <div class="modal fade" id="moveModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">비정상 궤적 이동</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">비정상 유형 선택</label>
                                <select class="form-select" id="abnormalTypeSelect">
                                    <option value="user_detected">사용자 검출</option>
                                    <option value="extreme_speed">극단적 비정상 속도</option>
                                    <option value="extreme_distance">극단적 이동거리</option>
                                    <option value="extreme_transition">극단적 bucket 전환</option>
                                    <option value="impossible_transition">물리적 불가능 전환</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">비정상 판단 이유</label>
                                <textarea class="form-control" id="abnormalReasonInput" rows="3" 
                                          placeholder="상세한 이유를 입력하세요...">사용자가 수동으로 검출</textarea>
                            </div>
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle"></i>
                                ${selectedTracks.size}개의 궤적이 비정상 테이블로 이동됩니다.
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
                            <button type="button" class="btn btn-danger" id="confirmMoveBtn">
                                <i class="bi bi-exclamation-triangle"></i> 이동
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // 기존 모달 제거
        const existingModal = document.getElementById('moveModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // 모달 추가 및 표시
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        const modal = new bootstrap.Modal(document.getElementById('moveModal'));
        modal.show();
        
        // 확인 버튼 이벤트
        document.getElementById('confirmMoveBtn').addEventListener('click', () => {
            this.confirmMoveToAbnormal(selectedTracks, modal);
        });
    }

    /**
     * 비정상 이동 확인
     */
    async confirmMoveToAbnormal(selectedTracks, modal) {
        try {
            const abnormalType = document.getElementById('abnormalTypeSelect').value;
            const reason = document.getElementById('abnormalReasonInput').value.trim();
            
            if (!reason) {
                alert('비정상 판단 이유를 입력해주세요.');
                return;
            }
            
            const tableType = document.getElementById('tableTypeSelect').value;
            
            // 선택된 트랙 정보 수집
            const tracks = [];
            selectedTracks.forEach(trackId => {
                const track = this.customDetectedTracks.find(t => String(t.id) === String(trackId));
                if (track) {
                    const timeBucketStr = track.timeBucket.includes(':') && track.timeBucket.split(':').length === 2 
                        ? track.timeBucket + ':00' 
                        : track.timeBucket;
                    
                    tracks.push({
                        sigSrcCd: track.sigSrcCd,
                        targetId: track.targetId,
                        timeBucket: timeBucketStr
                    });
                }
            });
            
            const params = { tableType, tracks, abnormalType, reason };
            const result = await moveTracksToAbnormal(params);
            
            if (result.success) {
                modal.hide();
                alert(result.message);
                this.detectCustomAbnormalTracks(); // 화면 새로고침
            } else {
                alert('이동 중 오류가 발생했습니다.');
            }
            
        } catch (error) {
            console.error('Error moving tracks to abnormal:', error);
            alert('이동 중 오류가 발생했습니다.');
        }
    }

    /**
     * 자동 새로고침 시작
     */
    startAutoRefresh() {
        if (this.autoRefreshTimer) {
            clearInterval(this.autoRefreshTimer);
        }
        
        this.autoRefreshTimer = setInterval(() => {
            if (!this.isCustomDetectionMode) {
                this.loadAbnormalTracks();
            }
        }, REFRESH_INTERVAL);
    }

    /**
     * 자동 새로고침 중지
     */
    stopAutoRefresh() {
        if (this.autoRefreshTimer) {
            clearInterval(this.autoRefreshTimer);
            this.autoRefreshTimer = null;
        }
    }

    /**
     * 에러 표시
     */
    showError(message) {
        console.error(message);
        const vesselList = document.getElementById('vesselList');
        if (vesselList) {
            vesselList.innerHTML = `
                <div class="error-message">
                    <i class="bi bi-exclamation-triangle"></i>
                    ${message}
                </div>
            `;
        }
    }
}

// 애플리케이션 시작
document.addEventListener('DOMContentLoaded', () => {
    const app = new AbnormalTracksApp();
    app.init().catch(error => {
        console.error('Failed to start application:', error);
    });
});