/**
 * 알림 상태 관리 커스텀 훅
 * - 종목별 알림 상태 조회/업데이트
 * - 이벤트 기반 동기화
 * - 중복 요청 방지
 */

import { useState, useEffect, useCallback, useRef } from 'react';
import { getAlertBySymbol } from '../services/alertApi';

interface AlertStatus {
  enabled: boolean;
  alertId: number | null;
  loading: boolean;
}

export function useAlertStatus(symbol: string | null) {
  const [alertEnabled, setAlertEnabled] = useState<boolean>(false);
  const [alertId, setAlertId] = useState<number | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  
  const loadingRef = useRef<boolean>(false);
  const symbolRef = useRef<string | null>(symbol);

  // symbol 변경 추적
  useEffect(() => {
    symbolRef.current = symbol;
  }, [symbol]);

  const loadAlertStatus = useCallback(async (forceSymbol?: string) => {
    const targetSymbol = forceSymbol || symbolRef.current;
    
    if (!targetSymbol) {
      setAlertEnabled(false);
      setAlertId(null);
      setLoading(false);
      return;
    }

    // 중복 요청 방지
    if (loadingRef.current) {
      console.log(`⏳ [Alert] 이미 로딩 중, 스킵: ${targetSymbol}`);
      return;
    }

    try {
      loadingRef.current = true;
      setLoading(true);
      
      console.log(`🔔 [Alert] 상태 조회: ${targetSymbol}`);
      const alert = await getAlertBySymbol(targetSymbol);
      
      // symbol이 변경되었으면 업데이트하지 않음
      if (symbolRef.current !== targetSymbol) {
        console.log(`⚠️ [Alert] Symbol 변경됨, 업데이트 스킵`);
        return;
      }
      
      if (alert) {
        setAlertEnabled(alert.enabled || false);
        setAlertId(alert.id || null);
      } else {
        setAlertEnabled(false);
        setAlertId(null);
      }
    } catch (error) {
      console.error('알림 상태 조회 실패:', error);
      setAlertEnabled(false);
      setAlertId(null);
    } finally {
      loadingRef.current = false;
      setLoading(false);
    }
  }, []);

  // symbol 변경 시 알림 상태 로드
  useEffect(() => {
    loadAlertStatus();
  }, [symbol, loadAlertStatus]);

  // 알림 설정 화면에서 변경 시 동기화
  useEffect(() => {
    const handleCryptoAlertChanged = (e: Event) => {
      const detail = (e as CustomEvent).detail as { symbol?: string };
      if (!detail?.symbol || detail.symbol === symbolRef.current) {
        console.log(`🔄 [Alert] 이벤트 수신, 재조회`);
        loadAlertStatus();
      }
    };

    window.addEventListener('cryptoAlertChanged', handleCryptoAlertChanged);
    return () => window.removeEventListener('cryptoAlertChanged', handleCryptoAlertChanged);
  }, [loadAlertStatus]);

  // 탭 전환 후 복귀 시 재조회
  useEffect(() => {
    const handleVisibilityChange = () => {
      if (!document.hidden && symbolRef.current) {
        console.log(`👁️ [Alert] 탭 복귀, 재조회`);
        loadAlertStatus();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
  }, [loadAlertStatus]);

  return {
    alertEnabled,
    alertId,
    loading,
    reload: loadAlertStatus,
    setAlertEnabled,
    setAlertId,
  };
}
