import { useState } from 'react';
import {
  Container,
  Typography,
  Box,
  Button,
  IconButton,
  Tooltip,
  Chip,
  Avatar,
  Tabs,
  Tab,
} from '@mui/material';
import { Add, Logout, Person, Lightbulb, Group } from '@mui/icons-material';
import { IdeasTable } from './components/IdeasTable';
import { IdeasFilters } from './components/IdeasFilters';
import { CreateIdeaModal } from './components/CreateIdeaModal';
import { TeamPage } from './components/TeamPage';
import { useIdeasStore } from './store/ideas';
import { useAuth } from './hooks/useAuth';

function App() {
  const { setCreateModalOpen } = useIdeasStore();
  const { user, logout } = useAuth();
  const [tab, setTab] = useState(0);

  return (
    <Container maxWidth="xl" sx={{ py: 4 }}>
      {/* Header */}
      <Box
        sx={{
          mb: 3,
          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 }}>
          <Chip
            avatar={
              <Avatar sx={{ bgcolor: 'primary.main' }}>
                <Person sx={{ fontSize: 16 }} />
              </Avatar>
            }
            label={user?.name ?? 'Пользователь'}
            variant="outlined"
          />
          <Tooltip title="Выйти">
            <IconButton onClick={logout} color="default" size="small">
              <Logout />
            </IconButton>
          </Tooltip>
        </Box>
      </Box>

      {/* Tabs */}
      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
        <Tabs value={tab} onChange={(_, v: number) => setTab(v)}>
          <Tab icon={<Lightbulb />} iconPosition="start" label="Идеи" />
          <Tab icon={<Group />} iconPosition="start" label="Команда" />
        </Tabs>
      </Box>

      {/* Content */}
      {tab === 0 && (
        <>
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              mb: 2,
            }}
          >
            <IdeasFilters />
            <Button
              variant="contained"
              startIcon={<Add />}
              onClick={() => setCreateModalOpen(true)}
            >
              Новая идея
            </Button>
          </Box>
          <IdeasTable />
          <CreateIdeaModal />
        </>
      )}

      {tab === 1 && <TeamPage />}
    </Container>
  );
}

export default App;