import React, { Component } from 'react';
import {
  Box,
  Tabs,
  Tab,
  Paper,
  Typography,
} from '@mui/material';
import {
  AccountBalance as KreditorIcon,
  AccountBalanceWallet as KontoIcon,
  Receipt as BUIcon,
} from '@mui/icons-material';
import KreditorTable from './admin/KreditorTable';
import KontoTable from './admin/KontoTable';
import BUTable from './admin/BUTable';

class TableManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 0,
    };
  }

  handleTabChange = (event, newValue) => {
    this.setState({ activeTab: newValue });
  };

  render() {
    const { activeTab } = this.state;
    const { user } = this.props;

    return (
      <Box>
        <Typography variant="h4" component="h1" gutterBottom>
          Stammdaten verwalten
        </Typography>
        
        <Paper elevation={2}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs 
              value={activeTab} 
              onChange={this.handleTabChange}
              variant="fullWidth"
            >
              <Tab 
                icon={<KreditorIcon />} 
                label="Kreditoren" 
                sx={{ minHeight: 64 }}
              />
              <Tab 
                icon={<KontoIcon />} 
                label="Konten" 
                sx={{ minHeight: 64 }}
              />
              <Tab 
                icon={<BUIcon />} 
                label="Buchungsschlüssel" 
                sx={{ minHeight: 64 }}
              />
            </Tabs>
          </Box>

          <Box sx={{ p: 3 }}>
            {activeTab === 0 && <KreditorTable user={user} />}
            {activeTab === 1 && <KontoTable user={user} />}
            {activeTab === 2 && <BUTable user={user} />}
          </Box>
        </Paper>
      </Box>
    );
  }
}

export default TableManagement;