import React, { useState, useEffect, useRef } from 'react';
import { Box, Typography } from '@mui/material';
import { Schedule } from '@mui/icons-material';

interface CandleTimeRemainingProps {
  /** 마지막 캔들 시간 (ISO string or timestamp) */
  lastCandleTime: string | number;
  /** 차트 interval (예: '1m', '5m', '1h', '1d') */
  interval: string;
  /** 표시 여부 */
  visible?: boolean;
  /** 차트 컨테이너 너비 */
  chartWidth?: number;
}

/**
 * interval 문자열을 밀리초로 변환
 * @param interval 예: '1m', '5m', '15m', '1h', '4h', '1d', '1w'
 * @returns 밀리초
 */
function intervalToMs(interval: string): number {
  const match = interval.match(/^(\d+)([mhdw])$/);
  if (!match) return 60000; // 기본값 1분

  const value = parseInt(match[1]);
  const unit = match[2];

  switch (unit) {
    case 'm': return value * 60 * 1000;           // 분
    case 'h': return value * 60 * 60 * 1000;      // 시간
    case 'd': return value * 24 * 60 * 60 * 1000; // 일
    case 'w': return value * 7 * 24 * 60 * 60 * 1000; // 주
    default: return 60000;
  }
}

/**
 * 마지막 캔들 시간을 기준으로 다음 캔들 시작 시간 계산
 * @param lastCandleTime 마지막 캔들의 시작 시간 (timestamp)
 * @param intervalMs interval 밀리초
 * @returns 다음 캔들 시작 시간 (timestamp)
 */
function getNextCandleTime(lastCandleTime: number, intervalMs: number): number {
  // 마지막 캔들의 시작 시간을 interval 경계로 정렬
  const alignedLastTime = Math.floor(lastCandleTime / intervalMs) * intervalMs;
  // 다음 캔들 시작 시간 = 마지막 캔들 시작 + interval
  return alignedLastTime + intervalMs;
}

/**
 * 남은 시간을 포맷팅 (MM:SS 형식)
 */
function formatTimeRemaining(ms: number): string {
  if (ms <= 0) return '00:00';
  
  const totalSeconds = Math.floor(ms / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  // 1시간 이상인 경우 HH:MM:SS
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;
    return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }

  // 1시간 미만인 경우 MM:SS
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

/**
 * 업비트 스타일의 봉 완성 시간 표시 컴포넌트
 * 마지막 캔들 우측에 다음 캔들까지 남은 시간을 표시
 */
const CandleTimeRemaining: React.FC<CandleTimeRemainingProps> = ({
  lastCandleTime,
  interval,
  visible = true,
  chartWidth = 0,
}) => {
  const [timeRemaining, setTimeRemaining] = useState<number>(0);
  const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
  const prevLastCandleTimeRef = useRef<number>(0);
  const isRefreshingRef = useRef<boolean>(false);

  // lastCandleTime 변경 감지 - 새로운 캔들이 추가되면 갱신 완료
  useEffect(() => {
    const lastTime = typeof lastCandleTime === 'string' 
      ? new Date(lastCandleTime).getTime() 
      : lastCandleTime;
    
    // lastCandleTime이 실제로 변경되면 갱신 완료
    if (prevLastCandleTimeRef.current !== 0 && prevLastCandleTimeRef.current !== lastTime) {
      console.log(`✅ [캔들 갱신 완료] 새 캔들 추가 감지: ${new Date(lastTime).toISOString()}`);
      setIsRefreshing(false);
      isRefreshingRef.current = false;
    }
    
    prevLastCandleTimeRef.current = lastTime;
  }, [lastCandleTime]);

  useEffect(() => {
    if (!visible) return;

    const updateTimeRemaining = () => {
      const now = Date.now();
      const intervalMs = intervalToMs(interval);
      
      // ✅ 마지막 캔들 시간 기준으로 다음 캔들 시작 시간 계산
      const lastTime = typeof lastCandleTime === 'string' 
        ? new Date(lastCandleTime).getTime() 
        : lastCandleTime;
      
      const nextCandleTime = getNextCandleTime(lastTime, intervalMs);
      let remaining = nextCandleTime - now;
      
      // 음수가 되면 갱신 시작
      if (remaining < 0) {
        if (!isRefreshingRef.current) {
          console.log(`🔄 [캔들 갱신 시작] remaining < 0, 다음 캔들 대기 중...`);
          setIsRefreshing(true);
          isRefreshingRef.current = true;
        }
        // 다음 주기까지의 시간 계산 (갱신 중에도 시간 표시)
        remaining = intervalMs + (remaining % intervalMs);
      }
      
      const newTimeRemaining = Math.max(0, remaining);
      setTimeRemaining(newTimeRemaining);
    };

    // 초기 업데이트
    updateTimeRemaining();

    // 1초마다 업데이트
    const timer = setInterval(updateTimeRemaining, 1000);

    return () => clearInterval(timer);
  }, [lastCandleTime, interval, visible]);

  // ✅ visible이 false일 때만 숨김 (timeRemaining === 0일 때도 계속 표시)
  if (!visible) {
    return null;
  }

  return (
    <Box
      sx={{
        position: 'absolute',
        right: 8, // ✅ 범례가 좌측으로 이동하여 우측에 배치
        top: 8,
        zIndex: 100,
        display: 'flex',
        flexDirection: 'row', // ✅ 가로 배치
        alignItems: 'center',
        gap: 1,
        pointerEvents: 'none', // 클릭 이벤트 통과
      }}
    >
      {/* 다음 캔들 생성 시간 - 아이콘과 텍스트 */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
          bgcolor: isRefreshing ? 'rgba(255, 152, 0, 0.1)' : 'rgba(0, 0, 0, 0.6)',
          backdropFilter: 'blur(4px)',
          px: 1.5,
          py: 0.5,
          borderRadius: 1,
          border: isRefreshing ? '1px solid rgba(255, 152, 0, 0.3)' : '1px solid rgba(255, 255, 255, 0.1)',
        }}
      >
        <Schedule sx={{ fontSize: 14, color: isRefreshing ? '#ff9800' : '#90caf9' }} />
        <Typography
          variant="caption"
          sx={{
            fontSize: '11px',
            color: isRefreshing ? '#ff9800' : '#90caf9',
            fontWeight: 500,
            letterSpacing: '0.5px',
          }}
        >
          {isRefreshing ? '갱신중...' : '다음 봉'}
        </Typography>
      </Box>

      {/* 남은 시간 카운트다운 - 바로 옆에 배치 */}
      <Box
        sx={{
          bgcolor: isRefreshing ? 'rgba(255, 152, 0, 0.15)' : 'rgba(33, 150, 243, 0.15)',
          backdropFilter: 'blur(4px)',
          px: 1.5,
          py: 0.5,
          borderRadius: 1,
          border: isRefreshing ? '1px solid rgba(255, 152, 0, 0.3)' : '1px solid rgba(33, 150, 243, 0.3)',
          boxShadow: isRefreshing ? '0 2px 8px rgba(255, 152, 0, 0.2)' : '0 2px 8px rgba(33, 150, 243, 0.2)',
        }}
      >
        <Typography
          variant="body2"
          sx={{
            fontSize: '14px',
            fontWeight: 600,
            color: isRefreshing ? '#ff9800' : '#2196f3',
            fontFamily: 'monospace',
            letterSpacing: '0.5px',
          }}
        >
          {formatTimeRemaining(timeRemaining)}
        </Typography>
      </Box>
    </Box>
  );
};

export default CandleTimeRemaining;
