import React, { useRef, useEffect, useState } from 'react';
import { Box } from '@mui/material';
import { FibonacciTimezoneSettings, FibonacciLevel, FibonacciBaseline, defaultBaseline } from './FibonacciTimezoneDialog';

export interface FibonacciTimezoneObject {
  id: string;
  startTime: number; // Unix timestamp (seconds) - 기준점
  endTime: number; // Unix timestamp (seconds) - 두 번째 클릭 지점 (방향 결정용)
  baseInterval: number; // 방향 (1 = 오른쪽, -1 = 왼쪽)
  settings: FibonacciTimezoneSettings;
}

interface FibonacciTimezoneOverlayProps {
  objects: FibonacciTimezoneObject[];
  chartWidth: number;
  chartHeight: number; // 캔들차트 높이
  totalChartHeight?: number; // 캔들차트 + 모든 보조지표 차트 높이 (보조지표까지 보기 옵션용)
  timeScale: {
    from: number;
    to: number;
  };
  candleData: Array<{ time: string }>;
  timeToX: (time: number) => number | null; // ✅ 차트의 timeToCoordinate 함수 전달 (null 가능)
  onClick?: (objectId: string, event: React.MouseEvent) => void; // ✅ 클릭 핸들러
  onDoubleClick?: (objectId: string) => void;
  onDragStart?: (objectId: string, startX: number, startTime: number) => void;
  isDrawing?: boolean; // 드로잉 중인지 여부
  drawingStartTime?: number | null; // 드로잉 중 시작 시간
}

const FibonacciTimezoneOverlay: React.FC<FibonacciTimezoneOverlayProps> = ({
  objects,
  chartWidth,
  chartHeight,
  totalChartHeight,
  timeScale,
  candleData,
  timeToX: timeToXProp, // ✅ prop으로 받은 함수
  onClick,
  onDoubleClick,
  onDragStart,
  isDrawing = false,
  drawingStartTime = null,
}) => {
  const svgRef = useRef<SVGSVGElement>(null);

  // 시간을 캔들 인덱스로 변환 (가장 가까운 캔들 찾기)
  const timeToIndex = (time: number): number => {
    if (candleData.length === 0) return -1;
    
    let nearestIndex = 0;
    let minDiff = Infinity;
    
    for (let i = 0; i < candleData.length; i++) {
      const candleTime = new Date(candleData[i].time).getTime() / 1000;
      const diff = Math.abs(candleTime - time);
      
      if (diff < minDiff) {
        minDiff = diff;
        nearestIndex = i;
      }
    }
    
    return nearestIndex;
  };

  // 캔들 인덱스를 시간으로 변환
  const indexToTime = (index: number): number => {
    if (index < 0 || index >= candleData.length) return 0;
    return new Date(candleData[index].time).getTime() / 1000;
  };

  // ✅ prop으로 받은 timeToX 함수 사용
  const timeToX = timeToXProp;

  // 선 스타일을 SVG stroke-dasharray로 변환
  const getStrokeDasharray = (style: string): string => {
    switch (style) {
      case 'dashed':
        return '5,5';
      case 'dotted':
        return '2,2';
      default:
        return '0';
    }
  };

  const handleDoubleClick = (objectId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    if (onDoubleClick) {
      onDoubleClick(objectId);
    }
  };

  const handleMouseDown = (objectId: string, e: React.MouseEvent, startTime: number) => {
    e.stopPropagation();
    e.preventDefault(); // 기본 드래그 동작 방지
    console.log(`🖱️ [오버레이] mouseDown - objectId: ${objectId}, startTime: ${startTime}`);
    if (onDragStart) {
      const startX = e.clientX;
      onDragStart(objectId, startX, startTime);
    }
  };

  // ✅ 최대 높이 계산 (보조지표까지 보기가 활성화된 피보나치가 있을 경우)
  const maxHeight = objects.some(obj => obj.settings.showAcrossIndicators) && totalChartHeight
    ? totalChartHeight
    : chartHeight;

  return (
    <Box
      sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: maxHeight,
        pointerEvents: 'none',
        zIndex: 50,
        overflow: 'visible', // ✅ 오버플로우 허용
      }}
    >
      <svg
        ref={svgRef}
        width="100%"
        height={maxHeight}
        style={{ position: 'absolute', top: 0, left: 0 }}
        preserveAspectRatio="none"
      >
        {/* 드로잉 중일 때 기준선 표시 */}
        {isDrawing && drawingStartTime !== null && (() => {
          const x = timeToX(drawingStartTime);
          if (x === null) return null;
          return (
            <g>
              <line
                x1={x}
                y1={0}
                x2={x}
                y2={chartHeight}
                stroke="rgba(255, 255, 0, 0.8)" // 노란색 기준선
                strokeWidth={2}
                strokeDasharray="5,5"
              />
              <text
                x={x + 5}
                y={20}
                fill="rgba(255, 255, 0, 0.8)"
                fontSize="12px"
                fontWeight="bold"
              >
                기준점
              </text>
            </g>
          );
        })()}

        {/* 완성된 피보나치 타임존 표시 */}
        {objects
          .filter((obj) => obj.id !== 'temp-drawing') // 임시 드로잉 제외
          .map((obj) => {
            const startIndex = timeToIndex(obj.startTime);
            const endIndex = timeToIndex(obj.endTime);
            
            if (startIndex === -1 || endIndex === -1) {
              return null;
            }

            // baseInterval은 방향 (1 = 오른쪽, -1 = 왼쪽)
            const direction = obj.baseInterval;

            const startX = timeToX(obj.startTime);
            
            // ✅ 보조지표까지 보기 옵션에 따라 높이 결정
            const effectiveHeight = obj.settings.showAcrossIndicators && totalChartHeight 
              ? totalChartHeight 
              : chartHeight;
            
            // 디버깅: 설정 확인
            console.log(`🎨 [피보나치 렌더링] ID: ${obj.id}, 활성화된 레벨:`, obj.settings.levels.filter(l => l.enabled).map(l => l.value), `showAcrossIndicators: ${obj.settings.showAcrossIndicators}, effectiveHeight: ${effectiveHeight}`);

            return (
              <g
                key={obj.id}
              >
                {/* ✅ 기준선 (baseline) 렌더링 */}
                {(() => {
                  // ✅ baseline이 없으면 기본값 사용 (기존 저장된 데이터 호환)
                  const baseline = obj.settings.baseline || defaultBaseline;
                  console.log(`🎨 [피보나치 기준선 렌더링] ID: ${obj.id}, baseline:`, baseline);
                  const x = timeToX(obj.startTime);
                  if (x === null) return null;

                  return (
                    <g key={`${obj.id}-baseline`}>
                      {/* 투명한 클릭 영역 (드래그하기 쉽도록 넓게) */}
                      <line
                        x1={x}
                        y1={0}
                        x2={x}
                        y2={effectiveHeight}
                        stroke="transparent"
                        strokeWidth={40}
                        style={{ pointerEvents: 'auto', cursor: 'move' }}
                        onClick={(e) => {
                          e.stopPropagation();
                          if (onClick) {
                            onClick(obj.id, e);
                          }
                        }}
                        onMouseDown={(e) => {
                          e.stopPropagation();
                          e.preventDefault();
                          if (onDragStart) {
                            const startX = e.clientX;
                            onDragStart(obj.id, startX, obj.startTime);
                          }
                        }}
                        onDoubleClick={(e) => {
                          e.stopPropagation();
                          if (onDoubleClick) {
                            onDoubleClick(obj.id);
                          }
                        }}
                      />
                      {/* 기준선 */}
                      <line
                        x1={x}
                        y1={0}
                        x2={x}
                        y2={effectiveHeight}
                        stroke={baseline.color}
                        strokeWidth={baseline.lineWidth}
                        strokeDasharray={getStrokeDasharray(baseline.lineStyle)}
                        opacity={0.8}
                        style={{ pointerEvents: 'none' }}
                      />
                      {/* 레이블 */}
                      <text
                        x={x + 5}
                        y={20}
                        fill={baseline.color}
                        fontSize="11px"
                        fontWeight="bold"
                        style={{ pointerEvents: 'none' }}
                      >
                        0
                      </text>
                    </g>
                  );
                })()}

                {/* 피보나치 레벨 선들 */}
                {obj.settings.levels
                  .filter((level) => level.enabled)
                  .map((level, index) => {
                    
                    // 캔들 인덱스 계산: 기준점 + (레벨 값 * 방향)
                    // 레벨 값이 직접 캔들 간격이 됨 (예: 1, 2, 3, 5, 8...)
                    const targetIndex = startIndex + (level.value * direction);
                    
                    // ✅ 시간 계산 (범위를 벗어나도 추정 가능)
                    let time: number;
                    if (targetIndex >= 0 && targetIndex < candleData.length) {
                      // 범위 내: 정확한 캔들 시간 사용
                      time = indexToTime(targetIndex);
                      console.log(`📍 [오버레이] 레벨 ${level.value}: 범위 내 정확한 시간 사용, targetIndex=${targetIndex}, time=${time}`);
                    } else if (candleData.length >= 2) {
                      // 범위 외: 캔들 간격을 사용하여 시간 추정
                      const lastIndex = candleData.length - 1;
                      const firstTime = new Date(candleData[0].time).getTime() / 1000;
                      const lastTime = new Date(candleData[lastIndex].time).getTime() / 1000;
                      const candleInterval = (lastTime - firstTime) / lastIndex; // 평균 캔들 간격
                      
                      const startTime = new Date(candleData[Math.max(0, Math.min(startIndex, lastIndex))].time).getTime() / 1000;
                      time = startTime + (level.value * direction * candleInterval);
                      console.log(`📍 [오버레이] 레벨 ${level.value}: 범위 외 시간 추정, targetIndex=${targetIndex}, time=${time}, interval=${candleInterval}`);
                    } else {
                      // 캔들 데이터가 부족하면 건너뛰기
                      console.log(`❌ [오버레이] 레벨 ${level.value}: 캔들 데이터 부족`);
                      return null;
                    }
                    
                    const x = timeToX(time);
                    console.log(`📏 [오버레이] 레벨 ${level.value}: time=${time}, x=${x}, chartWidth=${chartWidth}`);

                    // ✅ x가 null이면 건너뛰기 (범위 체크는 매우 관대하게)
                    if (x === null) {
                      console.log(`❌ [오버레이] 레벨 ${level.value}: x가 null`);
                      return null;
                    }
                    
                    // ✅ 매우 먼 거리만 제외 (차트의 10배 범위까지 허용)
                    const maxDistance = chartWidth * 10;
                    if (x < -maxDistance || x > chartWidth + maxDistance) {
                      console.log(`❌ [오버레이] 레벨 ${level.value}: x가 너무 멀리 벗어남 (x=${x}, 허용범위: ${-maxDistance} ~ ${chartWidth + maxDistance})`);
                      return null;
                    }
                    
                    console.log(`✅ [오버레이] 레벨 ${level.value}: 렌더링 (x=${x})`);


                    return (
                      <g key={`${obj.id}-level-${index}`}>
                        {/* 투명한 클릭 영역 (드래그하기 쉽도록 넓게) */}
                        <line
                          x1={x}
                          y1={0}
                          x2={x}
                          y2={effectiveHeight}
                          stroke="transparent"
                          strokeWidth={40} // 넓은 클릭 영역
                          style={{ pointerEvents: 'auto', cursor: 'move' }}
                          onClick={(e) => {
                            e.stopPropagation();
                            if (onClick) {
                              onClick(obj.id, e);
                            }
                          }}
                          onMouseDown={(e) => {
                            e.stopPropagation();
                            e.preventDefault();
                            console.log(`🖱️ [투명 영역] mouseDown - objectId: ${obj.id}, level: ${level.value}, x: ${x}`);
                            if (onDragStart) {
                              const startX = e.clientX;
                              onDragStart(obj.id, startX, obj.startTime);
                            }
                          }}
                          onDoubleClick={(e) => {
                            e.stopPropagation();
                            console.log(`🖱️ [투명 영역] doubleClick - objectId: ${obj.id}, level: ${level.value}`);
                            if (onDoubleClick) {
                              onDoubleClick(obj.id);
                            }
                          }}
                        />
                        {/* 실제 수직선 */}
                        <line
                          x1={x}
                          y1={0}
                          x2={x}
                          y2={effectiveHeight}
                          stroke={level.color}
                          strokeWidth={level.lineWidth}
                          strokeDasharray={getStrokeDasharray(level.lineStyle)}
                          opacity={0.8}
                          style={{ pointerEvents: 'none' }} // 투명 영역만 이벤트 받도록
                        />
                        {/* 레이블 */}
                        <text
                          x={x + 5}
                          y={20}
                          fill={level.color}
                          fontSize="11px"
                          fontWeight="bold"
                          style={{ pointerEvents: 'none' }} // 투명 영역만 이벤트 받도록
                        >
                          {level.value}
                        </text>
                      </g>
                    );
                  })}
              </g>
            );
          })}
      </svg>
    </Box>
  );
};

export default FibonacciTimezoneOverlay;