import { Container, Typography, Box, AppBar, Toolbar, Button, Stack } from '@mui/material'
import { Routes, Route, Link } from 'react-router-dom'
import { useAppStore } from './stores/appStore'
import RegistryImageList from './pages/RegistryImageList'
import K8sResourceList from './pages/K8sResourceList'

function App() {
  const { count, increment, decrement, reset } = useAppStore()

  return (
    <Box sx={{ flexGrow: 1, minHeight: '100vh' }}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            Cluster
          </Typography>
          <Button color="inherit" component={Link} to="/">首页</Button>
          <Button color="inherit" component={Link} to="/registry/image">镜像列表</Button>
          <Button color="inherit" component={Link} to="/k8s/resources">集群资源</Button>
        </Toolbar>
      </AppBar>
      <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
        <Routes>
          <Route path="/registry/image" element={<RegistryImageList />} />
          <Route path="/k8s/resources" element={<K8sResourceList />} />
          <Route path="/" element={
            <Box>
              <Typography variant="h4" component="h1" gutterBottom>
                欢迎使用 Cluster
              </Typography>
              <Box sx={{ mt: 4 }}>
                <Typography variant="h6" gutterBottom>
                  Zustand 状态管理示例
                </Typography>
                <Stack direction="row" spacing={2} alignItems="center" justifyContent="center" sx={{ mt: 2 }}>
                  <Button variant="contained" onClick={decrement}>
                    -
                  </Button>
                  <Typography variant="h5" sx={{ minWidth: 60 }}>
                    {count}
                  </Typography>
                  <Button variant="contained" onClick={increment}>
                    +
                  </Button>
                  <Button variant="outlined" onClick={reset} sx={{ ml: 2 }}>
                    重置
                  </Button>
                </Stack>
              </Box>
            </Box>
          } />
        </Routes>
      </Container>
    </Box>
  )
}

export default App