import React, { useState, useEffect } from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  Button,
  Box,
  Typography,
  TextField,
  Switch,
  Slider,
  Divider,
  IconButton,
  Tooltip,
  Select,
  MenuItem,
} from '@mui/material';
import { Close, Refresh } from '@mui/icons-material';
import { useIndicatorVisibility } from '../contexts/IndicatorVisibilityContext';
import { useChartColors } from '../contexts/ChartColorContext';
import type { MultiChartIchimokuState } from '../stores/useDashboardStore';
import {
  ichimokuDialogDefaultsFromStore,
  ichimokuDialogToStore,
  ichimokuStoreToDialogColors,
  ichimokuStoreToDialogSettings,
} from '../utils/multiChartToolbarSettings';
import DraggablePaper from './DraggablePaper';

interface IchimokuSettingsDialogProps {
  open: boolean;
  onClose: () => void;
  /** 멀티차트: 대시보드 스토어만 갱신(전역 지표/색상 컨텍스트는 건드리지 않음) */
  multiChartToolbar?: {
    ichimoku: MultiChartIchimokuState;
    setIchimoku: (
      value: MultiChartIchimokuState | ((prev: MultiChartIchimokuState) => MultiChartIchimokuState)
    ) => void;
  };
}

interface IchimokuLine {
  id: string;
  label: string;
  description: string;
  enabledKey: keyof typeof defaultLocalSettings;
  periodKey: keyof typeof defaultLocalSettings;
  colorKey: keyof typeof defaultLocalColors;
  widthKey: keyof typeof defaultLocalColors;
}

const defaultLocalSettings = {
  ichimokuTenkan: false,
  ichimokuKijun: false,
  ichimokuChikou: false,
  ichimokuSenkouA: false,
  ichimokuSenkouB: false,
  ichimokuTenkanPeriod: 9,
  ichimokuKijunPeriod: 26,
  ichimokuChikouPeriod: 26,
  ichimokuSenkouAPeriod: 26,
  ichimokuSenkouBPeriod: 52,
};

const defaultLocalColors = {
  ichimokuTenkan: '#EF5350',
  ichimokuKijun: '#42A5F5',
  ichimokuChikou: '#66BB6A',
  ichimokuSenkouA: '#26A69A',
  ichimokuSenkouB: '#EF5350',
  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)',
};

const ichimokuLines: IchimokuLine[] = [
  {
    id: 'tenkan',
    label: '전환선',
    description: '단기',
    enabledKey: 'ichimokuTenkan',
    periodKey: 'ichimokuTenkanPeriod',
    colorKey: 'ichimokuTenkan',
    widthKey: 'ichimokuTenkanWidth',
  },
  {
    id: 'kijun',
    label: '기준선',
    description: '중기',
    enabledKey: 'ichimokuKijun',
    periodKey: 'ichimokuKijunPeriod',
    colorKey: 'ichimokuKijun',
    widthKey: 'ichimokuKijunWidth',
  },
  {
    id: 'chikou',
    label: '후행스팬',
    description: '후행',
    enabledKey: 'ichimokuChikou',
    periodKey: 'ichimokuChikouPeriod',
    colorKey: 'ichimokuChikou',
    widthKey: 'ichimokuChikouWidth',
  },
  {
    id: 'senkouA',
    label: '선행스팬1',
    description: '선행',
    enabledKey: 'ichimokuSenkouA',
    periodKey: 'ichimokuSenkouAPeriod',
    colorKey: 'ichimokuSenkouA',
    widthKey: 'ichimokuSenkouAWidth',
  },
  {
    id: 'senkouB',
    label: '선행스팬2',
    description: '장기',
    enabledKey: 'ichimokuSenkouB',
    periodKey: 'ichimokuSenkouBPeriod',
    colorKey: 'ichimokuSenkouB',
    widthKey: 'ichimokuSenkouBWidth',
  },
];

const IchimokuSettingsDialog: React.FC<IchimokuSettingsDialogProps> = ({ open, onClose, multiChartToolbar }) => {
  const { settings, updateSettings } = useIndicatorVisibility();
  const { colors, updateColors } = useChartColors();

  const [localSettings, setLocalSettings] = useState(defaultLocalSettings);
  const [localColors, setLocalColors] = useState(defaultLocalColors);
  const [cloudBullishOpacity, setCloudBullishOpacity] = useState<number>(0.2);
  const [cloudBearishOpacity, setCloudBearishOpacity] = useState<number>(0.2);

  // rgba에서 alpha 값 추출 함수
  const extractOpacity = (color: string): number => {
    const match = color.match(/rgba?\([^,]+,[^,]+,[^,]+,\s*([\d.]+)\)/);
    return match ? parseFloat(match[1]) : 0.2;
  };

  // rgba에서 rgb hex 추출 함수
  const extractRgbFromRgba = (rgba: string): string => {
    const match = rgba.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (match) {
      const r = parseInt(match[1]).toString(16).padStart(2, '0');
      const g = parseInt(match[2]).toString(16).padStart(2, '0');
      const b = parseInt(match[3]).toString(16).padStart(2, '0');
      return `#${r}${g}${b}`;
    }
    return '#000000';
  };

  // hex to rgba 변환 함수
  const hexToRgba = (hex: string, opacity: number): string => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if (result) {
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
    }
    return `rgba(0, 0, 0, ${opacity})`;
  };

  useEffect(() => {
    if (!open || !multiChartToolbar) return;
    const ich = multiChartToolbar.ichimoku;
    setLocalSettings(ichimokuStoreToDialogSettings(ich));
    setLocalColors(ichimokuStoreToDialogColors(ich));
    setCloudBullishOpacity(extractOpacity(ich.cloudBullish));
    setCloudBearishOpacity(extractOpacity(ich.cloudBearish));
  }, [open, multiChartToolbar]);

  useEffect(() => {
    if (!open || multiChartToolbar) return;
    setLocalSettings({
      ichimokuTenkan: settings.ichimokuTenkan,
      ichimokuKijun: settings.ichimokuKijun,
      ichimokuChikou: settings.ichimokuChikou,
      ichimokuSenkouA: settings.ichimokuSenkouA,
      ichimokuSenkouB: settings.ichimokuSenkouB,
      ichimokuTenkanPeriod: settings.ichimokuTenkanPeriod || 9,
      ichimokuKijunPeriod: settings.ichimokuKijunPeriod || 26,
      ichimokuChikouPeriod: settings.ichimokuChikouPeriod || 26,
      ichimokuSenkouAPeriod: settings.ichimokuSenkouAPeriod || 26,
      ichimokuSenkouBPeriod: settings.ichimokuSenkouBPeriod || 52,
    });
    setLocalColors({
      ichimokuTenkan: colors.ichimokuTenkan,
      ichimokuKijun: colors.ichimokuKijun,
      ichimokuChikou: colors.ichimokuChikou,
      ichimokuSenkouA: colors.ichimokuSenkouA,
      ichimokuSenkouB: colors.ichimokuSenkouB,
      ichimokuTenkanWidth: colors.ichimokuTenkanWidth,
      ichimokuKijunWidth: colors.ichimokuKijunWidth,
      ichimokuChikouWidth: colors.ichimokuChikouWidth,
      ichimokuSenkouAWidth: colors.ichimokuSenkouAWidth,
      ichimokuSenkouBWidth: colors.ichimokuSenkouBWidth,
      ichimokuCloudBullish: colors.ichimokuCloudBullish,
      ichimokuCloudBearish: colors.ichimokuCloudBearish,
    });
    setCloudBullishOpacity(extractOpacity(colors.ichimokuCloudBullish));
    setCloudBearishOpacity(extractOpacity(colors.ichimokuCloudBearish));
  }, [open, multiChartToolbar, settings, colors]);

  const handleSave = () => {
    if (multiChartToolbar) {
      multiChartToolbar.setIchimoku(ichimokuDialogToStore(localSettings, localColors));
    } else {
      updateSettings({
        ...settings,
        ...localSettings,
      });
      updateColors(localColors);
    }
    onClose();
  };

  const handleReset = () => {
    if (multiChartToolbar) {
      const { localSettings: ls, localColors: lc } = ichimokuDialogDefaultsFromStore();
      setLocalSettings(ls);
      setLocalColors(lc);
      setCloudBullishOpacity(extractOpacity(lc.ichimokuCloudBullish));
      setCloudBearishOpacity(extractOpacity(lc.ichimokuCloudBearish));
    } else {
      setLocalSettings(defaultLocalSettings);
      setLocalColors(defaultLocalColors);
      setCloudBullishOpacity(0.2);
      setCloudBearishOpacity(0.2);
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="lg"
      fullWidth
      hideBackdrop={true}
      disableScrollLock={true}
      PaperComponent={DraggablePaper}
      sx={{
        pointerEvents: 'none',
        '& .MuiDialog-container': {
          pointerEvents: 'none',
          alignItems: 'flex-start',
        },
      }}
      PaperProps={{ 
        sx: { 
          borderRadius: 2,
          pointerEvents: 'auto',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
          border: '2px solid rgba(80, 100, 160, 0.5)',
        } 
      }}
    >
      <DialogTitle sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        bgcolor: '#1976d2',
        color: '#fff',
        py: 1.2,
      }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px', color: '#fff' }}>
            ☁️ 일목균형표 설정
          </Typography>
          <Tooltip title="초기화">
            <IconButton onClick={handleReset} size="small" sx={{ color: '#fff', '&:hover': { bgcolor: 'rgba(255,255,255,0.1)' } }}>
              <Refresh />
            </IconButton>
          </Tooltip>
        </Box>
        <Box 
          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
          onMouseDown={(e) => e.stopPropagation()}
        >
          <Button 
            onClick={(e) => {
              e.stopPropagation();
              onClose();
            }}
            sx={{ 
              color: '#fff',
              borderColor: '#fff',
              '&:hover': { 
                bgcolor: 'rgba(255,255,255,0.1)',
                borderColor: '#fff'
              },
              minWidth: '70px',
              fontSize: '13px',
              fontWeight: 600,
            }}
            variant="outlined"
            size="small"
          >
            취소
          </Button>
          <Button 
            onClick={(e) => {
              e.stopPropagation();
              handleSave();
            }}
            sx={{ 
              bgcolor: '#fff',
              color: '#1976d2',
              '&:hover': { 
                bgcolor: 'rgba(255,255,255,0.9)'
              },
              minWidth: '70px',
              fontSize: '13px',
              fontWeight: 600,
            }}
            variant="contained"
            size="small"
          >
            적용
          </Button>
        </Box>
      </DialogTitle>

      <Divider />

      <DialogContent sx={{ pt: 2 }}>
        <Box sx={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: 1, 
          mb: 2, 
          p: 1.5, 
          bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(33, 150, 243, 0.15)' : '#e3f2fd',
          borderRadius: 1,
          border: '1px solid',
          borderColor: (theme) => theme.palette.mode === 'dark' ? 'rgba(33, 150, 243, 0.3)' : '#90caf9'
        }}>
          <Typography variant="body2" sx={{ fontSize: '12px' }}>
            💡 <strong>색상, 선 굵기, 선 유형</strong>을 수정하시면 차트에 즉시 반영됩니다
          </Typography>
        </Box>

        {/* 헤더 행 */}
        <Box sx={{ 
          display: 'grid', 
          gridTemplateColumns: '60px 120px 100px 90px 150px 1fr 100px',
          gap: 1,
          p: 1.5, 
          mb: 1, 
          bgcolor: (theme) => theme.palette.mode === 'dark' ? '#616161' : '#9e9e9e',
          borderRadius: 1,
        }}>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>ON/OFF</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>활성화</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>기준값</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>색상</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>굵기</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>선 유형</Typography>
          <Typography variant="caption" fontWeight="bold" sx={{ textAlign: 'center', color: 'white' }}>미리보기</Typography>
        </Box>

        {/* 각 일목균형표 구성요소 */}
        {ichimokuLines.map((line) => (
          <Box 
            key={line.id}
            sx={{ 
              display: 'grid', 
              gridTemplateColumns: '60px 120px 100px 90px 150px 1fr 100px',
              gap: 1,
              p: 1.5, 
              mb: 1, 
              border: '1px solid',
              borderColor: 'divider',
              bgcolor: 'background.paper',
              borderRadius: 1,
              alignItems: 'center',
              transition: 'all 0.2s',
            }}
          >
            {/* 토글 스위치 */}
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Switch
                checked={localSettings[line.enabledKey] as boolean}
                onChange={(e) => setLocalSettings({ ...localSettings, [line.enabledKey]: e.target.checked })}
                size="small"
              />
            </Box>

            {/* 이름 */}
            <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
              <Typography 
                variant="body2" 
                fontWeight={localSettings[line.enabledKey] ? 'bold' : 'normal'}
                color={localSettings[line.enabledKey] ? 'text.primary' : 'text.secondary'}
                sx={{ fontSize: '13px' }}
              >
                {line.label}
              </Typography>
              <Typography variant="caption" color="text.secondary" sx={{ fontSize: '10px' }}>
                {line.description}
              </Typography>
            </Box>

            {/* 기간 */}
            <TextField
              type="number"
              value={localSettings[line.periodKey] as number}
              onChange={(e) => setLocalSettings({ ...localSettings, [line.periodKey]: Math.max(1, Number(e.target.value)) })}
              disabled={!(localSettings[line.enabledKey] as boolean)}
              size="small"
              inputProps={{ min: 1, max: 200 }}
              sx={{ 
                '& .MuiInputBase-input': { 
                  textAlign: 'center',
                  fontSize: '0.875rem',
                  padding: '6px 8px',
                }
              }}
            />

            {/* 색상 */}
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Box
                sx={{
                  width: 40,
                  height: 40,
                  borderRadius: 1,
                  bgcolor: localColors[line.colorKey] as string,
                  border: '2px solid',
                  borderColor: localSettings[line.enabledKey] ? '#1976d2' : '#ccc',
                  cursor: localSettings[line.enabledKey] ? 'pointer' : 'not-allowed',
                  opacity: localSettings[line.enabledKey] ? 1 : 0.5,
                  position: 'relative',
                  '&:hover': localSettings[line.enabledKey] ? { 
                    boxShadow: '0 0 8px rgba(25, 118, 210, 0.6)',
                    transform: 'scale(1.05)',
                  } : {},
                  transition: 'all 0.2s',
                }}
              >
                {localSettings[line.enabledKey] && (
                  <input
                    type="color"
                    value={localColors[line.colorKey] as string}
                    onChange={(e) => setLocalColors({ ...localColors, [line.colorKey]: e.target.value })}
                    style={{ 
                      position: 'absolute', 
                      top: 0, 
                      left: 0, 
                      width: '100%', 
                      height: '100%', 
                      opacity: 0, 
                      cursor: 'pointer',
                      border: 'none',
                    }}
                  />
                )}
              </Box>
            </Box>

            {/* 선 굵기 슬라이더 */}
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, px: 1 }}>
              <Slider
                value={localColors[line.widthKey] as number}
                onChange={(_, value) => setLocalColors({ ...localColors, [line.widthKey]: value as number })}
                disabled={!(localSettings[line.enabledKey] as boolean)}
                min={0.5}
                max={5}
                step={0.5}
                sx={{ flex: 1 }}
              />
              <Typography variant="caption" sx={{ minWidth: 35, textAlign: 'right', fontSize: '11px' }}>
                {(localColors[line.widthKey] as number).toFixed(1)}px
              </Typography>
            </Box>

            {/* 선 유형 (고정) */}
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Select
                value="실선"
                size="small"
                disabled
                sx={{ 
                  width: '100%',
                  '& .MuiSelect-select': { 
                    py: 0.5,
                    fontSize: '0.875rem',
                  }
                }}
              >
                <MenuItem value="실선">실선</MenuItem>
              </Select>
            </Box>

            {/* 미리보기 */}
            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
              <Box
                sx={{
                  width: 60,
                  height: (localColors[line.widthKey] as number) * 2 + 2,
                  maxHeight: 12,
                  backgroundColor: localSettings[line.enabledKey] ? localColors[line.colorKey] : '#ccc',
                  borderRadius: 0.5,
                }}
              />
            </Box>
          </Box>
        ))}

        <Divider sx={{ my: 2 }} />

        {/* 구름 영역 색상 설정 */}
        <Typography variant="subtitle2" fontWeight="bold" sx={{ mb: 2 }}>
          🌈 구름 영역 색상
        </Typography>
        
        <Box sx={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: 1, 
          mb: 2, 
          p: 1, 
          bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255, 193, 7, 0.15)' : '#fff3cd',
          borderRadius: 1,
          border: '1px solid',
          borderColor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255, 193, 7, 0.3)' : '#ffc107'
        }}>
          <Typography variant="caption" sx={{ fontSize: '11px' }}>
            ⚠️ 선행스팬1과 선행스팬2가 모두 활성화되어야 구름 영역이 표시됩니다.
          </Typography>
        </Box>

        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
          {/* 상승 구름 */}
          <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, bgcolor: 'action.hover' }}>
            <Typography variant="body2" fontWeight="bold" color="success.main" sx={{ mb: 2 }}>
              🟢 상승 구름 (선행1 &gt; 선행2)
            </Typography>
            
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
              <Box
                sx={{
                  width: 50,
                  height: 50,
                  position: 'relative',
                  borderRadius: 1,
                  border: '2px solid #1976d2',
                  cursor: 'pointer',
                  overflow: 'hidden',
                  background: `
                    linear-gradient(45deg, #ccc 25%, transparent 25%),
                    linear-gradient(-45deg, #ccc 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ccc 75%),
                    linear-gradient(-45deg, transparent 75%, #ccc 75%)
                  `,
                  backgroundSize: '10px 10px',
                  backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: localColors.ichimokuCloudBullish,
                  }}
                />
                <input
                  type="color"
                  value={extractRgbFromRgba(localColors.ichimokuCloudBullish)}
                  onChange={(e) => {
                    const rgbaColor = hexToRgba(e.target.value, cloudBullishOpacity);
                    setLocalColors({ ...localColors, ichimokuCloudBullish: rgbaColor });
                  }}
                  style={{ 
                    position: 'absolute', 
                    top: 0, 
                    left: 0, 
                    width: '100%', 
                    height: '100%', 
                    opacity: 0, 
                    cursor: 'pointer',
                    border: 'none',
                  }}
                />
              </Box>
              
              <Box sx={{ flex: 1 }}>
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5, fontSize: '10px' }}>
                  현재 색상
                </Typography>
                <Typography variant="body2" sx={{ fontSize: '0.7rem', fontFamily: 'monospace' }}>
                  {localColors.ichimokuCloudBullish}
                </Typography>
              </Box>
            </Box>

            <Box>
              <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block', fontSize: '11px' }}>
                투명도: {(cloudBullishOpacity * 100).toFixed(0)}%
              </Typography>
              <Slider
                value={cloudBullishOpacity}
                onChange={(_, value) => {
                  const newOpacity = value as number;
                  setCloudBullishOpacity(newOpacity);
                  const baseColor = extractRgbFromRgba(localColors.ichimokuCloudBullish);
                  const rgbaColor = hexToRgba(baseColor, newOpacity);
                  setLocalColors({ ...localColors, ichimokuCloudBullish: rgbaColor });
                }}
                min={0.05}
                max={0.8}
                step={0.05}
                valueLabelDisplay="auto"
                valueLabelFormat={(value) => `${(value * 100).toFixed(0)}%`}
                size="small"
              />
            </Box>
          </Box>

          {/* 하락 구름 */}
          <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1, bgcolor: 'action.hover' }}>
            <Typography variant="body2" fontWeight="bold" color="error.main" sx={{ mb: 2 }}>
              🔴 하락 구름 (선행1 &lt; 선행2)
            </Typography>
            
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
              <Box
                sx={{
                  width: 50,
                  height: 50,
                  position: 'relative',
                  borderRadius: 1,
                  border: '2px solid #1976d2',
                  cursor: 'pointer',
                  overflow: 'hidden',
                  background: `
                    linear-gradient(45deg, #ccc 25%, transparent 25%),
                    linear-gradient(-45deg, #ccc 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ccc 75%),
                    linear-gradient(-45deg, transparent 75%, #ccc 75%)
                  `,
                  backgroundSize: '10px 10px',
                  backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
                }}
              >
                <Box
                  sx={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    backgroundColor: localColors.ichimokuCloudBearish,
                  }}
                />
                <input
                  type="color"
                  value={extractRgbFromRgba(localColors.ichimokuCloudBearish)}
                  onChange={(e) => {
                    const rgbaColor = hexToRgba(e.target.value, cloudBearishOpacity);
                    setLocalColors({ ...localColors, ichimokuCloudBearish: rgbaColor });
                  }}
                  style={{ 
                    position: 'absolute', 
                    top: 0, 
                    left: 0, 
                    width: '100%', 
                    height: '100%', 
                    opacity: 0, 
                    cursor: 'pointer',
                    border: 'none',
                  }}
                />
              </Box>
              
              <Box sx={{ flex: 1 }}>
                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5, fontSize: '10px' }}>
                  현재 색상
                </Typography>
                <Typography variant="body2" sx={{ fontSize: '0.7rem', fontFamily: 'monospace' }}>
                  {localColors.ichimokuCloudBearish}
                </Typography>
              </Box>
            </Box>

            <Box>
              <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5, display: 'block', fontSize: '11px' }}>
                투명도: {(cloudBearishOpacity * 100).toFixed(0)}%
              </Typography>
              <Slider
                value={cloudBearishOpacity}
                onChange={(_, value) => {
                  const newOpacity = value as number;
                  setCloudBearishOpacity(newOpacity);
                  const baseColor = extractRgbFromRgba(localColors.ichimokuCloudBearish);
                  const rgbaColor = hexToRgba(baseColor, newOpacity);
                  setLocalColors({ ...localColors, ichimokuCloudBearish: rgbaColor });
                }}
                min={0.05}
                max={0.8}
                step={0.05}
                valueLabelDisplay="auto"
                valueLabelFormat={(value) => `${(value * 100).toFixed(0)}%`}
                size="small"
              />
            </Box>
          </Box>
        </Box>
      </DialogContent>

    </Dialog>
  );
};

export default IchimokuSettingsDialog;
