// React 17+ uses new JSX transform, no explicit React import needed
import { Provider } from 'react-redux'
import { ConfigProvider, App as AntdApp } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { store } from './store/store'
import RemoteControlApp from './components/RemoteControlApp'
import AuthGuard from './components/AuthGuard'
import './App.css'

/**
 * Ant Design theme token constants
 * Soft pink + sky blue dopamine palette
 */
const PRIMARY_COLOR = '#d4a0a8'
const BORDER_RADIUS = 12
const FONT_FAMILY = '"Google Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif'

const SURFACE_CONTAINER_LOWEST = '#ffffff'
const SURFACE_CONTAINER_LOW = '#f8f6f7'
const SURFACE_CONTAINER = '#f3f1f2'
const OUTLINE_VARIANT = '#d6cfd2'
const ON_SURFACE = '#2c2a2b'
const ON_SURFACE_VARIANT = '#6b6568'

/**
 * Main application component
 */
function App() {
	return (
		<Provider store={store}>
			<ConfigProvider
				locale={zhCN}
				theme={{
					token: {
						colorPrimary: PRIMARY_COLOR,
						borderRadius: BORDER_RADIUS,
						colorBgContainer: SURFACE_CONTAINER_LOWEST,
						colorBgLayout: SURFACE_CONTAINER,
						colorBorder: OUTLINE_VARIANT,
						colorText: ON_SURFACE,
						colorTextSecondary: ON_SURFACE_VARIANT,
						fontFamily: FONT_FAMILY,
					},
					components: {
						Table: {
							headerBg: SURFACE_CONTAINER_LOW,
							headerColor: ON_SURFACE_VARIANT,
							rowHoverBg: '#fce4ec',
							borderRadius: BORDER_RADIUS,
						},
						Card: {
							borderRadiusLG: 16,
						},
						Button: {
							borderRadius: 20,
						},
						Menu: {
							itemBorderRadius: BORDER_RADIUS,
							itemMarginInline: 8,
						},
						Modal: {
							borderRadiusLG: 20,
						},
						Input: {
							borderRadius: 8,
						},
						Select: {
							borderRadius: 8,
						},
						Tag: {
							borderRadiusSM: 20,
						},
						Notification: {
							borderRadiusLG: 16,
						},
					},
				}}
			>
				<AntdApp
					message={{ top: 24, maxCount: 3 }}
					notification={{ placement: 'topRight', top: 24 }}
				>
					<AuthGuard>
						<RemoteControlApp />
					</AuthGuard>
				</AntdApp>
			</ConfigProvider>
		</Provider>
	)
}

export default App
