import { Outlet, useNavigate, useLocation } from '@tanstack/react-router'
import { Box, Paper, Tabs, Tab, useTheme } from '@mui/material'
import { useState } from 'react'
import TopBar from './TopBar'
import Sidebar from './Sidebar'

export default function AppShell() {
  const theme = useTheme()
  const [collapsed, setCollapsed] = useState(false)
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
      <TopBar
        onCollapseClick={() => setCollapsed((p) => !p)}
        collapsed={collapsed}
      />
      <Sidebar collapsed={collapsed} />
      <Box
        component="main"
        sx={{
          flexGrow: 1,
          p: { xs: 2, md: 3 },
          mt: '64px',
          minWidth: 0,
          width: {
            md: `calc(100% - ${collapsed ? 72 : 240}px)`,
          },
          transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
          }),
        }}
      >
        <Paper
          elevation={0}
          sx={{
            display: { md: 'none' },
            mb: 2,
            borderRadius: 3,
            border: '1px solid',
            borderColor: 'divider',
            bgcolor: 'background.paper',
          }}
        >
          <Tabs
            value={location.pathname}
            onChange={(_e, path) => navigate({ to: path })}
            variant="scrollable"
            scrollButtons="auto"
            textColor="primary"
            indicatorColor="primary"
          >
            <Tab label="Campañas" value="/campaigns" />
            <Tab label="Sesiones" value="/sessions" />
            <Tab label="Archivos" value="/media" />
            <Tab label="Instancias" value="/instances" />
          </Tabs>
        </Paper>
        <Outlet />
      </Box>
    </Box>
  )
}