import React, { useState } from 'react';
import {
  Box,
  Paper,
  Tabs,
  Tab,
  Typography,
} from '@mui/material';
import SettingsIcon from '@mui/icons-material/Settings';
import PaletteIcon from '@mui/icons-material/Palette';
import ShowChartIcon from '@mui/icons-material/ShowChart';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import VisibilityIcon from '@mui/icons-material/Visibility';
import ScheduleIcon from '@mui/icons-material/Schedule';
import DashboardIcon from '@mui/icons-material/Dashboard';
import CalculateIcon from '@mui/icons-material/Calculate';

// 설정 탭 컴포넌트들 import
import GeneralSettingsTab from '../components/settings/GeneralSettingsTab';
import ChartColorSettingsTab from '../components/settings/ChartColorSettingsTab';
import IndicatorSettingsTab from '../components/settings/IndicatorSettingsTab';
import SignalWeightSettingsTab from '../components/settings/SignalWeightSettingsTab';
import IndicatorVisibilityTab from '../components/settings/IndicatorVisibilityTab';
import SchedulerSettingsTab from '../components/settings/SchedulerSettingsTab';
import UIThemeSettingsTab from '../components/settings/UIThemeSettingsTab';
import IndicatorCalculationSettingsTab from '../components/settings/IndicatorCalculationSettingsTab';
// 투자 전략 탭은 전략관리(StrategyRulePage)로 통합됨

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`settings-tabpanel-${index}`}
      aria-labelledby={`settings-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          {children}
        </Box>
      )}
    </div>
  );
}

const SettingsPage: React.FC = () => {
  const [currentTab, setCurrentTab] = useState(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setCurrentTab(newValue);
  };

  return (
    <Box className="fade-in">
      <Typography variant="h4" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
        <SettingsIcon color="primary" />
        설정
      </Typography>

      <Paper elevation={0} sx={{ bgcolor: 'background.paper', border: '1px solid rgba(100, 149, 237, 0.2)' }}>
        {/* 탭 네비게이션 */}
        <Tabs
          value={currentTab}
          onChange={handleTabChange}
          variant="scrollable"
          scrollButtons="auto"
          sx={{
            borderBottom: 1,
            borderColor: 'divider',
            bgcolor: 'background.paper',
          }}
        >
          <Tab
            icon={<SettingsIcon />}
            label="일반 설정"
            id="settings-tab-0"
            aria-controls="settings-tabpanel-0"
          />
          <Tab
            icon={<VisibilityIcon />}
            label="보조지표 표시"
            id="settings-tab-1"
            aria-controls="settings-tabpanel-1"
          />
          <Tab
            icon={<PaletteIcon />}
            label="차트 색상"
            id="settings-tab-2"
            aria-controls="settings-tabpanel-2"
          />
          <Tab
            icon={<ShowChartIcon />}
            label="보조지표 설정"
            id="settings-tab-3"
            aria-controls="settings-tabpanel-3"
          />
          <Tab
            icon={<CalculateIcon />}
            label="보조지표 계산"
            id="settings-tab-4"
            aria-controls="settings-tabpanel-4"
          />
          <Tab
            icon={<TrendingUpIcon />}
            label="신호 가중치"
            id="settings-tab-5"
            aria-controls="settings-tabpanel-5"
          />
          <Tab
            icon={<ScheduleIcon />}
            label="스케줄러"
            id="settings-tab-6"
            aria-controls="settings-tabpanel-6"
          />
          <Tab
            icon={<DashboardIcon />}
            label="UI 테마"
            id="settings-tab-7"
            aria-controls="settings-tabpanel-7"
          />
        </Tabs>

        {/* 탭 컨텐츠 */}
        <TabPanel value={currentTab} index={0}>
          <GeneralSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={1}>
          <IndicatorVisibilityTab />
        </TabPanel>

        <TabPanel value={currentTab} index={2}>
          <ChartColorSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={3}>
          <IndicatorSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={4}>
          <IndicatorCalculationSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={5}>
          <SignalWeightSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={6}>
          <SchedulerSettingsTab />
        </TabPanel>

        <TabPanel value={currentTab} index={7}>
          <UIThemeSettingsTab />
        </TabPanel>
      </Paper>
    </Box>
  );
};

export default SettingsPage;
