import React, { useState, useEffect, useRef } from 'react';
import {
  Box,
  Typography,
  Switch,
  FormControlLabel,
  TextField,
  InputAdornment,
  Divider,
  Alert,
  Chip,
  Button,
  CircularProgress,
  ToggleButton,
  ToggleButtonGroup,
  Paper,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
} from '@mui/material';
import { 
  Notifications as NotificationsIcon,
  NotificationsOff as NotificationsOffIcon,
  LightMode as LightModeIcon,
  DarkMode as DarkModeIcon,
  Waves as WavesIcon,
  TrendingUp as TrendingUpIcon,
  FileDownload as FileDownloadIcon,
  FileUpload as FileUploadIcon,
  Settings as SettingsIcon,
  Folder as FolderIcon,
  Storage as StorageIcon,
} from '@mui/icons-material';
import { getUserSettings, updateUserSettings, UserSettings, settingsApi } from '../../services/settingsApi';
import { useAppTheme, ThemeMode } from '../../contexts/ThemeContext';
import {
  subscribeToPush,
  unsubscribeFromPush,
  sendSubscriptionToServer,
  deleteSubscriptionFromServer,
  getSubscription,
  isPWAPushSupported,
  isSecureContext,
} from '../../utils/pushNotifications';
import { getStrategies, TradingStrategy, getStrategyTypeName } from '../../services/tradingStrategyApi';
import { getStorageMode, setStorageMode, type InvestmentAnalysisStorageMode } from '../../services/investmentAnalysisSettingsStorage';

// 기본 투자 전략 설정 키
const DEFAULT_STRATEGY_KEY = 'defaultTradingStrategy';

// 기본 전략 설정 로드
const loadDefaultStrategy = (): string => {
  try {
    const saved = localStorage.getItem(DEFAULT_STRATEGY_KEY);
    return saved || 'TREND_STOCHASTIC'; // 기본값: MACD + Stochastic Slow
  } catch {
    return 'TREND_STOCHASTIC';
  }
};

// 기본 전략 설정 저장
const saveDefaultStrategy = (strategyType: string): void => {
  try {
    localStorage.setItem(DEFAULT_STRATEGY_KEY, strategyType);
  } catch (e) {
    console.error('기본 전략 저장 실패:', e);
  }
};

const GeneralSettingsTab: React.FC = () => {
  const [settings, setSettings] = useState<UserSettings | null>(null);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [pushSubscribed, setPushSubscribed] = useState(false);
  const [checkingPush, setCheckingPush] = useState(false);
  
  // 테마 설정
  const { themeMode, setThemeMode } = useAppTheme();
  
  // 기본 투자 전략 설정
  const [strategies, setStrategies] = useState<TradingStrategy[]>([]);
  const [defaultStrategy, setDefaultStrategy] = useState<string>(loadDefaultStrategy());
  const [loadingStrategies, setLoadingStrategies] = useState(false);

  // 투자분석 설정 저장 방식 (파일/DB)
  const [storageMode, setStorageModeState] = useState<InvestmentAnalysisStorageMode>(getStorageMode());
  
  // 설정 Export/Import 상태
  const [exporting, setExporting] = useState(false);
  const [importing, setImporting] = useState(false);
  const [importConfirmOpen, setImportConfirmOpen] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    loadSettings();
    checkPushSubscription();
    loadStrategies();
  }, []);
  
  // 전략 목록 로드
  const loadStrategies = async () => {
    try {
      setLoadingStrategies(true);
      const data = await getStrategies(false); // 모든 전략 가져오기
      setStrategies(data);
    } catch (err) {
      console.error('전략 목록 로드 실패:', err);
    } finally {
      setLoadingStrategies(false);
    }
  };
  
  // 기본 전략 변경 핸들러
  const handleDefaultStrategyChange = (strategyType: string) => {
    setDefaultStrategy(strategyType);
    saveDefaultStrategy(strategyType);
    setSuccess(true);
    setTimeout(() => setSuccess(false), 2000);
  };

  const loadSettings = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await getUserSettings();
      setSettings(data);
    } catch (err: any) {
      setError(err.response?.status === 401 
        ? '로그인이 필요합니다.' 
        : '설정을 불러오는데 실패했습니다.');
      setSettings({
        userId: 0,
        username: '',
        buyAlertEnabled: false,
        dataUpdateIntervalMinutes: 1
      });
    } finally {
      setLoading(false);
    }
  };

  const checkPushSubscription = async () => {
    setCheckingPush(true);
    try {
      const subscription = await getSubscription();
      setPushSubscribed(!!subscription);
    } catch (error) {
      setPushSubscribed(false);
    } finally {
      setCheckingPush(false);
    }
  };

  const handlePushToggle = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.checked;
    
    try {
      setSaving(true);
      setError(null);

      if (newValue) {
        const subscription = await subscribeToPush();
        if (!subscription) {
          throw new Error('Push 구독에 실패했습니다.');
        }
        
        const sent = await sendSubscriptionToServer(subscription);
        if (!sent) {
          throw new Error('구독 정보 저장에 실패했습니다.');
        }

        setPushSubscribed(true);
        setSuccess(true);
        setTimeout(() => setSuccess(false), 3000);
      } else {
        await unsubscribeFromPush();
        await deleteSubscriptionFromServer();
        setPushSubscribed(false);
        setSuccess(true);
        setTimeout(() => setSuccess(false), 3000);
      }
    } catch (err: any) {
      setError(err.message || 'Push 알림 설정에 실패했습니다.');
      setPushSubscribed(!newValue);
    } finally {
      setSaving(false);
    }
  };

  const handleBuyAlertToggle = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.checked;
    
    try {
      setSaving(true);
      setError(null);
      setSuccess(false);
      
      const updatedSettings = await updateUserSettings({
        buyAlertEnabled: newValue,
      });
      
      setSettings(updatedSettings);
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err: any) {
      setError('설정 저장에 실패했습니다.');
      if (settings) {
        setSettings({ ...settings });
      }
    } finally {
      setSaving(false);
    }
  };

  const handleDataUpdateIntervalChange = async (event: React.FocusEvent<HTMLInputElement>) => {
    const newValue = parseInt(event.target.value, 10);
    
    if (isNaN(newValue) || newValue < 1) {
      setError('업데이트 간격은 1분 이상이어야 합니다.');
      if (settings) {
        setSettings({ ...settings });
      }
      return;
    }
    
    if (settings && newValue === settings.dataUpdateIntervalMinutes) {
      return;
    }
    
    try {
      setSaving(true);
      setError(null);
      setSuccess(false);
      
      const updatedSettings = await updateUserSettings({
        dataUpdateIntervalMinutes: newValue,
      });
      
      setSettings(updatedSettings);
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err: any) {
      setError('설정 저장에 실패했습니다.');
      if (settings) {
        setSettings({ ...settings });
      }
    } finally {
      setSaving(false);
    }
  };

  const requestNotificationPermission = async () => {
    if ('Notification' in window) {
      try {
        const permission = await Notification.requestPermission();
        alert(`알림 권한: ${permission === 'granted' ? '허용됨 ✅' : permission === 'denied' ? '거부됨 ❌' : '기본값'}`);
      } catch (error) {
        alert('알림 권한 요청에 실패했습니다.');
      }
    } else {
      alert('이 브라우저는 알림을 지원하지 않습니다.');
    }
  };

  const handleTestNotification = async () => {
    try {
      if ('Notification' in window) {
        if (Notification.permission === 'granted') {
          new Notification('🧪 테스트 알림', {
            body: '브라우저 알림이 정상적으로 작동합니다!',
            icon: '/favicon.ico',
          });
        } else if (Notification.permission === 'default') {
          const permission = await Notification.requestPermission();
          if (permission === 'granted') {
            new Notification('🧪 테스트 알림', {
              body: '브라우저 알림이 정상적으로 작동합니다!',
              icon: '/favicon.ico',
            });
          }
        } else {
          alert('알림 권한이 차단되었습니다.');
        }
      }
    } catch (error) {
      alert('테스트 알림에 실패했습니다.');
    }
  };

  // ==================== 설정 Export/Import 핸들러 ====================

  const handleExport = async () => {
    try {
      setExporting(true);
      setError(null);
      await settingsApi.downloadExportFile();
      setSuccess(true);
      setTimeout(() => setSuccess(false), 3000);
    } catch (err: any) {
      setError('설정 내보내기에 실패했습니다: ' + (err.message || '알 수 없는 오류'));
    } finally {
      setExporting(false);
    }
  };

  const handleImportClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      if (!file.name.endsWith('.json')) {
        setError('JSON 파일만 업로드할 수 있습니다.');
        return;
      }
      setSelectedFile(file);
      setImportConfirmOpen(true);
    }
    // 같은 파일 재선택을 위해 value 초기화
    event.target.value = '';
  };

  const handleImportConfirm = async () => {
    if (!selectedFile) return;
    
    try {
      setImporting(true);
      setError(null);
      setImportConfirmOpen(false);
      
      const result = await settingsApi.importFromFile(selectedFile);
      
      if (result.success) {
        setSuccess(true);
        
        // ✅ 보조지표 설정이 포함되어 있으므로 페이지 새로고침
        console.log('✅ 설정 Import 완료 - 페이지를 새로고침합니다...');
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        setError(result.message || '설정 가져오기에 실패했습니다.');
        setImporting(false);
        setSelectedFile(null);
      }
    } catch (err: any) {
      setError('설정 가져오기에 실패했습니다: ' + (err.message || '알 수 없는 오류'));
      setImporting(false);
      setSelectedFile(null);
    }
  };

  const handleImportCancel = () => {
    setImportConfirmOpen(false);
    setSelectedFile(null);
  };

  if (loading) {
    return (
      <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
        <CircularProgress />
      </Box>
    );
  }

  return (
    <Box>
      <Typography variant="h6" gutterBottom>
        일반 설정
      </Typography>

      {error && (
        <Alert severity="error" sx={{ mb: 2 }}>
          {error}
        </Alert>
      )}

      {success && (
        <Alert severity="success" sx={{ mb: 2 }}>
          설정이 저장되었습니다.
        </Alert>
      )}

      {/* 사용자 정보 */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          사용자 정보
        </Typography>
        <Typography variant="body1">
          <strong>사용자명:</strong> {settings?.username || '알 수 없음'}
        </Typography>
      </Box>

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

      {/* 색상 테마 설정 */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          🎨 색상 테마
        </Typography>
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
          앱 전체의 색상 테마를 선택합니다.
        </Typography>
        
        <ToggleButtonGroup
          value={themeMode}
          exclusive
          onChange={(_, newMode) => newMode && setThemeMode(newMode as ThemeMode)}
          aria-label="테마 선택"
          sx={{ 
            display: 'flex',
            flexWrap: 'wrap',
            gap: 1,
            '& .MuiToggleButton-root': {
              flex: '1 1 auto',
              minWidth: '100px',
              py: 2,
              border: '2px solid',
              borderRadius: '12px !important',
              '&.Mui-selected': {
                borderWidth: '2px',
              },
            },
          }}
        >
          <ToggleButton 
            value="light" 
            aria-label="화이트 모드"
            sx={{
              borderColor: themeMode === 'light' ? 'primary.main' : 'divider',
              backgroundColor: themeMode === 'light' ? 'primary.light' : 'transparent',
              '&.Mui-selected': {
                backgroundColor: 'primary.light',
                color: 'primary.contrastText',
                '&:hover': {
                  backgroundColor: 'primary.main',
                },
              },
            }}
          >
            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
              <Paper 
                elevation={2}
                sx={{ 
                  width: 40, 
                  height: 40, 
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  background: 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)',
                  border: '2px solid #e0e0e0',
                }}
              >
                <LightModeIcon sx={{ color: '#ff9800' }} />
              </Paper>
              <Typography variant="body2" fontWeight={themeMode === 'light' ? 'bold' : 'normal'}>
                화이트
              </Typography>
            </Box>
          </ToggleButton>
          
          <ToggleButton 
            value="dark" 
            aria-label="다크 모드"
            sx={{
              borderColor: themeMode === 'dark' ? '#667eea' : 'divider',
              backgroundColor: themeMode === 'dark' ? 'rgba(102, 126, 234, 0.2)' : 'transparent',
              '&.Mui-selected': {
                backgroundColor: 'rgba(102, 126, 234, 0.3)',
                color: 'white',
                '&:hover': {
                  backgroundColor: 'rgba(102, 126, 234, 0.4)',
                },
              },
            }}
          >
            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
              <Paper 
                elevation={2}
                sx={{ 
                  width: 40, 
                  height: 40, 
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
                  border: '2px solid #667eea',
                }}
              >
                <DarkModeIcon sx={{ color: '#a78bfa' }} />
              </Paper>
              <Typography variant="body2" fontWeight={themeMode === 'dark' ? 'bold' : 'normal'}>
                다크
              </Typography>
            </Box>
          </ToggleButton>
          
          <ToggleButton 
            value="blue" 
            aria-label="블루 모드"
            sx={{
              borderColor: themeMode === 'blue' ? '#2196f3' : 'divider',
              backgroundColor: themeMode === 'blue' ? 'rgba(33, 150, 243, 0.2)' : 'transparent',
              '&.Mui-selected': {
                backgroundColor: 'rgba(33, 150, 243, 0.3)',
                color: 'white',
                '&:hover': {
                  backgroundColor: 'rgba(33, 150, 243, 0.4)',
                },
              },
            }}
          >
            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
              <Paper 
                elevation={2}
                sx={{ 
                  width: 40, 
                  height: 40, 
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  background: 'linear-gradient(135deg, #0a1929 0%, #0d2137 50%, #0d47a1 100%)',
                  border: '2px solid #2196f3',
                }}
              >
                <WavesIcon sx={{ color: '#64b5f6' }} />
              </Paper>
              <Typography variant="body2" fontWeight={themeMode === 'blue' ? 'bold' : 'normal'}>
                블루
              </Typography>
            </Box>
          </ToggleButton>
        </ToggleButtonGroup>
        
        <Alert severity="info" sx={{ mt: 2 }}>
          <Typography variant="caption">
            {themeMode === 'light' && '☀️ 화이트 모드: 밝은 배경에 편안한 시인성을 제공합니다.'}
            {themeMode === 'dark' && '🌙 다크 모드: 눈의 피로를 줄이고 배터리를 절약합니다.'}
            {themeMode === 'blue' && '🌊 블루 모드: 차분한 블루 톤으로 집중력을 높여줍니다.'}
          </Typography>
        </Alert>
      </Box>

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

      {/* 기본 투자 전략 설정 */}
      <Box sx={{ mb: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <TrendingUpIcon color="primary" />
          <Typography variant="subtitle2" color="text.secondary">
            기본 투자 전략
          </Typography>
        </Box>
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
          차트 분석 및 매매 신호 생성에 사용할 기본 전략을 선택합니다.
        </Typography>
        
        <FormControl fullWidth size="small">
          <InputLabel>기본 전략</InputLabel>
          <Select
            value={defaultStrategy}
            label="기본 전략"
            onChange={(e) => handleDefaultStrategyChange(e.target.value)}
            disabled={loadingStrategies}
          >
            {loadingStrategies ? (
              <MenuItem value="">
                <CircularProgress size={20} sx={{ mr: 1 }} />
                로딩 중...
              </MenuItem>
            ) : strategies.length > 0 ? (
              strategies.map((strategy) => (
                <MenuItem key={strategy.id} value={strategy.strategyType}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography>{strategy.name}</Typography>
                    {strategy.strategyType === 'TREND_STOCHASTIC' && (
                      <Chip label="추천" size="small" color="primary" sx={{ height: 20 }} />
                    )}
                  </Box>
                </MenuItem>
              ))
            ) : (
              // 기본 전략 타입 목록 (DB 연결 실패 시)
              <>
                <MenuItem value="STRATEGY_1">MACD 단독</MenuItem>
                <MenuItem value="STRATEGY_2">MACD + Stochastic (권장)</MenuItem>
                <MenuItem value="STRATEGY_3">MACD + Stochastic + ADX</MenuItem>
                <MenuItem value="STRATEGY_4">종합 전략 (전체)</MenuItem>
                <MenuItem value="STRATEGY_5">MACD Zero Cross</MenuItem>
                <MenuItem value="TREND_STOCHASTIC">
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography>MACD + Stochastic Slow (추세 기반)</Typography>
                    <Chip label="추천" size="small" color="primary" sx={{ height: 20 }} />
                  </Box>
                </MenuItem>
                <MenuItem value="TREND_STOCHASTIC_CCI">
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography>CCI + Stochastic Slow (CCI 기반)</Typography>
                    <Chip label="신규" size="small" color="secondary" sx={{ height: 20 }} />
                  </Box>
                </MenuItem>
                <MenuItem value="STOCHASTIC_ONLY">
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Typography>Stochastic Slow Only</Typography>
                  </Box>
                </MenuItem>
              </>
            )}
          </Select>
        </FormControl>
        
        {defaultStrategy === 'TREND_STOCHASTIC' && (
          <Alert severity="success" sx={{ mt: 2 }}>
            <Typography variant="caption">
              📊 <strong>MACD + Stochastic Slow 전략</strong>: 정배열/역배열 추세에 따른 Stochastic 레벨 돌파 매매
            </Typography>
          </Alert>
        )}

        {defaultStrategy === 'TREND_STOCHASTIC_CCI' && (
          <Alert severity="info" sx={{ mt: 2 }}>
            <Typography variant="caption">
              📈 <strong>CCI + Stochastic Slow 전략</strong>: CCI 추세 (CCI {'>'} 0: 상승, CCI {'<'} 0: 하락)에 따른 Stochastic 레벨 돌파 매매
            </Typography>
          </Alert>
        )}
        
        {defaultStrategy && defaultStrategy !== 'TREND_STOCHASTIC' && defaultStrategy !== 'TREND_STOCHASTIC_CCI' && (
          <Alert severity="info" sx={{ mt: 2 }}>
            <Typography variant="caption">
              📌 선택된 전략: <strong>{getStrategyTypeName(defaultStrategy)}</strong>
            </Typography>
          </Alert>
        )}
      </Box>

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

      {/* 투자분석 설정 저장 방식 */}
      <Box sx={{ mb: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <FolderIcon color="primary" />
          <Typography variant="subtitle2" color="text.secondary">
            투자분석 설정 저장 방식
          </Typography>
        </Box>
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
          투자분석 화면(투자전략, 시간봉, 보조지표 등) 설정을 파일 또는 DB에 저장합니다. 기본값은 파일입니다.
        </Typography>
        <ToggleButtonGroup
          value={storageMode}
          exclusive
          onChange={(_, newMode) => {
            if (newMode) {
              setStorageMode(newMode as InvestmentAnalysisStorageMode);
              setStorageModeState(newMode as InvestmentAnalysisStorageMode);
              setSuccess(true);
              setTimeout(() => setSuccess(false), 2000);
            }
          }}
          aria-label="저장 방식 선택"
          sx={{ display: 'flex', gap: 1 }}
        >
          <ToggleButton value="file" aria-label="파일">
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1, px: 2 }}>
              <FolderIcon fontSize="small" />
              <Typography variant="body2">파일 (기본)</Typography>
            </Box>
          </ToggleButton>
          <ToggleButton value="db" aria-label="DB">
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1, px: 2 }}>
              <StorageIcon fontSize="small" />
              <Typography variant="body2">DB</Typography>
            </Box>
          </ToggleButton>
        </ToggleButtonGroup>
        <Alert severity="info" sx={{ mt: 2 }}>
          <Typography variant="caption">
            {storageMode === 'file' && '📁 파일: 설정을 브라우저 로컬에 저장하며, 설정파일 내보내기/가져오기로 백업·복원할 수 있습니다.'}
            {storageMode === 'db' && '🗄️ DB: 설정을 서버 DB에 저장하며, 로그인 시 동기화됩니다.'}
          </Typography>
        </Alert>
      </Box>

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

      {/* 알림 설정 */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          알림 설정
        </Typography>
        
        <FormControlLabel
          control={
            <Switch
              checked={settings?.buyAlertEnabled || false}
              onChange={handleBuyAlertToggle}
              disabled={saving || !settings}
            />
          }
          label={
            <Box>
              <Typography variant="body1">매수 알림</Typography>
              <Typography variant="caption" color="text.secondary">
                매수 신호 발생 시 알림을 받습니다
              </Typography>
            </Box>
          }
        />
      </Box>

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

      {/* 데이터 업데이트 설정 */}
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          데이터 업데이트 설정
        </Typography>
        
        <TextField
          fullWidth
          type="number"
          label="업데이트 간격"
          value={settings?.dataUpdateIntervalMinutes || 1}
          onChange={(e) => {
            if (settings) {
              setSettings({ ...settings, dataUpdateIntervalMinutes: parseInt(e.target.value, 10) || 1 });
            }
          }}
          onBlur={handleDataUpdateIntervalChange}
          disabled={saving || !settings}
          InputProps={{
            endAdornment: <InputAdornment position="end">분</InputAdornment>,
            inputProps: { min: 1, max: 60 }
          }}
          helperText="즐겨찾기 종목의 데이터를 자동으로 업데이트하는 간격입니다."
          size="small"
          sx={{ mt: 1 }}
        />
      </Box>

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

      {/* 브라우저 알림 권한 */}
      <Box sx={{ mb: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <Typography variant="subtitle2" color="text.secondary">
            브라우저 알림 권한
          </Typography>
          {'Notification' in window && (
            <Chip 
              label={
                Notification.permission === 'granted' ? '허용됨 ✅' : 
                Notification.permission === 'denied' ? '거부됨 ❌' : 
                '설정 안됨 ⚠️'
              }
              size="small" 
              color={
                Notification.permission === 'granted' ? 'success' : 
                Notification.permission === 'denied' ? 'error' : 
                'warning'
              }
            />
          )}
        </Box>
        
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
          브라우저 알림을 받으려면 권한을 허용해야 합니다.
        </Typography>
        
        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
          {'Notification' in window && Notification.permission !== 'granted' && (
            <Button
              variant="outlined"
              size="small"
              onClick={requestNotificationPermission}
              disabled={Notification.permission === 'denied'}
            >
              알림 권한 요청
            </Button>
          )}
          
          <Button
            variant="outlined"
            size="small"
            onClick={handleTestNotification}
          >
            테스트 알림 보내기
          </Button>
        </Box>
      </Box>

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

      {/* Push 알림 설정 */}
      <Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <Typography variant="subtitle2" color="text.secondary">
            백그라운드 Push 알림 (PWA)
          </Typography>
          {isPWAPushSupported() ? (
            pushSubscribed ? (
              <Chip 
                label="활성화" 
                size="small" 
                color="success" 
                icon={<NotificationsIcon />}
              />
            ) : (
              <Chip 
                label="비활성화" 
                size="small" 
                color="default" 
                icon={<NotificationsOffIcon />}
              />
            )
          ) : (
            <Chip 
              label="사용 불가" 
              size="small" 
              color="warning" 
            />
          )}
        </Box>
        
        {!isSecureContext() && (
          <Alert severity="warning" sx={{ mb: 2 }}>
            <Typography variant="caption">
              HTTP 환경에서는 PWA Web Push를 사용할 수 없습니다.
            </Typography>
          </Alert>
        )}
        
        <FormControlLabel
          control={
            <Switch
              checked={pushSubscribed}
              onChange={handlePushToggle}
              disabled={!isPWAPushSupported() || saving || checkingPush}
            />
          }
          label={
            <Box>
              <Typography variant="body1">백그라운드 알림</Typography>
              <Typography variant="caption" color="text.secondary">
                {isPWAPushSupported() 
                  ? '브라우저를 닫아도 알림을 받을 수 있습니다'
                  : 'HTTPS 환경에서만 사용 가능'}
              </Typography>
            </Box>
          }
        />
      </Box>

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

      {/* 설정 Export/Import */}
      <Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
          <SettingsIcon color="primary" />
          <Typography variant="subtitle2" color="text.secondary">
            설정 백업 및 복원
          </Typography>
        </Box>
        
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 2 }}>
          현재 설정을 JSON 파일로 내보내거나, 저장된 설정 파일을 가져와 적용할 수 있습니다.
        </Typography>
        
        <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
          <Button
            variant="outlined"
            startIcon={exporting ? <CircularProgress size={20} /> : <FileDownloadIcon />}
            onClick={handleExport}
            disabled={exporting || importing}
            sx={{ minWidth: 140 }}
          >
            {exporting ? '내보내는 중...' : '설정 내보내기'}
          </Button>
          
          <Button
            variant="outlined"
            startIcon={importing ? <CircularProgress size={20} /> : <FileUploadIcon />}
            onClick={handleImportClick}
            disabled={exporting || importing}
            sx={{ minWidth: 140 }}
          >
            {importing ? '가져오는 중...' : '설정 가져오기'}
          </Button>
          
          {/* 숨겨진 파일 입력 */}
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileSelect}
            accept=".json"
            style={{ display: 'none' }}
          />
        </Box>
        
        <Alert severity="info" sx={{ mt: 2 }}>
          <Typography variant="caption">
            📦 <strong>내보내기 항목:</strong> 분석 설정, 보조지표 기간 설정, 트레이딩 전략, 전략 규칙
          </Typography>
        </Alert>
      </Box>

      {/* Import 확인 다이얼로그 */}
      <Dialog
        open={importConfirmOpen}
        onClose={handleImportCancel}
      >
        <DialogTitle>설정 가져오기 확인</DialogTitle>
        <DialogContent>
          <DialogContentText>
            <strong>{selectedFile?.name}</strong> 파일의 설정을 가져옵니다.
            <br /><br />
            ⚠️ 기존 설정이 덮어씌워질 수 있습니다. 계속하시겠습니까?
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleImportCancel} color="inherit">
            취소
          </Button>
          <Button onClick={handleImportConfirm} color="primary" variant="contained">
            가져오기
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default GeneralSettingsTab;

