import React, { useState } from 'react';
import { Box, Tabs, Tab } from '@mui/material';
import { ClientsOverview } from '../clients/ClientsOverview';
import { UserManagement } from './UserManagement';
import { LoginHistory } from './LoginHistory';
import { Allocation } from './Allocation';
import { AuditHistory } from './AuditHistory';
import { DevTickets } from './DevTickets';
import { MissingMedia } from './MissingMedia';

export const AdminConsole: React.FC = () => {
  const [tab, setTab] = useState(0);

  return (
    // MainLayout's <main> is height:100vh + overflow:hidden (by design, so other
    // pages can own their own internal scroll regions - see AnomalyTable.tsx/
    // GlobalFeed.tsx for the same pattern). This tab's content (filters + large
    // tables) can exceed the viewport, so it needs its own bounded, scrollable
    // container rather than relying on the page ever growing taller than 100vh.
    <Box sx={{ p: 3, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
      <Tabs value={tab} onChange={(_, value) => setTab(value)} sx={{ mb: 3 }}>
        <Tab label="Clients" />
        <Tab label="Users" />
        <Tab label="Login History" />
        <Tab label="Allocation" />
        <Tab label="Audit & Rectification History" />
        <Tab label="Dev Tickets" />
        <Tab label="Missing Media" />
      </Tabs>

      {tab === 0 && <ClientsOverview />}
      {tab === 1 && <UserManagement />}
      {tab === 2 && <LoginHistory />}
      {tab === 3 && <Allocation />}
      {tab === 4 && <AuditHistory />}
      {tab === 5 && <DevTickets />}
      {tab === 6 && <MissingMedia />}
    </Box>
  );
};