import React, { useState, useRef, useEffect, useCallback } from 'react';
import {
  Dialog,
  Box,
  Typography,
  TextField,
  IconButton,
  Avatar,
  Paper,
  CircularProgress,
  Chip,
  useTheme,
  Tooltip,
  Divider,
} from '@mui/material';
import {
  Send as SendIcon,
  Close as CloseIcon,
  SmartToy as AIIcon,
  Person as PersonIcon,
  Delete as DeleteIcon,
  ContentCopy as CopyIcon,
  AutoAwesome as SparkleIcon,
  Build as ToolIcon,
  Mic as MicIcon,
  MicOff as MicOffIcon,
  QuestionAnswer as QuestionIcon,
  DragIndicator as DragIcon,
} from '@mui/icons-material';
import { Menu, MenuItem, ListSubheader } from '@mui/material';

// Web Speech API 타입 정의
interface SpeechRecognitionEvent extends Event {
  results: SpeechRecognitionResultList;
  resultIndex: number;
}

interface SpeechRecognitionResultList {
  length: number;
  item(index: number): SpeechRecognitionResult;
  [index: number]: SpeechRecognitionResult;
}

interface SpeechRecognitionResult {
  length: number;
  item(index: number): SpeechRecognitionAlternative;
  [index: number]: SpeechRecognitionAlternative;
  isFinal: boolean;
}

interface SpeechRecognitionAlternative {
  transcript: string;
  confidence: number;
}

interface SpeechRecognition extends EventTarget {
  continuous: boolean;
  interimResults: boolean;
  lang: string;
  maxAlternatives: number;
  start(): void;
  stop(): void;
  abort(): void;
  onresult: ((event: SpeechRecognitionEvent) => void) | null;
  onerror: ((event: Event & { error: string }) => void) | null;
  onend: (() => void) | null;
  onstart: (() => void) | null;
  onaudiostart: (() => void) | null;
  onsoundstart: (() => void) | null;
  onspeechstart: (() => void) | null;
}

declare global {
  interface Window {
    SpeechRecognition: new () => SpeechRecognition;
    webkitSpeechRecognition: new () => SpeechRecognition;
  }
}

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  isStreaming?: boolean;
}

// UI 조작 명령 타입
export interface UICommand {
  action: string;
  params: Record<string, any>;
}

interface AIChatPanelProps {
  open: boolean;
  onClose: () => void;
  symbol: string;
  timeInterval: string;
  onUICommand?: (command: UICommand) => void;
  dateRangeStart?: string; // 현재 화면에 표시된 시작 날짜
  dateRangeEnd?: string;   // 현재 화면에 표시된 종료 날짜
}

const DEFAULT_WIDTH = 450;
const MIN_WIDTH = 350;
const MAX_WIDTH = 800;

// UI 명령 마커
const UI_COMMAND_PREFIX = '[[UI_COMMAND]]';
const UI_COMMAND_SUFFIX = '[[/UI_COMMAND]]';

// 예시 문장 목록 (카테고리별)
const EXAMPLE_PROMPTS = {
  'MACD 분석': [
    'MACD 골든크로스 지점을 차트에 표시해줘',
    'MACD 데드크로스 지점을 차트에 표시해줘',
  ],
  '이동평균선 분석': [
    '5일선과 20일선 골든크로스 표시해줘',
    '5일선과 20일선 데드크로스 표시해줘',
    '정배열 전환 시점 찾아줘',
    '역배열 전환 시점 찾아줘',
  ],
  'RSI 분석': [
    'RSI 과매도 구간을 표시해줘',
    'RSI 과매수 구간을 표시해줘',
  ],
  '스토캐스틱 분석': [
    '스토캐스틱 골든크로스 표시해줘',
    '스토캐스틱 데드크로스 표시해줘',
  ],
  '볼린저밴드 분석': [
    '볼린저밴드 하단 반등 지점 찾아줘',
    '볼린저밴드 스퀴즈 구간 표시해줘',
  ],
  '추세 및 패턴': [
    'ADX 강한 추세 구간 찾아줘',
    '갭 상승 지점 표시해줘',
    '갭 하락 지점 표시해줘',
    '최근 30일 최고가와 최저가 표시해줘',
  ],
  '지지/저항': [
    '주요 지지선과 저항선 찾아줘',
  ],
  '복합 신호': [
    '강한 매수 신호 찾아줘 (MACD+RSI+Stochastic)',
    '거래량 급증 지점을 표시해줘',
  ],
  '백테스트 실행': [
    '이동평균선 10일, 20일 골든크로스 시점에 매수, 데드크로스 시점에 매도 실행해줘',
    '이동평균선 5일, 20일 골든크로스/데드크로스로 투자 실행해줘',
    '이동평균선 20일, 60일 골든크로스 매수, 데드크로스 매도 실행',
  ],
  '종합 분석': [
    '비트코인 분석해줘',
    '이더리움 분석해줘',
    '현재 시장 상황 알려줘',
  ],
};

const AIChatPanel: React.FC<AIChatPanelProps> = ({
  open,
  onClose,
  symbol,
  timeInterval,
  onUICommand,
  dateRangeStart,
  dateRangeEnd,
}) => {
  const theme = useTheme();
  const isDark = theme.palette.mode === 'dark';
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [dialogWidth, setDialogWidth] = useState(DEFAULT_WIDTH);
  const [isResizing, setIsResizing] = useState(false);
  const [isListening, setIsListening] = useState(false);
  const [speechSupported, setSpeechSupported] = useState(false);
  const [interimTranscript, setInterimTranscript] = useState('');
  const [pendingVoiceMessage, setPendingVoiceMessage] = useState<string | null>(null);
  const [exampleMenuAnchor, setExampleMenuAnchor] = useState<null | HTMLElement>(null);
  
  // 드래그 위치 상태
  const [position, setPosition] = useState({ x: window.innerWidth - DEFAULT_WIDTH - 20, y: 80 });
  const [isDragging, setIsDragging] = useState(false);
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const recognitionRef = useRef<SpeechRecognition | null>(null);
  const dialogRef = useRef<HTMLDivElement>(null);

  // UI 명령 파싱 및 실행
  const parseAndExecuteUICommands = useCallback((content: string) => {
    if (!onUICommand) {
      console.warn('⚠️ onUICommand가 정의되지 않음');
      return;
    }
    
    console.log('🔍 UI 명령 파싱 시작, 컨텐츠 길이:', content.length);
    
    const regex = new RegExp(`${UI_COMMAND_PREFIX.replace(/[[\]]/g, '\\$&')}(.+?)${UI_COMMAND_SUFFIX.replace(/[[\]]/g, '\\$&')}`, 'g');
    let match;
    let commandCount = 0;
    
    while ((match = regex.exec(content)) !== null) {
      commandCount++;
      try {
        console.log('📦 UI 명령 발견:', match[1].substring(0, 100));
        const command = JSON.parse(match[1]) as UICommand;
        console.log('✅ UI 명령 파싱 성공:', command.action, 'params:', Object.keys(command.params));
        onUICommand(command);
      } catch (e) {
        console.error('❌ UI 명령 파싱 실패:', e, 'Raw:', match[1].substring(0, 100));
      }
    }
    
    if (commandCount === 0) {
      console.log('⚠️ UI 명령을 찾지 못함');
    } else {
      console.log(`✅ 총 ${commandCount}개의 UI 명령 실행 완료`);
    }
  }, [onUICommand]);

  // 메시지에서 UI 명령 마커 제거
  const removeUICommandMarkers = (content: string): string => {
    const regex = new RegExp(`${UI_COMMAND_PREFIX.replace(/[[\]]/g, '\\$&')}.*?${UI_COMMAND_SUFFIX.replace(/[[\]]/g, '\\$&')}`, 'g');
    return content.replace(regex, '').trim();
  };

  // 음성인식 에러 메시지 상태
  const [speechError, setSpeechError] = useState<string | null>(null);

  // 음성인식 초기화
  useEffect(() => {
    const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
    console.log('SpeechRecognition API:', SpeechRecognitionAPI ? 'supported' : 'not supported');
    
    if (SpeechRecognitionAPI) {
      setSpeechSupported(true);
      const recognition = new SpeechRecognitionAPI();
      recognition.continuous = true; // 연속 인식 모드
      recognition.interimResults = true;
      recognition.lang = 'ko-KR'; // 한국어 설정
      recognition.maxAlternatives = 1;

      recognition.onstart = () => {
        console.log('Speech recognition started');
        setIsListening(true);
        setInterimTranscript('');
        setSpeechError(null);
      };

      recognition.onresult = (event: SpeechRecognitionEvent) => {
        console.log('Speech recognition result:', event.results);
        let finalTranscript = '';
        let interim = '';

        for (let i = event.resultIndex; i < event.results.length; i++) {
          const transcript = event.results[i][0].transcript;
          console.log(`Result ${i}: "${transcript}", isFinal: ${event.results[i].isFinal}`);
          if (event.results[i].isFinal) {
            finalTranscript += transcript;
          } else {
            interim += transcript;
          }
        }

        if (finalTranscript) {
          console.log('Final transcript:', finalTranscript);
          // 음성 인식 완료 - 자동 전송을 위해 pendingVoiceMessage 설정
          setInputValue(prev => {
            const newValue = prev + finalTranscript;
            // 자동 전송 트리거
            setPendingVoiceMessage(newValue);
            return newValue;
          });
          setInterimTranscript('');
          // 음성인식 중지 (자동 전송 전)
          if (recognitionRef.current) {
            recognitionRef.current.stop();
          }
        } else if (interim) {
          console.log('Interim transcript:', interim);
          setInterimTranscript(interim);
        }
      };

      recognition.onerror = (event) => {
        console.error('Speech recognition error:', event.error);
        setIsListening(false);
        setInterimTranscript('');
        
        // 에러 메시지 설정
        const errorMessages: Record<string, string> = {
          'not-allowed': '마이크 권한이 거부되었습니다. 브라우저 설정에서 마이크를 허용해주세요.',
          'no-speech': '음성이 감지되지 않았습니다. 다시 시도해주세요.',
          'audio-capture': '마이크를 찾을 수 없습니다.',
          'network': '네트워크 오류가 발생했습니다.',
          'aborted': '음성 인식이 중단되었습니다.',
          'service-not-allowed': '음성인식 서비스를 사용할 수 없습니다.',
        };
        setSpeechError(errorMessages[event.error] || `오류: ${event.error}`);
      };

      recognition.onend = () => {
        console.log('Speech recognition ended');
        setIsListening(false);
        // 음성 인식 종료 후 입력란에 포커스
        setTimeout(() => inputRef.current?.focus(), 100);
      };

      recognition.onaudiostart = () => {
        console.log('Audio capturing started');
      };

      recognition.onsoundstart = () => {
        console.log('Sound detected');
      };

      recognition.onspeechstart = () => {
        console.log('Speech started');
      };

      recognitionRef.current = recognition;
    } else {
      console.log('Speech recognition not supported');
      setSpeechSupported(false);
    }

    return () => {
      if (recognitionRef.current) {
        recognitionRef.current.abort();
      }
    };
  }, []);

  // 드래그 핸들러
  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    setIsDragging(true);
    setDragStart({
      x: e.clientX - position.x,
      y: e.clientY - position.y,
    });
  }, [position]);

  const handleMouseMove = useCallback((e: MouseEvent) => {
    if (!isDragging) return;
    
    const newX = e.clientX - dragStart.x;
    const newY = e.clientY - dragStart.y;
    
    // 화면 경계 체크
    const maxX = window.innerWidth - dialogWidth;
    const maxY = window.innerHeight - 200; // 최소 높이 확보
    
    setPosition({
      x: Math.max(0, Math.min(newX, maxX)),
      y: Math.max(0, Math.min(newY, maxY)),
    });
  }, [isDragging, dragStart, dialogWidth]);

  const handleMouseUp = useCallback(() => {
    setIsDragging(false);
  }, []);

  // 드래그 이벤트 리스너 등록
  useEffect(() => {
    if (isDragging) {
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
      return () => {
        window.removeEventListener('mousemove', handleMouseMove);
        window.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [isDragging, handleMouseMove, handleMouseUp]);

  // 예시 문장 메뉴 열기
  const handleExampleMenuOpen = useCallback((event: React.MouseEvent<HTMLElement>) => {
    setExampleMenuAnchor(event.currentTarget);
  }, []);

  // 예시 문장 메뉴 닫기
  const handleExampleMenuClose = useCallback(() => {
    setExampleMenuAnchor(null);
  }, []);

  // 예시 문장 선택
  const handleExampleSelect = useCallback((example: string) => {
    setInputValue(example);
    setExampleMenuAnchor(null);
    // 입력란에 포커스
    setTimeout(() => inputRef.current?.focus(), 100);
  }, []);

  // 음성인식 토글
  const toggleListening = useCallback(async () => {
    if (!recognitionRef.current) {
      console.error('Speech recognition not initialized');
      setSpeechError('음성인식이 초기화되지 않았습니다. 페이지를 새로고침해주세요.');
      return;
    }

    if (isListening) {
      console.log('Stopping speech recognition');
      recognitionRef.current.stop();
    } else {
      // HTTPS 환경 체크 (localhost는 예외)
      const isSecure = window.location.protocol === 'https:' || 
                       window.location.hostname === 'localhost' ||
                       window.location.hostname === '127.0.0.1';
      
      if (!isSecure) {
        console.error('Insecure context:', window.location.href);
        setSpeechError(`음성인식은 HTTPS 환경에서만 사용 가능합니다. 현재: ${window.location.protocol}//${window.location.hostname}`);
        return;
      }

      // navigator.mediaDevices 지원 확인
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        console.error('MediaDevices API not supported');
        setSpeechError('이 브라우저는 마이크 접근을 지원하지 않습니다.');
        return;
      }

      // 먼저 마이크 권한 요청
      try {
        console.log('Requesting microphone permission...');
        console.log('Current URL:', window.location.href);
        
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        console.log('Microphone permission granted');
        // 권한 확인 후 스트림 해제
        stream.getTracks().forEach(track => track.stop());
        
        console.log('Starting speech recognition...');
        setSpeechError(null);
        recognitionRef.current.start();
      } catch (error: any) {
        console.error('Microphone permission denied:', error);
        
        // 에러 유형에 따른 상세 메시지
        let errorMessage = '마이크 권한이 필요합니다.';
        if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
          errorMessage = '마이크 권한이 거부되었습니다. 브라우저 주소창 왼쪽의 자물쇠/사이트 설정 아이콘을 클릭하여 마이크를 허용해주세요.';
        } else if (error.name === 'NotFoundError' || error.name === 'DevicesNotFoundError') {
          errorMessage = '마이크를 찾을 수 없습니다. 마이크가 연결되어 있는지 확인해주세요.';
        } else if (error.name === 'NotReadableError' || error.name === 'TrackStartError') {
          errorMessage = '마이크가 다른 앱에서 사용 중입니다. 다른 앱을 종료하고 다시 시도해주세요.';
        } else if (error.name === 'OverconstrainedError') {
          errorMessage = '요청한 마이크 설정을 지원하지 않습니다.';
        } else if (error.name === 'TypeError') {
          errorMessage = '보안 연결(HTTPS)이 필요합니다.';
        } else {
          errorMessage = `마이크 오류: ${error.name || error.message || '알 수 없는 오류'}`;
        }
        
        setSpeechError(errorMessage);
      }
    }
  }, [isListening]);

  const abortControllerRef = useRef<AbortController | null>(null);

  // 리사이즈 시작
  const handleResizeStart = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation(); // 드래그 시작 방지
    setIsResizing(true);
  }, []);

  // 리사이즈 중
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isResizing) return;
      
      const dialogRect = dialogRef.current?.getBoundingClientRect();
      if (!dialogRect) return;
      
      // 현재 Dialog 위치에서의 너비 계산
      const newWidth = dialogRect.right - e.clientX;
      
      // 최소/최대 범위 제한
      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
        setDialogWidth(newWidth);
      }
    };

    const handleMouseUp = () => {
      setIsResizing(false);
    };

    if (isResizing) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      // 드래그 중 텍스트 선택 방지
      document.body.style.userSelect = 'none';
      document.body.style.cursor = 'ew-resize';
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
    };
  }, [isResizing]);

  // 스크롤 맨 아래로
  const scrollToBottom = useCallback(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, []);

  useEffect(() => {
    scrollToBottom();
  }, [messages, scrollToBottom]);

  // 패널 열릴 때 입력창 포커스
  useEffect(() => {
    if (open) {
      setTimeout(() => inputRef.current?.focus(), 100);
    }
  }, [open]);

  // 메시지 전송 (AI Agent 스트리밍)
  const sendMessage = useCallback(async () => {
    if (!inputValue.trim() || isLoading) return;

    const userMessage: ChatMessage = {
      id: Date.now().toString(),
      role: 'user',
      content: inputValue.trim(),
      timestamp: new Date(),
    };

    setMessages(prev => [...prev, userMessage]);
    setInputValue('');
    setIsLoading(true);

    // 어시스턴트 메시지 플레이스홀더
    const assistantMessageId = (Date.now() + 1).toString();
    const assistantMessage: ChatMessage = {
      id: assistantMessageId,
      role: 'assistant',
      content: '',
      timestamp: new Date(),
      isStreaming: true,
    };
    setMessages(prev => [...prev, assistantMessage]);

    try {
      abortControllerRef.current = new AbortController();

      // AI Agent API 호출 (스트리밍)
      const response = await fetch('/api/agent/chat/stream', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: userMessage.content,
          symbol: symbol,
          dateRangeStart: dateRangeStart, // 현재 화면 시작 날짜
          dateRangeEnd: dateRangeEnd,     // 현재 화면 종료 날짜
        }),
        signal: abortControllerRef.current.signal,
      });

      if (!response.ok) {
        throw new Error(`서버 응답 오류: ${response.status}`);
      }

      const reader = response.body?.getReader();
      if (!reader) {
        throw new Error('스트림을 읽을 수 없습니다.');
      }

      const decoder = new TextDecoder();
      let accumulatedContent = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n');

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.slice(6);
            if (data === '[DONE]') {
              break;
            }
            if (data.startsWith('{') && data.includes('error')) {
              try {
                const errorObj = JSON.parse(data);
                throw new Error(errorObj.error);
              } catch {
                // 파싱 실패시 무시
              }
            }
            // 이스케이프된 개행문자 복원
            accumulatedContent += data.replace(/\\n/g, '\n');
            
            // 메시지 업데이트
            setMessages(prev => prev.map(msg => 
              msg.id === assistantMessageId 
                ? { ...msg, content: accumulatedContent }
                : msg
            ));
          }
        }
      }

      // 스트리밍 완료 - UI 명령 파싱 및 실행
      setMessages(prev => {
        const updatedMessages = prev.map(msg => {
          if (msg.id === assistantMessageId) {
            // UI 명령 파싱 및 실행
            parseAndExecuteUICommands(msg.content);
            // 메시지에서 UI 명령 마커 제거
            const cleanContent = removeUICommandMarkers(msg.content);
            return { ...msg, content: cleanContent, isStreaming: false };
          }
          return msg;
        });
        return updatedMessages;
      });

    } catch (error: any) {
      if (error.name === 'AbortError') {
        setMessages(prev => prev.map(msg => 
          msg.id === assistantMessageId 
            ? { ...msg, content: '응답이 취소되었습니다.', isStreaming: false }
            : msg
        ));
      } else {
        setMessages(prev => prev.map(msg => 
          msg.id === assistantMessageId 
            ? { ...msg, content: `오류가 발생했습니다: ${error.message}`, isStreaming: false }
            : msg
        ));
      }
    } finally {
      setIsLoading(false);
      abortControllerRef.current = null;
      // 응답 완료 후 입력란에 포커스
      setTimeout(() => inputRef.current?.focus(), 100);
    }
  }, [inputValue, isLoading, symbol, dateRangeStart, dateRangeEnd]);

  // 음성 인식 완료 후 자동 전송
  useEffect(() => {
    if (pendingVoiceMessage && pendingVoiceMessage.trim() && !isLoading) {
      console.log('Auto-sending voice message:', pendingVoiceMessage);
      // 약간의 딜레이 후 전송 (UI 업데이트 확인용)
      const timer = setTimeout(() => {
        sendMessage();
        setPendingVoiceMessage(null);
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [pendingVoiceMessage, isLoading, sendMessage]);

  // 키 입력 핸들러
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  };

  // 대화 초기화
  const clearMessages = () => {
    setMessages([]);
  };

  // 메시지 복사
  const copyMessage = (content: string) => {
    navigator.clipboard.writeText(content);
  };

  // 현재 스트리밍 취소
  const cancelStreaming = () => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
  };

  // 마크다운 스타일 렌더링 (간단한 버전)
  const renderMarkdown = (content: string) => {
    // 도구 호출 표시
    const toolCallPattern = /🔧 \*\*(.+?)\*\* 도구 호출 중\.\.\./g;
    let parts = content.split(toolCallPattern);
    
    return (
      <Box>
        {content.split('\n').map((line, idx) => {
          // 제목 (##)
          if (line.startsWith('## ')) {
            return (
              <Typography key={idx} variant="subtitle1" fontWeight="bold" sx={{ mt: 1.5, mb: 0.5, color: 'primary.main' }}>
                {line.slice(3)}
              </Typography>
            );
          }
          // 소제목 (###)
          if (line.startsWith('### ')) {
            return (
              <Typography key={idx} variant="subtitle2" fontWeight="bold" sx={{ mt: 1, mb: 0.5 }}>
                {line.slice(4)}
              </Typography>
            );
          }
          // 도구 호출 표시
          if (line.includes('🔧') && line.includes('도구 호출')) {
            return (
              <Chip
                key={idx}
                icon={<ToolIcon />}
                label={line.replace('🔧 **', '').replace('** 도구 호출 중...', '')}
                size="small"
                color="info"
                sx={{ my: 0.5 }}
              />
            );
          }
          // 리스트 항목
          if (line.startsWith('- ')) {
            return (
              <Typography key={idx} variant="body2" sx={{ pl: 2 }}>
                • {line.slice(2)}
              </Typography>
            );
          }
          // 테이블 (간단히 처리)
          if (line.startsWith('|')) {
            return (
              <Typography key={idx} variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
                {line}
              </Typography>
            );
          }
          // 일반 텍스트
          if (line.trim()) {
            return (
              <Typography key={idx} variant="body2" sx={{ my: 0.25 }}>
                {line}
              </Typography>
            );
          }
          return null;
        })}
      </Box>
    );
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth={false}
      PaperProps={{
        ref: dialogRef,
        sx: {
          position: 'absolute',
          left: position.x,
          top: position.y,
          m: 0,
          width: dialogWidth,
          maxWidth: '90vw',
          height: '80vh',
          maxHeight: '90vh',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
          bgcolor: isDark ? '#1a1a1a' : '#ffffff',
          color: isDark ? '#ffffff' : '#000000',
          backgroundImage: 'none',
          boxShadow: 24,
        },
      }}
      BackdropProps={{
        sx: { backgroundColor: 'transparent' },
      }}
    >
      {/* 리사이즈 핸들 (왼쪽 가장자리) */}
      <Box
        onMouseDown={handleResizeStart}
        sx={{
          position: 'absolute',
          left: 0,
          top: 0,
          bottom: 0,
          width: 6,
          cursor: 'ew-resize',
          backgroundColor: isResizing ? 'primary.main' : 'transparent',
          transition: 'background-color 0.2s',
          zIndex: 1000,
          '&:hover': {
            backgroundColor: isDark ? 'rgba(102, 126, 234, 0.5)' : 'rgba(102, 126, 234, 0.3)',
          },
          '&::after': {
            content: '""',
            position: 'absolute',
            left: 2,
            top: '50%',
            transform: 'translateY(-50%)',
            width: 2,
            height: 40,
            backgroundColor: isDark ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)',
            borderRadius: 1,
          },
        }}
      />
      
      {/* 헤더 (드래그 가능) */}
      <Box
        onMouseDown={handleMouseDown}
        sx={{
          p: 2,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          borderBottom: 1,
          borderColor: 'divider',
          background: isDark 
            ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
            : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          cursor: isDragging ? 'grabbing' : 'grab',
          userSelect: 'none',
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <DragIcon sx={{ color: 'rgba(255,255,255,0.7)', fontSize: 20 }} />
          <SparkleIcon sx={{ color: '#ffd700' }} />
          <Typography variant="h6" sx={{ color: 'white', fontWeight: 'bold' }}>
            AI 트레이딩 어시스턴트
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Chip 
            label={symbol || 'N/A'} 
            size="small" 
            sx={{ 
              bgcolor: 'rgba(255,255,255,0.2)', 
              color: 'white',
              fontWeight: 'bold',
            }} 
          />
          <Tooltip title="대화 초기화">
            <IconButton onClick={clearMessages} size="small" sx={{ color: 'white' }}>
              <DeleteIcon fontSize="small" />
            </IconButton>
          </Tooltip>
          <Tooltip title="닫기">
            <IconButton onClick={onClose} sx={{ color: 'white' }}>
              <CloseIcon />
            </IconButton>
          </Tooltip>
        </Box>
      </Box>

      {/* 안내 메시지 */}
      {messages.length === 0 && (
        <Box sx={{ p: 3, textAlign: 'center' }}>
          <AIIcon sx={{ fontSize: 64, color: 'text.disabled', mb: 2 }} />
          <Typography variant="h6" color="text.secondary" gutterBottom>
            AI 트레이딩 어시스턴트
          </Typography>
          <Typography variant="body2" color="text.disabled" sx={{ mb: 2 }}>
            질문하시면 AI가 업비트 전체 시장 정보를 조회하여 분석합니다.
            <br />
            특정 종목을 언급하면 해당 종목을 분석합니다.
          </Typography>
          <Box sx={{ 
            textAlign: 'left', 
            bgcolor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
            borderRadius: 2,
            p: 2,
            mb: 2,
          }}>
            <Typography variant="caption" color="text.secondary" fontWeight="bold">
              🔧 사용 가능한 기능:
            </Typography>
            <Typography variant="caption" color="text.disabled" component="div" sx={{ mt: 0.5 }}>
              • 시장 전체 상황 및 상승 종목 조회<br/>
              • 실시간 시세/호가 조회 (업비트 API)<br/>
              • 차트 분석 (MACD, RSI, 볼린저밴드 등)<br/>
              • 과거 데이터 조회 (DB)<br/>
              • 저장된 전략/보조지표 조회<br/>
              • 백테스트 및 패턴 검색
            </Typography>
          </Box>
          <Divider sx={{ my: 2 }} />
          <Typography variant="caption" color="text.disabled">
            예시 질문:
          </Typography>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 1 }}>
            {[
              '지금 시장 상황이 어때?',
              '상승 잠재력 높은 종목 추천해줘',
              '비트코인 차트 분석해줘',
              '이더리움 현재가 알려줘',
              '저장된 전략 목록 보여줘',
              '보조지표 종류 알려줘',
            ].map((example, idx) => (
                <Chip
                  key={idx}
                  label={example}
                  size="small"
                  variant="outlined"
                  onClick={() => {
                    setInputValue(example);
                    setTimeout(() => inputRef.current?.focus(), 100);
                  }}
                  sx={{ 
                    cursor: 'pointer',
                    '&:hover': { bgcolor: 'action.hover' },
                  }}
                />
            ))}
          </Box>
        </Box>
      )}

      {/* 메시지 목록 */}
      <Box
        sx={{
          flexGrow: 1,
          overflowY: 'auto',
          p: 2,
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        }}
      >
        {messages.map((message) => (
          <Box
            key={message.id}
            sx={{
              display: 'flex',
              flexDirection: message.role === 'user' ? 'row-reverse' : 'row',
              alignItems: 'flex-start',
              gap: 1,
            }}
          >
            <Avatar
              sx={{
                width: 32,
                height: 32,
                bgcolor: message.role === 'user' 
                  ? 'primary.main' 
                  : isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.08)',
                color: message.role === 'user' 
                  ? 'white' 
                  : isDark ? '#64b5f6' : '#1976d2',
              }}
            >
              {message.role === 'user' ? <PersonIcon fontSize="small" /> : <AIIcon fontSize="small" />}
            </Avatar>
            <Paper
              elevation={0}
              sx={{
                p: 1.5,
                maxWidth: '85%',
                bgcolor: message.role === 'user'
                  ? isDark ? 'primary.dark' : 'primary.main'
                  : isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.03)',
                color: message.role === 'user' ? 'white' : 'text.primary',
                borderRadius: 2,
                border: message.role === 'assistant' ? '1px solid' : 'none',
                borderColor: message.role === 'assistant' 
                  ? (isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)') 
                  : 'transparent',
                position: 'relative',
              }}
            >
              {message.role === 'user' ? (
                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                  {message.content}
                </Typography>
              ) : (
                <>
                  {message.content ? (
                    renderMarkdown(message.content)
                  ) : (
                    message.isStreaming && <CircularProgress size={16} />
                  )}
                </>
              )}
              
              {message.isStreaming && message.content && (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 1 }}>
                  <CircularProgress size={12} sx={{ color: 'text.secondary' }} />
                  <Typography variant="caption" color="text.secondary">
                    분석 중...
                  </Typography>
                </Box>
              )}

              {!message.isStreaming && message.role === 'assistant' && message.content && (
                <IconButton
                  size="small"
                  onClick={() => copyMessage(message.content)}
                  sx={{ 
                    position: 'absolute', 
                    top: 4, 
                    right: 4,
                    opacity: 0.5,
                    '&:hover': { opacity: 1 },
                  }}
                >
                  <CopyIcon fontSize="small" />
                </IconButton>
              )}
            </Paper>
          </Box>
        ))}
        <div ref={messagesEndRef} />
      </Box>

      {/* 입력 영역 */}
      <Box
        sx={{
          p: 2,
          borderTop: 1,
          borderColor: 'divider',
          bgcolor: isDark ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.02)',
        }}
      >
        {isLoading && (
          <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1 }}>
            <Chip
              label="응답 중단"
              size="small"
              onClick={cancelStreaming}
              sx={{ cursor: 'pointer' }}
              color="warning"
            />
          </Box>
        )}
        {/* 음성인식 에러 메시지 */}
        {speechError && (
          <Box sx={{ 
            mb: 1, 
            p: 1, 
            borderRadius: 2, 
            bgcolor: 'error.light',
            color: 'error.contrastText',
          }}>
            <Typography variant="body2">
              ⚠️ {speechError}
            </Typography>
          </Box>
        )}
        {/* 음성 인식 중 상태 표시 */}
        {isListening && !interimTranscript && (
          <Box sx={{ 
            mb: 1, 
            p: 1, 
            borderRadius: 2, 
            bgcolor: 'warning.light',
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}>
            <CircularProgress size={16} color="warning" />
            <Typography variant="body2" color="warning.dark">
              🎤 마이크가 활성화되었습니다. 말씀해주세요...
            </Typography>
          </Box>
        )}
        {/* 음성 인식 중 임시 텍스트 표시 */}
        {isListening && interimTranscript && (
          <Box sx={{ 
            mb: 1, 
            p: 1, 
            borderRadius: 2, 
            bgcolor: 'action.hover',
            border: '1px dashed',
            borderColor: 'warning.main',
          }}>
            <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic' }}>
              🎤 "{interimTranscript}"
            </Typography>
          </Box>
        )}
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'flex-end' }}>
          <TextField
            inputRef={inputRef}
            fullWidth
            multiline
            maxRows={4}
            size="small"
            placeholder={isListening ? "🎤 음성을 인식하고 있습니다..." : "질문을 입력하세요..."}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
            disabled={isLoading}
            sx={{
              '& .MuiOutlinedInput-root': {
                borderRadius: 3,
                ...(isListening && {
                  borderColor: 'warning.main',
                  '& fieldset': { borderColor: 'warning.main' },
                }),
              },
            }}
          />
          {/* 예시 문장 선택 버튼 */}
          <Tooltip title="예시 문장 선택">
            <IconButton
              onClick={handleExampleMenuOpen}
              disabled={isLoading}
              sx={{
                bgcolor: 'info.main',
                color: 'white',
                '&:hover': {
                  bgcolor: 'info.dark',
                },
                mr: 1,
              }}
            >
              <QuestionIcon />
            </IconButton>
          </Tooltip>
          {/* 음성인식 버튼 */}
          {speechSupported && (
            <Tooltip title={isListening ? "음성인식 중지" : "음성으로 질문하기"}>
              <IconButton
                onClick={toggleListening}
                disabled={isLoading}
                sx={{
                  bgcolor: isListening ? 'error.main' : 'warning.main',
                  color: 'white',
                  '&:hover': { 
                    bgcolor: isListening ? 'error.dark' : 'warning.dark' 
                  },
                  '&:disabled': { bgcolor: 'action.disabledBackground' },
                  animation: isListening ? 'pulse 1.5s ease-in-out infinite' : 'none',
                  '@keyframes pulse': {
                    '0%': { boxShadow: '0 0 0 0 rgba(255, 152, 0, 0.7)' },
                    '70%': { boxShadow: '0 0 0 10px rgba(255, 152, 0, 0)' },
                    '100%': { boxShadow: '0 0 0 0 rgba(255, 152, 0, 0)' },
                  },
                }}
              >
                {isListening ? <MicOffIcon /> : <MicIcon />}
              </IconButton>
            </Tooltip>
          )}
          <IconButton
            color="primary"
            onClick={sendMessage}
            disabled={!inputValue.trim() || isLoading}
            sx={{
              bgcolor: 'primary.main',
              color: 'white',
              '&:hover': { bgcolor: 'primary.dark' },
              '&:disabled': { bgcolor: 'action.disabledBackground' },
            }}
          >
            <SendIcon />
          </IconButton>
        </Box>
        <Typography variant="caption" color="text.disabled" sx={{ mt: 1, display: 'block', textAlign: 'center' }}>
          {speechSupported 
            ? "🎤 마이크 버튼으로 음성 질문 가능 | AI 분석은 참고용이며, 투자 결정은 본인 책임입니다."
            : "AI 분석은 참고용이며, 투자 결정은 본인 책임입니다."
          }
        </Typography>
      </Box>

      {/* 예시 문장 선택 메뉴 */}
      <Menu
        anchorEl={exampleMenuAnchor}
        open={Boolean(exampleMenuAnchor)}
        onClose={handleExampleMenuClose}
        PaperProps={{
          sx: {
            maxHeight: 500,
            width: dialogWidth - 40,
            bgcolor: isDark ? 'grey.900' : 'background.paper',
          },
        }}
        transformOrigin={{ horizontal: 'center', vertical: 'bottom' }}
        anchorOrigin={{ horizontal: 'center', vertical: 'top' }}
      >
        {Object.entries(EXAMPLE_PROMPTS).map(([category, examples]) => [
          <ListSubheader 
            key={`header-${category}`}
            sx={{ 
              bgcolor: isDark ? 'grey.800' : 'grey.100',
              fontWeight: 'bold',
              fontSize: '0.875rem',
            }}
          >
            {category}
          </ListSubheader>,
          ...examples.map((example, index) => (
            <MenuItem
              key={`${category}-${index}`}
              onClick={() => handleExampleSelect(example)}
              sx={{
                fontSize: '0.875rem',
                py: 1,
                px: 2,
                whiteSpace: 'normal',
                '&:hover': {
                  bgcolor: isDark ? 'grey.800' : 'grey.100',
                },
              }}
            >
              {example}
            </MenuItem>
          )),
        ])}
      </Menu>
    </Dialog>
  );
};

export default AIChatPanel;
