import React, { useRef } from 'react';
import { Box } from '@mui/material';

export interface FibonacciWedgeObject {
  id: string;
  type: 'fibonacciWedge';
  startTime: number;
  endTime: number;
  startPrice: number;
  endPrice: number;
  settings: {
    color: string;
    lineWidth: number;
    lineStyle: 'solid' | 'dashed' | 'dotted';
    fillOpacity: number;
    levels: number[];
    showLabels: boolean;
  };
}

interface FibonacciWedgeProps {
  objects: FibonacciWedgeObject[];
  chartWidth: number;
  chartHeight: number;
  totalChartHeight?: number;
  timeToX: (time: number) => number | null;
  priceToY: (price: number) => number | null;
  onClick?: (objectId: string, event: React.MouseEvent) => void;
  onDoubleClick?: (objectId: string) => void;
  onDragStart?: (objectId: string, startX: number, startTime: number) => void;
}

const FibonacciWedge: React.FC<FibonacciWedgeProps> = ({
  objects,
  chartWidth,
  chartHeight,
  totalChartHeight,
  timeToX,
  priceToY,
  onClick,
  onDoubleClick,
  onDragStart,
}) => {
  const svgRef = useRef<SVGSVGElement>(null);

  const calculateWedgeLines = (startPrice: number, endPrice: number) => {
    const priceRange = endPrice - startPrice;
    const levels = [0.382, 0.5, 0.618]; // 기본 피보나치 웻지 레벨
    
    return levels.map(level => ({
      level,
      price: startPrice + (priceRange * level)
    }));
  };

  const renderWedge = (wedgeObject: FibonacciWedgeObject) => {
    const startX = timeToX(wedgeObject.startTime);
    const endX = timeToX(wedgeObject.endTime);
    const startY = priceToY(wedgeObject.startPrice);
    const endY = priceToY(wedgeObject.endPrice);
    
    if (startX === null || endX === null || startY === null || endY === null) return null;

    const wedgeLines = calculateWedgeLines(wedgeObject.startPrice, wedgeObject.endPrice);
    
    return (
      <g key={wedgeObject.id}>
        {/* 웻지의 기본 삼각형 형태 */}
        <path
          d={`M ${startX} ${startY} L ${endX} ${startY} L ${endX} ${endY} Z`}
          fill={wedgeObject.settings.color}
          fillOpacity={wedgeObject.settings.fillOpacity}
          stroke={wedgeObject.settings.color}
          strokeWidth={wedgeObject.settings.lineWidth}
          strokeDasharray={
            wedgeObject.settings.lineStyle === 'dashed' 
              ? '5,5' 
              : wedgeObject.settings.lineStyle === 'dotted' 
              ? '2,2' 
              : undefined
          }
          opacity={0.6}
          style={{ cursor: 'pointer' }}
          onClick={(e) => onClick?.(wedgeObject.id, e)}
          onDoubleClick={() => onDoubleClick?.(wedgeObject.id)}
        />
        
        {/* 피보나치 레벨 라인들 */}
        {wedgeLines.map((wedgeLine, index) => {
          const lineY = priceToY(wedgeLine.price);
          if (lineY === null) return null;
          
          const strokeDasharray = wedgeObject.settings.lineStyle === 'dashed' 
            ? '5,5' 
            : wedgeObject.settings.lineStyle === 'dotted' 
            ? '2,2' 
            : undefined;
          
          return (
            <g key={index}>
              <line
                x1={startX}
                y1={startY}
                x2={endX}
                y2={lineY}
                stroke={wedgeObject.settings.color}
                strokeWidth={wedgeObject.settings.lineWidth}
                strokeDasharray={strokeDasharray}
                opacity={0.8}
                style={{ cursor: 'pointer' }}
                onClick={(e) => onClick?.(wedgeObject.id, e)}
                onDoubleClick={() => onDoubleClick?.(wedgeObject.id)}
              />
              {wedgeObject.settings.showLabels && (
                <text
                  x={endX + 5}
                  y={lineY}
                  fill={wedgeObject.settings.color}
                  fontSize={10}
                  fontFamily="Arial, sans-serif"
                >
                  {`${(wedgeLine.level * 100).toFixed(1)}%`}
                </text>
              )}
            </g>
          );
        })}
      </g>
    );
  };

  return (
    <Box
      sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: chartWidth,
        height: totalChartHeight || chartHeight,
        pointerEvents: 'none',
        zIndex: 100,
      }}
    >
      <svg
        ref={svgRef}
        width={chartWidth}
        height={totalChartHeight || chartHeight}
        style={{ position: 'absolute', top: 0, left: 0 }}
      >
        <g style={{ pointerEvents: 'all' }}>
          {objects.map(renderWedge)}
        </g>
      </svg>
    </Box>
  );
};

export default FibonacciWedge;
