import {
  Container,
  Typography,
  Box,
  Button,
  IconButton,
  Tooltip,
} from '@mui/material';
import { Add, Logout } from '@mui/icons-material';
import { IdeasTable } from './components/IdeasTable';
import { IdeasFilters } from './components/IdeasFilters';
import { CreateIdeaModal } from './components/CreateIdeaModal';
import { useIdeasStore } from './store/ideas';
import keycloak from './services/keycloak';

function App() {
  const { setCreateModalOpen } = useIdeasStore();

  const handleLogout = () => {
    void keycloak.logout();
  };

  return (
    <Container maxWidth="xl" sx={{ py: 4 }}>
      <Box
        sx={{
          mb: 4,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Box>
          <Typography variant="h4" component="h1">
            Team Planner
          </Typography>
          <Typography variant="body1" color="text.secondary">
            Управление бэклогом идей команды
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Button
            variant="contained"
            startIcon={<Add />}
            onClick={() => setCreateModalOpen(true)}
          >
            Новая идея
          </Button>
          <Tooltip title="Выйти">
            <IconButton onClick={handleLogout} color="default">
              <Logout />
            </IconButton>
          </Tooltip>
        </Box>
      </Box>

      <Box sx={{ mb: 3 }}>
        <IdeasFilters />
      </Box>

      <IdeasTable />

      <CreateIdeaModal />
    </Container>
  );
}

export default App;
