import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
import { useAuth } from './AuthContext';

// UI 테마 ID 타입
export type UIThemeId = 
  // PC 테마
  | 'pc-01-trading-terminal'
  | 'pc-02-analytics-report'
  | 'pc-04-dark-pro'
  | 'pc-05-splitview'
  // 태블릿 테마
  | 'tablet-01-grid-dashboard'
  | 'tablet-02-card-stack'
  | 'tablet-03-split-horizontal'
  | 'tablet-04-slide-panel'
  | 'tablet-05-compact-pro'
  // 모바일 테마
  | 'mobile-01-app-style'
  | 'mobile-02-card-scroll'
  | 'mobile-03-fullscreen-chart'
  | 'mobile-04-bottom-sheet'
  | 'mobile-05-minimal-dark';

// 디바이스 타입 정의
export type DeviceType = 'pc' | 'tablet' | 'mobile';

// UI 테마 설정 인터페이스
export interface UIThemeSettings {
  pc: UIThemeId;
  tablet: UIThemeId;
  mobile: UIThemeId;
}

// 레이아웃 타입
export type LayoutType = 'three-column' | 'two-column' | 'tab-based' | 'fullscreen' | 'card-grid' | 'bottom-sheet';

// 테마 스타일 인터페이스
export interface UIThemeStyle {
  // 색상
  primaryColor: string;
  accentColor: string;
  backgroundColor: string;
  surfaceColor: string;
  textColor: string;
  textSecondaryColor: string;
  borderColor: string;
  // 레이아웃
  layoutType: LayoutType;
  // 추가 스타일
  cardBorderRadius: number;
  useShadow: boolean;
  useGradient: boolean;
  gradientColors?: string[];
}

// 테마 정보 인터페이스
export interface UIThemeInfo {
  id: UIThemeId;
  name: string;
  description: string;
  mockupUrl: string; // 목업 HTML 파일 경로
  tags: string[];
  themeType: 'dark' | 'light';
  deviceType: DeviceType;
  badgeCode: string; // PC-01, Tablet-02 등
  style: UIThemeStyle; // 테마 스타일
}

// 사용 가능한 테마 목록
export const UI_THEMES: UIThemeInfo[] = [
  // PC 테마
  {
    id: 'pc-01-trading-terminal',
    name: '트레이딩 터미널 (기본)',
    description: '현재 구현된 3단 레이아웃 - 좌측 설정, 중앙 대형 차트, 우측 성과 패널',
    mockupUrl: '/ui-mockups/pc/pc-01-trading-terminal.html',
    tags: ['기본', '다크테마', '3단레이아웃'],
    themeType: 'dark',
    deviceType: 'pc',
    badgeCode: 'PC-01 기본',
    style: {
      primaryColor: '#22c55e',
      accentColor: '#6366f1',
      backgroundColor: '#0a0a0f',
      surfaceColor: '#131318',
      textColor: '#ffffff',
      textSecondaryColor: '#71717a',
      borderColor: '#27272a',
      layoutType: 'three-column',
      cardBorderRadius: 8,
      useShadow: false,
      useGradient: false,
    },
  },
  {
    id: 'pc-02-analytics-report',
    name: '분석 리포트',
    description: '다크 테마의 비즈니스 리포트 스타일. 깔끔한 카드와 테이블 중심',
    mockupUrl: '/ui-mockups/pc/pc-02-analytics-report.html',
    tags: ['다크테마', '리포트형', '비즈니스'],
    themeType: 'dark',
    deviceType: 'pc',
    badgeCode: 'PC-02',
    style: {
      primaryColor: '#3b82f6',
      accentColor: '#8b5cf6',
      backgroundColor: '#0f172a',
      surfaceColor: '#1e293b',
      textColor: '#f1f5f9',
      textSecondaryColor: '#94a3b8',
      borderColor: '#334155',
      layoutType: 'card-grid',
      cardBorderRadius: 16,
      useShadow: true,
      useGradient: false,
    },
  },
  {
    id: 'pc-04-dark-pro',
    name: '다크 프로페셔널',
    description: '퍼플 액센트의 프로페셔널 다크 테마. 그라데이션과 카드 중심',
    mockupUrl: '/ui-mockups/pc/pc-04-dark-pro.html',
    tags: ['다크', '퍼플', '그라데이션'],
    themeType: 'dark',
    deviceType: 'pc',
    badgeCode: 'PC-04',
    style: {
      primaryColor: '#a855f7',
      accentColor: '#ec4899',
      backgroundColor: '#0f0f23',
      surfaceColor: '#1a1a2e',
      textColor: '#f8fafc',
      textSecondaryColor: '#a1a1aa',
      borderColor: '#27273a',
      layoutType: 'card-grid',
      cardBorderRadius: 20,
      useShadow: true,
      useGradient: true,
      gradientColors: ['#667eea', '#764ba2'],
    },
  },
  {
    id: 'pc-05-splitview',
    name: '스플릿뷰',
    description: '좌우 50:50 분할 레이아웃. 설정/결과와 차트 영역 분리',
    mockupUrl: '/ui-mockups/pc/pc-05-splitview.html',
    tags: ['2분할', '네이비', '정보분리'],
    themeType: 'dark',
    deviceType: 'pc',
    badgeCode: 'PC-05',
    style: {
      primaryColor: '#3b82f6',
      accentColor: '#22d3ee',
      backgroundColor: '#0c1222',
      surfaceColor: '#162032',
      textColor: '#e2e8f0',
      textSecondaryColor: '#94a3b8',
      borderColor: '#1e3a5f',
      layoutType: 'two-column',
      cardBorderRadius: 12,
      useShadow: true,
      useGradient: false,
    },
  },
  // 태블릿 테마
  {
    id: 'tablet-01-grid-dashboard',
    name: '그리드 대시보드',
    description: '4컬럼 그리드 기반 대시보드. 메트릭 카드와 차트가 조화롭게 배치',
    mockupUrl: '/ui-mockups/tablet/tablet-01-grid-dashboard.html',
    tags: ['그리드', '다크', '카드'],
    themeType: 'dark',
    deviceType: 'tablet',
    badgeCode: 'Tablet-01',
    style: {
      primaryColor: '#14b8a6',
      accentColor: '#f97316',
      backgroundColor: '#111827',
      surfaceColor: '#1f2937',
      textColor: '#f9fafb',
      textSecondaryColor: '#9ca3af',
      borderColor: '#374151',
      layoutType: 'card-grid',
      cardBorderRadius: 16,
      useShadow: true,
      useGradient: false,
    },
  },
  {
    id: 'tablet-02-card-stack',
    name: '카드 스택',
    description: '세로 스크롤 카드 스택 구조. 라이트 테마의 깔끔한 디자인',
    mockupUrl: '/ui-mockups/tablet/tablet-02-card-stack.html',
    tags: ['카드스택', '라이트', '스크롤'],
    themeType: 'light',
    deviceType: 'tablet',
    badgeCode: 'Tablet-02',
    style: {
      primaryColor: '#059669',
      accentColor: '#8b5cf6',
      backgroundColor: '#f9fafb',
      surfaceColor: '#ffffff',
      textColor: '#111827',
      textSecondaryColor: '#6b7280',
      borderColor: '#e5e7eb',
      layoutType: 'tab-based',
      cardBorderRadius: 20,
      useShadow: true,
      useGradient: false,
    },
  },
  {
    id: 'tablet-03-split-horizontal',
    name: '가로 분할',
    description: '상단 설정/결과, 하단 차트/정보로 가로 분할된 레이아웃',
    mockupUrl: '/ui-mockups/tablet/tablet-03-split-horizontal.html',
    tags: ['가로분할', '다크', '컴팩트'],
    themeType: 'dark',
    deviceType: 'tablet',
    badgeCode: 'Tablet-03',
    style: {
      primaryColor: '#22c55e',
      accentColor: '#ef4444',
      backgroundColor: '#18181b',
      surfaceColor: '#27272a',
      textColor: '#fafafa',
      textSecondaryColor: '#a1a1aa',
      borderColor: '#3f3f46',
      layoutType: 'tab-based',
      cardBorderRadius: 8,
      useShadow: false,
      useGradient: false,
    },
  },
  {
    id: 'tablet-04-slide-panel',
    name: '슬라이드 패널',
    description: '탭 네비게이션과 슬라이드 가능한 메트릭 카드',
    mockupUrl: '/ui-mockups/tablet/tablet-04-slide-panel.html',
    tags: ['탭', '슬라이드', '퍼플'],
    themeType: 'dark',
    deviceType: 'tablet',
    badgeCode: 'Tablet-04',
    style: {
      primaryColor: '#8b5cf6',
      accentColor: '#f472b6',
      backgroundColor: '#0f0a1a',
      surfaceColor: '#1a1425',
      textColor: '#f5f3ff',
      textSecondaryColor: '#a78bfa',
      borderColor: '#2e1f47',
      layoutType: 'card-grid',
      cardBorderRadius: 16,
      useShadow: true,
      useGradient: true,
      gradientColors: ['#8b5cf6', '#ec4899'],
    },
  },
  {
    id: 'tablet-05-compact-pro',
    name: '컴팩트 프로',
    description: '화이트 배경의 컴팩트한 프로페셔널 디자인',
    mockupUrl: '/ui-mockups/tablet/tablet-05-compact-pro.html',
    tags: ['컴팩트', '화이트', '프로'],
    themeType: 'light',
    deviceType: 'tablet',
    badgeCode: 'Tablet-05',
    style: {
      primaryColor: '#0284c7',
      accentColor: '#f59e0b',
      backgroundColor: '#ffffff',
      surfaceColor: '#f8fafc',
      textColor: '#0f172a',
      textSecondaryColor: '#64748b',
      borderColor: '#cbd5e1',
      layoutType: 'tab-based',
      cardBorderRadius: 12,
      useShadow: true,
      useGradient: false,
    },
  },
  // 모바일 테마
  {
    id: 'mobile-01-app-style',
    name: '앱 스타일',
    description: 'iOS/Android 앱 스타일. 바텀 네비게이션과 플로팅 버튼',
    mockupUrl: '/ui-mockups/mobile/mobile-01-app-style.html',
    tags: ['앱스타일', '다크', '바텀네비'],
    themeType: 'dark',
    deviceType: 'mobile',
    badgeCode: 'Mobile-01',
    style: {
      primaryColor: '#10b981',
      accentColor: '#f59e0b',
      backgroundColor: '#0f172a',
      surfaceColor: '#1e293b',
      textColor: '#f1f5f9',
      textSecondaryColor: '#94a3b8',
      borderColor: '#334155',
      layoutType: 'fullscreen',
      cardBorderRadius: 16,
      useShadow: true,
      useGradient: false,
    },
  },
  {
    id: 'mobile-02-card-scroll',
    name: '카드 스크롤',
    description: '라이트 테마의 카드 기반 스크롤 UI. 가로 스크롤 메트릭',
    mockupUrl: '/ui-mockups/mobile/mobile-02-card-scroll.html',
    tags: ['카드', '라이트', '스크롤'],
    themeType: 'light',
    deviceType: 'mobile',
    badgeCode: 'Mobile-02',
    style: {
      primaryColor: '#16a34a',
      accentColor: '#dc2626',
      backgroundColor: '#f9fafb',
      surfaceColor: '#ffffff',
      textColor: '#111827',
      textSecondaryColor: '#6b7280',
      borderColor: '#e5e7eb',
      layoutType: 'tab-based',
      cardBorderRadius: 20,
      useShadow: true,
      useGradient: false,
    },
  },
  {
    id: 'mobile-03-fullscreen-chart',
    name: '풀스크린 차트',
    description: '차트가 화면 전체를 차지. 오버레이로 정보 표시',
    mockupUrl: '/ui-mockups/mobile/mobile-03-fullscreen-chart.html',
    tags: ['풀스크린', '오버레이', '몰입형'],
    themeType: 'dark',
    deviceType: 'mobile',
    badgeCode: 'Mobile-03',
    style: {
      primaryColor: '#22c55e',
      accentColor: '#ef4444',
      backgroundColor: '#000000',
      surfaceColor: 'rgba(0,0,0,0.8)',
      textColor: '#ffffff',
      textSecondaryColor: '#a1a1aa',
      borderColor: 'rgba(255,255,255,0.1)',
      layoutType: 'fullscreen',
      cardBorderRadius: 12,
      useShadow: false,
      useGradient: false,
    },
  },
  {
    id: 'mobile-04-bottom-sheet',
    name: '바텀시트',
    description: '상단 차트 + 하단 바텀시트 구조. 드래그로 확장 가능',
    mockupUrl: '/ui-mockups/mobile/mobile-04-bottom-sheet.html',
    tags: ['바텀시트', '드래그', '블루'],
    themeType: 'dark',
    deviceType: 'mobile',
    badgeCode: 'Mobile-04',
    style: {
      primaryColor: '#3b82f6',
      accentColor: '#f43f5e',
      backgroundColor: '#0c1929',
      surfaceColor: '#1e3a5f',
      textColor: '#e0f2fe',
      textSecondaryColor: '#7dd3fc',
      borderColor: '#1e40af',
      layoutType: 'bottom-sheet',
      cardBorderRadius: 24,
      useShadow: true,
      useGradient: true,
      gradientColors: ['#1e3a8a', '#3b82f6'],
    },
  },
  {
    id: 'mobile-05-minimal-dark',
    name: '미니멀 다크',
    description: '대형 수익률 표시의 미니멀 디자인. 심플하고 직관적',
    mockupUrl: '/ui-mockups/mobile/mobile-05-minimal-dark.html',
    tags: ['미니멀', '다크', '심플'],
    themeType: 'dark',
    deviceType: 'mobile',
    badgeCode: 'Mobile-05',
    style: {
      primaryColor: '#22c55e',
      accentColor: '#ef4444',
      backgroundColor: '#09090b',
      surfaceColor: '#18181b',
      textColor: '#fafafa',
      textSecondaryColor: '#71717a',
      borderColor: '#27272a',
      layoutType: 'fullscreen',
      cardBorderRadius: 8,
      useShadow: false,
      useGradient: false,
    },
  },
];

// Context 타입
interface UIThemeContextType {
  // 현재 설정된 테마
  themeSettings: UIThemeSettings;
  // 현재 디바이스 타입
  currentDevice: DeviceType;
  // 현재 적용되는 테마 ID
  currentThemeId: UIThemeId;
  // 현재 적용되는 테마 정보
  currentThemeInfo: UIThemeInfo | undefined;
  // 현재 적용되는 테마 스타일
  currentThemeStyle: UIThemeStyle;
  // 테마 설정 변경 (미리보기용 - 저장 안함)
  previewThemeForDevice: (device: DeviceType, themeId: UIThemeId) => void;
  // 테마 적용 (실제 저장)
  applyTheme: () => void;
  // 미리보기 취소 (원래 설정으로 복원)
  cancelPreview: () => void;
  // 미리보기 중인지 확인
  isPreviewing: boolean;
  // 미리보기 중인 테마 설정
  previewSettings: UIThemeSettings | null;
  // 특정 디바이스에서 사용 가능한 테마 목록
  getAvailableThemes: (device: DeviceType) => UIThemeInfo[];
  // 테마 정보 가져오기
  getThemeInfo: (themeId: UIThemeId) => UIThemeInfo | undefined;
  // 현재 사용자 ID (로그인 여부 확인용)
  currentUserId: number | null;
}

// 기본 스타일
const defaultStyle: UIThemeStyle = {
  primaryColor: '#22c55e',
  accentColor: '#6366f1',
  backgroundColor: '#0a0a0f',
  surfaceColor: '#131318',
  textColor: '#ffffff',
  textSecondaryColor: '#71717a',
  borderColor: '#27272a',
  layoutType: 'three-column',
  cardBorderRadius: 8,
  useShadow: false,
  useGradient: false,
};

// 기본값
const defaultThemeSettings: UIThemeSettings = {
  pc: 'pc-01-trading-terminal',
  tablet: 'tablet-01-grid-dashboard',
  mobile: 'mobile-01-app-style',
};

// localStorage 키 생성 함수 (비로그인 사용자용)
const getLocalStorageKey = (): string => {
  return 'ui_theme_settings_guest';
};

// API 호출 함수
const fetchUIThemeSettings = async (userId: number | null): Promise<UIThemeSettings | null> => {
  try {
    const url = userId 
      ? `/api/user/settings/ui-theme?userId=${userId}`
      : '/api/user/settings/ui-theme';
    
    const response = await fetch(url);
    if (response.ok) {
      const data = await response.json();
      if (data.success && data.settings) {
        return {
          pc: data.settings.pc || defaultThemeSettings.pc,
          tablet: data.settings.tablet || defaultThemeSettings.tablet,
          mobile: data.settings.mobile || defaultThemeSettings.mobile,
        };
      }
    }
  } catch (e) {
    console.error('API에서 UI 테마 설정 로드 실패:', e);
  }
  return null;
};

const saveUIThemeSettingsToAPI = async (userId: number, settings: UIThemeSettings): Promise<boolean> => {
  try {
    const response = await fetch('/api/user/settings/ui-theme', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        userId,
        pc: settings.pc,
        tablet: settings.tablet,
        mobile: settings.mobile,
      }),
    });
    
    if (response.ok) {
      const data = await response.json();
      console.log('🎨 API 테마 설정 저장 완료:', data);
      return data.success;
    }
  } catch (e) {
    console.error('API에 UI 테마 설정 저장 실패:', e);
  }
  return false;
};

// Context 생성
const UIThemeContext = createContext<UIThemeContextType | undefined>(undefined);

// 디바이스 타입 감지 함수
const detectDeviceType = (): DeviceType => {
  if (typeof window === 'undefined') return 'pc';
  
  const width = window.innerWidth;
  
  if (width < 768) {
    return 'mobile';
  } else if (width < 1024) {
    return 'tablet';
  }
  return 'pc';
};

// Provider 컴포넌트
export const UIThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const { user, isAuthenticated } = useAuth();
  const currentUserId = isAuthenticated && user ? user.id : null;
  
  // 로컬 저장소에서 설정 로드 (비로그인 사용자용)
  const loadLocalSettings = useCallback((): UIThemeSettings => {
    try {
      const storageKey = getLocalStorageKey();
      const saved = localStorage.getItem(storageKey);
      if (saved) {
        return { ...defaultThemeSettings, ...JSON.parse(saved) };
      }
    } catch (e) {
      console.error('로컬 UI 테마 설정 로드 실패:', e);
    }
    return defaultThemeSettings;
  }, []);

  const [themeSettings, setThemeSettings] = useState<UIThemeSettings>(defaultThemeSettings);
  const [previewSettings, setPreviewSettings] = useState<UIThemeSettings | null>(null);
  const [currentDevice, setCurrentDevice] = useState<DeviceType>(detectDeviceType);
  const [isLoading, setIsLoading] = useState(true);

  // 사용자 변경 시 해당 사용자의 테마 설정 로드
  useEffect(() => {
    const loadSettings = async () => {
      setIsLoading(true);
      
      if (currentUserId) {
        // 로그인 사용자: API에서 로드
        const apiSettings = await fetchUIThemeSettings(currentUserId);
        if (apiSettings) {
          setThemeSettings(apiSettings);
          console.log('🎨 API에서 테마 설정 로드:', { userId: currentUserId, settings: apiSettings });
        } else {
          setThemeSettings(defaultThemeSettings);
          console.log('🎨 API 설정 없음, 기본값 사용:', { userId: currentUserId });
        }
      } else {
        // 비로그인 사용자: localStorage에서 로드
        const localSettings = loadLocalSettings();
        setThemeSettings(localSettings);
        console.log('🎨 로컬에서 테마 설정 로드:', { settings: localSettings });
      }
      
      setPreviewSettings(null); // 미리보기 초기화
      setIsLoading(false);
    };
    
    loadSettings();
  }, [currentUserId, loadLocalSettings]);

  // 화면 크기 변경 감지
  useEffect(() => {
    const handleResize = () => {
      const newDevice = detectDeviceType();
      if (newDevice !== currentDevice) {
        setCurrentDevice(newDevice);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [currentDevice]);

  // 현재 적용되는 테마 (미리보기 중이면 미리보기 설정, 아니면 실제 설정)
  const effectiveSettings = previewSettings || themeSettings;
  const currentThemeId = effectiveSettings[currentDevice];
  const currentThemeInfo = UI_THEMES.find(t => t.id === currentThemeId);
  const currentThemeStyle = currentThemeInfo?.style || defaultStyle;

  // 미리보기 테마 설정
  const previewThemeForDevice = (device: DeviceType, themeId: UIThemeId) => {
    console.log('🎨 테마 미리보기 설정:', { device, themeId, currentDevice, currentThemeId });
    setPreviewSettings(prev => {
      const newSettings = {
        ...(prev || themeSettings),
        [device]: themeId,
      };
      console.log('🎨 새 미리보기 설정:', newSettings);
      return newSettings;
    });
  };

  // 테마 적용 (저장)
  const applyTheme = async () => {
    if (previewSettings) {
      setThemeSettings(previewSettings);
      
      if (currentUserId) {
        // 로그인 사용자: API에 저장
        const saved = await saveUIThemeSettingsToAPI(currentUserId, previewSettings);
        if (saved) {
          console.log('🎨 API에 테마 설정 저장 완료:', { userId: currentUserId, settings: previewSettings });
        } else {
          console.error('🎨 API 테마 설정 저장 실패, 로컬에 백업');
          // API 저장 실패 시 로컬에도 백업
          try {
            localStorage.setItem(`ui_theme_backup_${currentUserId}`, JSON.stringify(previewSettings));
          } catch (e) {
            console.error('로컬 백업 실패:', e);
          }
        }
      } else {
        // 비로그인 사용자: localStorage에 저장
        try {
          const storageKey = getLocalStorageKey();
          localStorage.setItem(storageKey, JSON.stringify(previewSettings));
          console.log('🎨 로컬에 테마 설정 저장:', { settings: previewSettings });
        } catch (e) {
          console.error('UI 테마 설정 로컬 저장 실패:', e);
        }
      }
      
      setPreviewSettings(null);
    }
  };

  // 미리보기 취소
  const cancelPreview = () => {
    setPreviewSettings(null);
  };

  // 특정 디바이스에서 사용 가능한 테마 목록
  const getAvailableThemes = (device: DeviceType): UIThemeInfo[] => {
    // PC는 'default' + PC 테마들
    if (device === 'pc') {
      return UI_THEMES.filter(t => t.deviceType === 'pc');
    }
    // 태블릿, 모바일은 해당 디바이스 테마만
    return UI_THEMES.filter(t => t.deviceType === device);
  };

  // 테마 정보 가져오기
  const getThemeInfo = (themeId: UIThemeId): UIThemeInfo | undefined => {
    return UI_THEMES.find(t => t.id === themeId);
  };

  return (
    <UIThemeContext.Provider
      value={{
        themeSettings: effectiveSettings,
        currentDevice,
        currentThemeId,
        currentThemeInfo,
        currentThemeStyle,
        previewThemeForDevice,
        applyTheme,
        cancelPreview,
        isPreviewing: previewSettings !== null,
        previewSettings,
        getAvailableThemes,
        getThemeInfo,
        currentUserId,
      }}
    >
      {children}
    </UIThemeContext.Provider>
  );
};

// Hook
export const useUITheme = (): UIThemeContextType => {
  const context = useContext(UIThemeContext);
  if (!context) {
    throw new Error('useUITheme must be used within a UIThemeProvider');
  }
  return context;
};

export default UIThemeContext;
