import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { flushSync } from 'react-dom';
import {
  getUserChartColorSettings,
  saveUserChartColorSettings,
  getGuestChartColorSettings,
  saveGuestChartColorSettings,
} from '../services/indicatorSettingsApi';

export interface ChartColorSettings {
  candleRising: string;
  candleFalling: string;
  ma12: string;
  ma26: string;
  ma60: string;
  volumeRising: string;
  volumeFalling: string;
  macdLine: string;
  signalLine: string;
  histogramPositive: string;
  histogramNegative: string;
  stochasticK: string;
  stochasticD: string;
  // 이동평균선 색상
  ma10Color: string;
  ma20Color: string;
  ma50Color: string;
  ma60Color: string;
  ma120Color: string;
  ma200Color: string;
  ma300Color: string;
  ma480Color: string;
  // 이동평균선 굵기
  ma10Width: number;
  ma20Width: number;
  ma50Width: number;
  ma60Width: number;
  ma120Width: number;
  ma200Width: number;
  ma300Width: number;
  ma480Width: number;
  // 일목균형표 색상
  ichimokuTenkan: string;      // 전환선
  ichimokuKijun: string;       // 기준선
  ichimokuChikou: string;      // 후행스팬
  ichimokuSenkouA: string;     // 선행스팬1
  ichimokuSenkouB: string;     // 선행스팬2
  // 일목균형표 굵기
  ichimokuTenkanWidth: number;
  ichimokuKijunWidth: number;
  ichimokuChikouWidth: number;
  ichimokuSenkouAWidth: number;
  ichimokuSenkouBWidth: number;
  // 일목균형표 구름 색상
  ichimokuCloudBullish: string;  // 상승 구름 (선행1 > 선행2)
  ichimokuCloudBearish: string;  // 하락 구름 (선행1 < 선행2)
  
  // 볼린저 밴드 색상
  bollingerUpperColor: string;      // 상한선
  bollingerMiddleColor: string;     // 중간선
  bollingerLowerColor: string;      // 하한선
  // 볼린저 밴드 굵기
  bollingerUpperWidth: number;
  bollingerMiddleWidth: number;
  bollingerLowerWidth: number;
  // 볼린저 밴드 선 스타일
  bollingerUpperLineStyle: 'solid' | 'dashed' | 'dotted';
  bollingerMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  bollingerLowerLineStyle: 'solid' | 'dashed' | 'dotted';
  // 볼린저 밴드 배경색
  bollingerBandBackgroundColor: string;  // 상한선-하한선 사이 배경색
  
  // ===== 보조지표 색상 및 선 굵기 =====
  // MACD 굵기
  macdLineWidth: number;
  macdLineStyle: 'solid' | 'dashed' | 'dotted';
  slowEmaColor: string;      // 장기 EMA 색상
  slowEmaWidth: number;
  slowEmaLineStyle: 'solid' | 'dashed' | 'dotted';
  signalLineWidth: number;
  signalLineStyle: 'solid' | 'dashed' | 'dotted';
  // MACD 기준선
  macdZeroLineColor: string;
  macdZeroLineWidth: number;
  macdZeroLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // Stochastic 굵기
  stochasticKWidth: number;
  stochasticKLineStyle: 'solid' | 'dashed' | 'dotted';
  stochasticDWidth: number;
  stochasticDLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // Stochastic 기준선
  stochasticOversoldColor: string;
  stochasticOversoldWidth: number;
  stochasticOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  stochasticNeutralColor: string;
  stochasticNeutralWidth: number;
  stochasticNeutralLineStyle: 'solid' | 'dashed' | 'dotted';
  stochasticOverboughtColor: string;
  stochasticOverboughtWidth: number;
  stochasticOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // RSI
  rsiColor: string;
  rsiWidth: number;
  rsiLineStyle: 'solid' | 'dashed' | 'dotted';
  rsiSignalColor: string;
  rsiSignalWidth: number;
  rsiSignalLineStyle: 'solid' | 'dashed' | 'dotted';
  // RSI 기준선
  rsiOversoldColor: string;
  rsiOversoldWidth: number;
  rsiOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  rsiMiddleColor: string;
  rsiMiddleWidth: number;
  rsiMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  rsiOverboughtColor: string;
  rsiOverboughtWidth: number;
  rsiOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // ADX / DMI
  plusDiColor: string;
  plusDiWidth: number;
  plusDiLineStyle: 'solid' | 'dashed' | 'dotted';
  minusDiColor: string;
  minusDiWidth: number;
  minusDiLineStyle: 'solid' | 'dashed' | 'dotted';
  dxColor: string;
  dxWidth: number;
  dxLineStyle: 'solid' | 'dashed' | 'dotted';
  adxColor: string;
  adxWidth: number;
  adxLineStyle: 'solid' | 'dashed' | 'dotted';
  adxrColor: string;
  adxrWidth: number;
  adxrLineStyle: 'solid' | 'dashed' | 'dotted';
  // ADX 기준선
  adxStrongColor: string;     // 강한 추세 (25)
  adxStrongWidth: number;
  adxStrongLineStyle: 'solid' | 'dashed' | 'dotted';
  adxWeakColor: string;       // 약한 추세 (20)
  adxWeakWidth: number;
  adxWeakLineStyle: 'solid' | 'dashed' | 'dotted';
  // DMI 기준선
  dmiOverboughtColor: string;
  dmiOverboughtWidth: number;
  dmiOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  dmiMiddleColor: string;
  dmiMiddleWidth: number;
  dmiMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  dmiOversoldColor: string;
  dmiOversoldWidth: number;
  dmiOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // CCI
  cciColor: string;
  cciWidth: number;
  cciLineStyle: 'solid' | 'dashed' | 'dotted';
  cciSignalColor: string;
  cciSignalWidth: number;
  cciSignalLineStyle: 'solid' | 'dashed' | 'dotted';
  // CCI 기준선
  cciOversoldColor: string;
  cciOversoldWidth: number;
  cciOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  cciMiddleColor: string;
  cciMiddleWidth: number;
  cciMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  cciOverboughtColor: string;
  cciOverboughtWidth: number;
  cciOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // Momentum
  momentumColor: string;
  momentumWidth: number;
  momentumLineStyle: 'solid' | 'dashed' | 'dotted';
  // Momentum 기준선
  momentumZeroLineColor: string;
  momentumZeroLineWidth: number;
  momentumZeroLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // TRIX
  trixColor: string;
  trixWidth: number;
  trixLineStyle: 'solid' | 'dashed' | 'dotted';
  trixSignalColor: string;
  trixSignalWidth: number;
  trixSignalLineStyle: 'solid' | 'dashed' | 'dotted';
  // TRIX 기준선
  trixOversoldColor: string;
  trixOversoldWidth: number;
  trixOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  trixMiddleColor: string;
  trixMiddleWidth: number;
  trixMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  trixOverboughtColor: string;
  trixOverboughtWidth: number;
  trixOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // 이격도 (Disparity)
  disparityUltraShortColor: string;  // 초단기 색상
  disparityUltraShortWidth: number;  // 초단기 굵기
  disparityUltraShortLineStyle: 'solid' | 'dashed' | 'dotted';
  disparityShortColor: string;       // 단기 색상
  disparityShortWidth: number;       // 단기 굵기
  disparityShortLineStyle: 'solid' | 'dashed' | 'dotted';
  disparityMidColor: string;         // 중기 색상
  disparityMidWidth: number;         // 중기 굵기
  disparityMidLineStyle: 'solid' | 'dashed' | 'dotted';
  disparityLongColor: string;        // 장기 색상
  disparityLongWidth: number;        // 장기 굵기
  disparityLongLineStyle: 'solid' | 'dashed' | 'dotted';
  // 이격도 기준선
  disparityBaseLineColor: string;    // 100 기준선
  disparityBaseLineWidth: number;
  disparityBaseLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // 신심리도 (New Psychological)
  newPsychologicalColor: string;
  newPsychologicalWidth: number;
  newPsychologicalLineStyle: 'solid' | 'dashed' | 'dotted';
  // 신심리도 기준선
  newPsychologicalOversoldColor: string;
  newPsychologicalOversoldWidth: number;
  newPsychologicalOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  newPsychologicalNeutralColor: string;
  newPsychologicalNeutralWidth: number;
  newPsychologicalNeutralLineStyle: 'solid' | 'dashed' | 'dotted';
  newPsychologicalOverboughtColor: string;
  newPsychologicalOverboughtWidth: number;
  newPsychologicalOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // 투자심리도 (Invest Psychological)
  investPsychologicalColor: string;
  investPsychologicalWidth: number;
  investPsychologicalLineStyle: 'solid' | 'dashed' | 'dotted';
  investPsychologicalOverboughtColor: string;
  investPsychologicalOverboughtWidth: number;
  investPsychologicalOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  investPsychologicalMiddleColor: string;
  investPsychologicalMiddleWidth: number;
  investPsychologicalMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  investPsychologicalOversoldColor: string;
  investPsychologicalOversoldWidth: number;
  investPsychologicalOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // Williams %R
  williamsRColor: string;
  williamsRWidth: number;
  williamsRLineStyle: 'solid' | 'dashed' | 'dotted';
  // Williams %R 기준선
  williamsROverboughtColor: string;
  williamsROverboughtWidth: number;
  williamsROverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  williamsRMiddleColor: string;
  williamsRMiddleWidth: number;
  williamsRMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  williamsROversoldColor: string;
  williamsROversoldWidth: number;
  williamsROversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // BWI
  bwiColor: string;
  bwiWidth: number;
  bwiLineStyle: 'solid' | 'dashed' | 'dotted';
  // BWI 기준선
  bwiOverboughtColor: string;   // 1.0 과매수
  bwiOverboughtWidth: number;
  bwiOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  bwiMiddleColor: string;        // 0.5 중립
  bwiMiddleWidth: number;
  bwiMiddleLineStyle: 'solid' | 'dashed' | 'dotted';
  bwiOversoldColor: string;      // 0 과매도
  bwiOversoldWidth: number;
  bwiOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // OBV
  obvColor: string;
  obvWidth: number;
  obvLineStyle: 'solid' | 'dashed' | 'dotted';
  obvSignalColor: string;
  obvSignalWidth: number;
  obvSignalLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // Volume OSC
  volumeOscColor: string;
  volumeOscWidth: number;
  volumeOscLineStyle: 'solid' | 'dashed' | 'dotted';
  // Volume OSC 기준선
  volumeOscZeroLineColor: string;
  volumeOscZeroLineWidth: number;
  volumeOscZeroLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // VR
  vrColor: string;
  vrWidth: number;
  vrLineStyle: 'solid' | 'dashed' | 'dotted';
  // VR 기준선
  vrOverboughtColor: string;    // 450 과열
  vrOverboughtWidth: number;
  vrOverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  vrBaseLineColor: string;      // 100 기준
  vrBaseLineWidth: number;
  vrBaseLineStyle: 'solid' | 'dashed' | 'dotted';
  vrOversoldColor: string;      // 70 침체
  vrOversoldWidth: number;
  vrOversoldLineStyle: 'solid' | 'dashed' | 'dotted';
  
  // VR2 (추가 VR)
  vr2Color: string;
  vr2Width: number;
  vr2LineStyle: 'solid' | 'dashed' | 'dotted';
  // VR2 기준선
  vr2OverboughtColor: string;
  vr2OverboughtWidth: number;
  vr2OverboughtLineStyle: 'solid' | 'dashed' | 'dotted';
  vr2BaseLineColor: string;
  vr2BaseLineWidth: number;
  vr2BaseLineStyle: 'solid' | 'dashed' | 'dotted';
  vr2OversoldColor: string;
  vr2OversoldWidth: number;
  vr2OversoldLineStyle: 'solid' | 'dashed' | 'dotted';
}

const defaultColors: ChartColorSettings = {
  candleRising: '#c62828',
  candleFalling: '#1565c0',
  ma12: '#d32f2f',
  ma26: '#1976d2',
  ma60: '#388e3c',
  volumeRising: '#c62828',
  volumeFalling: '#1565c0',
  macdLine: '#26C6DA',      // 청록색 (MACD)
  signalLine: '#FF7043',    // 주황색 (Signal)
  histogramPositive: '#66BB6A',  // 초록색 (히스토그램+)
  histogramNegative: '#EF5350',  // 빨간색 (히스토그램-)
  stochasticK: '#FFD54F',   // 노란색 (%K)
  stochasticD: '#AB47BC',   // 보라색 (%D)
  // 이동평균선 색상 (구분이 잘 되는 선명한 색상)
  ma10Color: '#FF5252',   // 빨간색
  ma20Color: '#FFAB40',   // 주황색
  ma50Color: '#B2FF59',   // 라임색
  ma60Color: '#FFEE58',   // 노란색
  ma120Color: '#69F0AE',  // 밝은 초록색
  ma200Color: '#40C4FF',  // 하늘색
  ma300Color: '#E040FB',  // 보라색
  ma480Color: '#FF4081',  // 핑크색
  // 이동평균선 굵기
  ma10Width: 1,
  ma20Width: 1.5,
  ma50Width: 1.5,
  ma60Width: 1.5,
  ma120Width: 2,
  ma200Width: 2,
  ma300Width: 2,
  ma480Width: 2.5,
  // 일목균형표 색상
  ichimokuTenkan: '#EF5350',    // 전환선 - 빨간색
  ichimokuKijun: '#42A5F5',     // 기준선 - 파란색
  ichimokuChikou: '#66BB6A',    // 후행스팬 - 녹색
  ichimokuSenkouA: '#26A69A',   // 선행스팬1 - 청록색
  ichimokuSenkouB: '#EF5350',   // 선행스팬2 - 빨간색
  // 일목균형표 굵기
  ichimokuTenkanWidth: 1,
  ichimokuKijunWidth: 1.5,
  ichimokuChikouWidth: 1,
  ichimokuSenkouAWidth: 1,
  ichimokuSenkouBWidth: 1,
  // 일목균형표 구름 색상
  ichimokuCloudBullish: 'rgba(239, 83, 80, 0.2)',   // 상승 구름 - 빨간색 반투명 (한국 관행)
  ichimokuCloudBearish: 'rgba(38, 166, 154, 0.2)',   // 하락 구름 - 청록색 반투명 (한국 관행)
  
  // 볼린저 밴드 색상
  bollingerUpperColor: '#FF9800',     // 상한선 - 주황색
  bollingerMiddleColor: '#2196F3',    // 중간선 - 파란색
  bollingerLowerColor: '#4CAF50',     // 하한선 - 초록색
  // 볼린저 밴드 굵기
  bollingerUpperWidth: 1.5,
  bollingerMiddleWidth: 1.5,
  bollingerLowerWidth: 1.5,
  // 볼린저 밴드 선 스타일
  bollingerUpperLineStyle: 'solid' as const,
  bollingerMiddleLineStyle: 'solid' as const,
  bollingerLowerLineStyle: 'solid' as const,
  // 볼린저 밴드 배경색
  bollingerBandBackgroundColor: 'rgba(33, 150, 243, 0.15)',  // 파란색 반투명 (가시성 향상)
  
  // ===== 보조지표 색상 및 선 굵기 기본값 =====
  // MACD 굵기
  macdLineWidth: 1.5,
  macdLineStyle: 'solid' as const,
  slowEmaColor: '#FFA726',      // 장기 EMA 색상 - 주황색
  slowEmaWidth: 1.5,
  slowEmaLineStyle: 'solid' as const,
  signalLineWidth: 1.5,
  signalLineStyle: 'solid' as const,
  // MACD 기준선
  macdZeroLineColor: '#999999',
  macdZeroLineWidth: 1,
  macdZeroLineStyle: 'solid' as const,
  
  // Stochastic 굵기
  stochasticKWidth: 1.5,
  stochasticKLineStyle: 'solid' as const,
  stochasticDWidth: 1.5,
  stochasticDLineStyle: 'solid' as const,
  
  // Stochastic 기준선
  stochasticOversoldColor: '#4caf50',
  stochasticOversoldWidth: 1,
  stochasticOversoldLineStyle: 'solid' as const,
  stochasticNeutralColor: '#999999',
  stochasticNeutralWidth: 1,
  stochasticNeutralLineStyle: 'solid' as const,
  stochasticOverboughtColor: '#ef5350',
  stochasticOverboughtWidth: 1,
  stochasticOverboughtLineStyle: 'solid' as const,
  
  // RSI
  rsiColor: '#AB47BC',
  rsiWidth: 1.5,
  rsiLineStyle: 'solid' as const,
  rsiSignalColor: '#FF7043',
  rsiSignalWidth: 1,
  rsiSignalLineStyle: 'solid' as const,
  // RSI 기준선
  rsiOversoldColor: '#4caf50',
  rsiOversoldWidth: 1,
  rsiOversoldLineStyle: 'solid' as const,
  rsiMiddleColor: '#999999',
  rsiMiddleWidth: 1,
  rsiMiddleLineStyle: 'solid' as const,
  rsiOverboughtColor: '#ef5350',
  rsiOverboughtWidth: 1,
  rsiOverboughtLineStyle: 'solid' as const,
  
  // DMI (업비트 방식: PDI, MDI만)
  plusDiColor: '#808080',
  plusDiWidth: 1.5,
  plusDiLineStyle: 'solid' as const,
  minusDiColor: '#FF00FF',
  minusDiWidth: 1.5,
  minusDiLineStyle: 'solid' as const,
  dxColor: '#FF9800',
  dxWidth: 1.5,
  dxLineStyle: 'solid' as const,
  adxColor: '#E91E63',
  adxWidth: 1.5,
  adxLineStyle: 'solid' as const,
  adxrColor: '#9C27B0',
  adxrWidth: 1.5,
  adxrLineStyle: 'solid' as const,
  // ADX 기준선
  adxStrongColor: '#4caf50',
  adxStrongWidth: 1,
  adxStrongLineStyle: 'solid' as const,
  adxWeakColor: '#FF9800',
  adxWeakWidth: 1,
  adxWeakLineStyle: 'solid' as const,
  // DMI 기준선
  dmiOverboughtColor: '#EF5350',
  dmiOverboughtWidth: 1,
  dmiOverboughtLineStyle: 'solid' as const,
  dmiMiddleColor: '#FFA726',
  dmiMiddleWidth: 1,
  dmiMiddleLineStyle: 'dashed' as const,
  dmiOversoldColor: '#26A69A',
  dmiOversoldWidth: 1,
  dmiOversoldLineStyle: 'solid' as const,
  
  // CCI
  cciColor: '#00BCD4',
  cciWidth: 1.5,
  cciLineStyle: 'solid' as const,
  cciSignalColor: '#FF7043',
  cciSignalWidth: 1,
  cciSignalLineStyle: 'solid' as const,
  // CCI 기준선
  cciOversoldColor: '#4caf50',
  cciOversoldWidth: 1,
  cciOversoldLineStyle: 'solid' as const,
  cciMiddleColor: '#999999',
  cciMiddleWidth: 1,
  cciMiddleLineStyle: 'solid' as const,
  cciOverboughtColor: '#ef5350',
  cciOverboughtWidth: 1,
  cciOverboughtLineStyle: 'solid' as const,
  
  // Momentum
  momentumColor: '#2196F3',
  momentumWidth: 1.5,
  momentumLineStyle: 'solid' as const,
  // Momentum 기준선
  momentumZeroLineColor: '#999999',
  momentumZeroLineWidth: 1,
  momentumZeroLineStyle: 'solid' as const,
  
  // TRIX
  trixColor: '#F50057',
  trixWidth: 1.5,
  trixLineStyle: 'solid' as const,
  trixSignalColor: '#18FFFF',
  trixSignalWidth: 1.5,
  trixSignalLineStyle: 'solid' as const,
  // TRIX 기준선
  trixOversoldColor: '#4caf50',
  trixOversoldWidth: 1,
  trixOversoldLineStyle: 'solid' as const,
  trixMiddleColor: '#999999',
  trixMiddleWidth: 1,
  trixMiddleLineStyle: 'solid' as const,
  trixOverboughtColor: '#ef5350',
  trixOverboughtWidth: 1,
  trixOverboughtLineStyle: 'solid' as const,
  
  // 이격도 (Disparity)
  disparityUltraShortColor: '#FF6B35',  // 초단기 (5일) - 주황색
  disparityUltraShortWidth: 1.5,
  disparityUltraShortLineStyle: 'solid' as const,
  disparityShortColor: '#4CAF50',       // 단기 (20일) - 녹색
  disparityShortWidth: 2,
  disparityShortLineStyle: 'solid' as const,
  disparityMidColor: '#2196F3',         // 중기 (60일) - 파란색
  disparityMidWidth: 2,
  disparityMidLineStyle: 'solid' as const,
  disparityLongColor: '#9C27B0',        // 장기 (120일) - 보라색
  disparityLongWidth: 2,
  disparityLongLineStyle: 'solid' as const,
  // 이격도 기준선
  disparityBaseLineColor: '#999999',
  disparityBaseLineWidth: 1,
  disparityBaseLineStyle: 'solid' as const,
  
  // 신심리도 (New Psychological)
  newPsychologicalColor: '#9C27B0',
  newPsychologicalWidth: 1.5,
  newPsychologicalLineStyle: 'solid' as const,
  // 신심리도 기준선
  newPsychologicalOversoldColor: '#22c55e',
  newPsychologicalOversoldWidth: 0.5,
  newPsychologicalOversoldLineStyle: 'solid' as const,
  newPsychologicalNeutralColor: '#666666',
  newPsychologicalNeutralWidth: 0.5,
  newPsychologicalNeutralLineStyle: 'solid' as const,
  newPsychologicalOverboughtColor: '#ef4444',
  newPsychologicalOverboughtWidth: 0.5,
  newPsychologicalOverboughtLineStyle: 'solid' as const,
  
  // 투자심리도 (Invest Psychological)
  investPsychologicalColor: '#673AB7',
  investPsychologicalWidth: 1.5,
  investPsychologicalLineStyle: 'solid' as const,
  investPsychologicalOverboughtColor: '#EF5350',
  investPsychologicalOverboughtWidth: 1,
  investPsychologicalOverboughtLineStyle: 'solid' as const,
  investPsychologicalMiddleColor: '#999999',
  investPsychologicalMiddleWidth: 1,
  investPsychologicalMiddleLineStyle: 'solid' as const,
  investPsychologicalOversoldColor: '#26A69A',
  investPsychologicalOversoldWidth: 1,
  investPsychologicalOversoldLineStyle: 'solid' as const,
  
  // Williams %R
  williamsRColor: '#FF9800',
  williamsRWidth: 1.5,
  williamsRLineStyle: 'solid' as const,
  // Williams %R 기준선
  williamsROverboughtColor: '#ef4444',
  williamsROverboughtWidth: 0.5,
  williamsROverboughtLineStyle: 'solid' as const,
  williamsRMiddleColor: '#666666',
  williamsRMiddleWidth: 0.5,
  williamsRMiddleLineStyle: 'solid' as const,
  williamsROversoldColor: '#22c55e',
  williamsROversoldWidth: 0.5,
  williamsROversoldLineStyle: 'solid' as const,
  
  // BWI
  bwiColor: '#4CAF50',
  bwiWidth: 1.5,
  bwiLineStyle: 'solid' as const,
  // BWI 기준선
  bwiOverboughtColor: '#ef5350',
  bwiOverboughtWidth: 1,
  bwiOverboughtLineStyle: 'solid' as const,
  bwiMiddleColor: '#999999',
  bwiMiddleWidth: 1,
  bwiMiddleLineStyle: 'solid' as const,
  bwiOversoldColor: '#4caf50',
  bwiOversoldWidth: 1,
  bwiOversoldLineStyle: 'solid' as const,
  
  // OBV
  obvColor: '#2196F3',
  obvWidth: 1.5,
  obvLineStyle: 'solid' as const,
  obvSignalColor: '#FF7043',
  obvSignalWidth: 1,
  obvSignalLineStyle: 'solid' as const,
  
  // Volume OSC
  volumeOscColor: '#E91E63',
  volumeOscWidth: 1.5,
  volumeOscLineStyle: 'solid' as const,
  // Volume OSC 기준선
  volumeOscZeroLineColor: '#999999',
  volumeOscZeroLineWidth: 1,
  volumeOscZeroLineStyle: 'solid' as const,
  
  // VR
  vrColor: '#9C27B0',
  vrWidth: 1.5,
  vrLineStyle: 'solid' as const,
  // VR 기준선
  vrOverboughtColor: '#ef5350',
  vrOverboughtWidth: 1,
  vrOverboughtLineStyle: 'solid' as const,
  vrBaseLineColor: '#999999',
  vrBaseLineWidth: 1,
  vrBaseLineStyle: 'solid' as const,
  vrOversoldColor: '#4caf50',
  vrOversoldWidth: 1,
  vrOversoldLineStyle: 'solid' as const,
  
  // VR2 (추가 VR, 다른 색상으로 구분)
  vr2Color: '#FF9800',  // 오렌지색으로 VR과 구분
  vr2Width: 1.5,
  vr2LineStyle: 'solid' as const,
  // VR2 기준선
  vr2OverboughtColor: '#ef5350',
  vr2OverboughtWidth: 1,
  vr2OverboughtLineStyle: 'dashed' as const,  // 파선으로 VR과 구분
  vr2BaseLineColor: '#999999',
  vr2BaseLineWidth: 1,
  vr2BaseLineStyle: 'dashed' as const,
  vr2OversoldColor: '#4caf50',
  vr2OversoldWidth: 1,
  vr2OversoldLineStyle: 'dashed' as const,
};

interface ChartColorContextType {
  colors: ChartColorSettings;
  updateColors: (newColors: Partial<ChartColorSettings>) => void;
  resetColors: () => void;
  colorVersion: number; // ✅ 색상 변경 버전 (강제 리렌더링용)
  loadColorSettings: (isAuthenticated: boolean) => Promise<void>;
  setAuthState: (isAuthenticated: boolean) => void;
}

const ChartColorContext = createContext<ChartColorContextType | undefined>(undefined);

const STORAGE_KEY = 'chartColorSettings';

export const ChartColorProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [colors, setColors] = useState<ChartColorSettings>(defaultColors);
  const [colorVersion, setColorVersion] = useState<number>(0); // ✅ 색상 변경 추적용 버전
  const [isAuth, setIsAuth] = useState<boolean>(false);
  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const isInitialLoadRef = useRef<boolean>(true);

  // 설정이 변경될 때 자동 저장 (debounce 500ms)
  useEffect(() => {
    // 초기 로드 시에는 저장하지 않음
    if (isInitialLoadRef.current) {
      return;
    }
    
    // 기존 타이머가 있으면 취소
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    
    // 500ms 후에 저장
    saveTimeoutRef.current = setTimeout(() => {
      saveColorSettingsInternal(isAuth);
    }, 500);

    return () => {
      if (saveTimeoutRef.current) {
        clearTimeout(saveTimeoutRef.current);
      }
    };
  }, [colors, isAuth]);

  const saveColorSettingsInternal = async (isAuthenticated: boolean) => {
    const settingsData = JSON.stringify(colors);

    if (isAuthenticated) {
      // 로그인 상태: 사용자 계정에 DB 저장
      try {
        await saveUserChartColorSettings(settingsData);
        console.log('✅ 사용자 차트 색상 설정 자동 저장 완료 (DB)');
      } catch (error) {
        console.error('사용자 차트 색상 설정 자동 저장 실패:', error);
      }
    } else {
      // 비로그인 상태: 게스트 deviceId로 DB 저장
      try {
        await saveGuestChartColorSettings(settingsData);
        console.log('✅ 게스트 차트 색상 설정 자동 저장 완료 (DB)');
      } catch (error) {
        console.error('게스트 차트 색상 설정 자동 저장 실패, localStorage로 fallback:', error);
        // DB 저장 실패 시 localStorage에 백업
        localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
      }
    }
  };

  // ✅ loadColorSettings를 useCallback으로 감싸서 참조 안정성 보장
  const loadColorSettings = useCallback(async (isAuthenticated: boolean) => {
    if (isAuthenticated) {
      // 로그인 상태: 사용자 계정 DB에서 읽기
      try {
        const savedSettings = await getUserChartColorSettings();
        if (savedSettings && savedSettings !== '{}') {
          const parsed = JSON.parse(savedSettings);
          setColors({ ...defaultColors, ...parsed });
          console.log('✅ 사용자 차트 색상 설정 로드 완료 (DB)');
        }
      } catch (error) {
        console.error('사용자 차트 색상 설정 로드 실패:', error);
      }
    } else {
      // 비로그인 상태: 게스트 deviceId로 DB에서 읽기
      try {
        const savedSettings = await getGuestChartColorSettings();
        if (savedSettings && savedSettings !== '{}') {
          const parsed = JSON.parse(savedSettings);
          setColors({ ...defaultColors, ...parsed });
          console.log('✅ 게스트 차트 색상 설정 로드 완료 (DB)');
        } else {
          // DB에 없으면 localStorage에서 마이그레이션 시도
          const localSettings = localStorage.getItem(STORAGE_KEY);
          if (localSettings) {
            try {
              const parsed = JSON.parse(localSettings);
              setColors({ ...defaultColors, ...parsed });
            } catch (e) {
              console.error('로컬 차트 색상 설정 파싱 실패:', e);
            }
          }
        }
      } catch (error) {
        console.error('게스트 차트 색상 설정 로드 실패, localStorage로 fallback:', error);
        // DB 로드 실패 시 localStorage에서 읽기
        const savedSettings = localStorage.getItem(STORAGE_KEY);
        if (savedSettings) {
          try {
            const parsed = JSON.parse(savedSettings);
            setColors({ ...defaultColors, ...parsed });
          } catch (e) {
            console.error('로컬 차트 색상 설정 로드 실패:', e);
          }
        }
      }
    }
    
    // 초기 로드 완료 표시 (이후 변경 시에만 자동 저장)
    setTimeout(() => {
      isInitialLoadRef.current = false;
    }, 100);
  }, []); // 의존성 없음 - API 함수와 setColors는 안정적

  const setAuthState = useCallback((isAuthenticated: boolean) => {
    setIsAuth(isAuthenticated);
    // 인증 상태 변경 시 설정 로드
    loadColorSettings(isAuthenticated);
  }, [loadColorSettings]); // loadColorSettings 의존성 추가

  // 마운트 시 DB에서 설정 로드 (초기 로드)
  useEffect(() => {
    const isAuthenticated = !!localStorage.getItem('accessToken');
    setIsAuth(isAuthenticated);
    loadColorSettings(isAuthenticated);
  }, [loadColorSettings]);

  // ✅ useCallback으로 함수 참조 안정성 보장
  const updateColors = useCallback((newColors: Partial<ChartColorSettings>) => {
    console.log('🎨 [ChartColorContext updateColors] 호출됨:', newColors);
    
    // ✅ flushSync를 사용하여 동기적으로 state 업데이트
    // 1단계: colors 업데이트
    flushSync(() => {
      setColors(prev => {
        const updated = { ...prev, ...newColors };
        console.log('🎨 [ChartColorContext updateColors] 업데이트 완료:', updated);
        
        // localStorage에 즉시 저장
        try {
          localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
          console.log('💾 [ChartColorContext] localStorage에 저장 완료');
        } catch (error) {
          console.error('❌ [ChartColorContext] localStorage 저장 실패:', error);
        }
        
        return updated;
      });
    });
    
    // 2단계: version 증가 (colors 업데이트 완료 후 실행)
    flushSync(() => {
      setColorVersion(prevVersion => {
        const newVersion = prevVersion + 1;
        console.log('🔢 [ChartColorContext] 색상 버전 증가:', newVersion);
        return newVersion;
      });
    });
    
    console.log('✅ [ChartColorContext] updateColors 완료 - 모든 구독자가 즉시 업데이트됨');
  }, []); // 의존성 없음 - setColors와 setColorVersion은 안정적

  const resetColors = useCallback(() => {
    // ✅ flushSync를 사용하여 동기적으로 state 업데이트
    flushSync(() => {
      setColors(defaultColors);
    });
    
    flushSync(() => {
      setColorVersion(prev => prev + 1);
    });
    
    localStorage.removeItem(STORAGE_KEY);
    console.log('✅ [ChartColorContext] resetColors 완료');
  }, []);

  // ✅ value를 useMemo로 감싸서 참조 안정성 보장 (BUILD_VERSION_2026_02_03_v4)
  // 모든 함수가 useCallback으로 감싸져 있어 참조가 안정적
  const contextValue = useMemo(() => {
    console.log(`🔄 [ChartColorContext] contextValue 재생성 - colorVersion: ${colorVersion} [BUILD_V4]`);
    return {
      colors,
      updateColors,
      resetColors,
      colorVersion,
      loadColorSettings,
      setAuthState
    };
  }, [colors, colorVersion, updateColors, resetColors, loadColorSettings, setAuthState]);

  return (
    <ChartColorContext.Provider value={contextValue}>
      {children}
    </ChartColorContext.Provider>
  );
};

export const useChartColors = () => {
  const context = useContext(ChartColorContext);
  if (!context) {
    throw new Error('useChartColors must be used within ChartColorProvider');
  }
  return context;
};

