opsPage

import { Box, Button, Chip, Stack, Tab, Tabs, Typography } from '@mui/material';
import { HelpOutline } from '@mui/icons-material';
import { useMyProfile } from '../common/hooks/auth';
import { useState } from 'react';
import ClientsInProgress from '../clients/components/clientsInProgress';
import Content from '../common/components/context';
import Layout from '../common/components/layout';
import OpsDashboard from './opsDashboard';

export const tabsStyle = {
  mb: '-1px',
  '& .MuiTabs-indicator': { backgroundColor: 'secondary.main' },
  '& .MuiTab-root.Mui-selected': {
    color: 'secondary.main',
  },
};

export const mainHeaderStyle = {
  backgroundColor: 'background.default',
  borderRadius: '8px',
  border: '1px solid #E8EAF1',
  maxWidth: { lg: '1150px' },
};

const OpsPage = () => {
  const profile = useMyProfile();
  const [currentTab, setCurrentTab] = useState(0);

  if (!profile) return null;

  return (
    <Layout>
      <Content sx={mainHeaderStyle}>
        <Box marginY={2} display="flex" justifyContent="end">
          <Typography variant="h3" fontWeight={600} color="primary.main">
            Reintermediation
          </Typography>
        </Box>
        <Stack direction="row" justifyContent="space-between" alignItems="center">
          <Tabs
            sx={tabsStyle}
            variant="scrollable"
            scrollButtons="auto"
            allowScrollButtonsMobile
            value={currentTab}
            onChange={(_, newValue: number) => setCurrentTab(newValue)}
          >
            <Tab label="Dashboard" />
            <Tab label="To allocate" />
            <Tab label="Allocated" />
          </Tabs>
          {/* <Button variant="text" color="primary" startIcon={<HelpOutline />}>
            Help
          </Button> */}
        </Stack>
      </Content>
      <Box bgcolor="common.white" sx={{ flexGrow: 1 }} paddingY={4}>
        <Content>
          {currentTab === 0 && <OpsDashboard />}
          {currentTab === 1 && (
            <ClientsInProgress apiQueryFilters={{ isAllocated: 0, agentId: profile.id }} />
          )}
          {currentTab === 2 && (
            <ClientsInProgress apiQueryFilters={{ isAllocated: 1, agentId: profile.id }} />
          )}
        </Content>
      </Box>
    </Layout>
  );
};

export default OpsPage;