// src/renderer/App.tsx — 루트 컴포넌트
// 테마 시스템: auto(시스템) / dark / light. 기본은 auto → 다크.

import { useState, useEffect, useMemo } from 'react'
import { ThemeProvider, CssBaseline, useMediaQuery } from '@mui/material'
import { getTheme } from './theme'
import { AppLayout } from './components/AppLayout'
import type { ThemeMode } from '@shared/types'

export function App(): React.ReactElement {
  const [themeMode, setThemeMode] = useState<ThemeMode>('auto')
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')

  // 설정에서 테마 로드
  useEffect(() => {
    window.electronAPI.config.getTheme().then((result) => {
      if (result.success) {
        setThemeMode(result.data)
      }
    })
  }, [])

  const theme = useMemo(() => getTheme(themeMode, prefersDark), [themeMode, prefersDark])

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppLayout />
    </ThemeProvider>
  )
}