import React, { Component } from 'react';
import {
  Box,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  IconButton,
  Typography,
  Alert,
  CircularProgress,
  Checkbox,
  FormControlLabel,
} from '@mui/material';
import {
  Add as AddIcon,
  Edit as EditIcon,
  Delete as DeleteIcon,
} from '@mui/icons-material';
import AuthService from '../../services/AuthService';

class KreditorTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      kreditoren: [],
      loading: true,
      error: null,
      dialogOpen: false,
      editingKreditor: null,
      confirmDialogOpen: false,
      itemToDelete: null,
      formData: {
        iban: '',
        name: '',
        kreditorId: '',
        is_banking: false,
      },
    };
    this.authService = new AuthService();
    
    // Focus management refs
    this.triggerRef = React.createRef();
    this.dialogRef = React.createRef();
    this.confirmDialogRef = React.createRef();
  }

  componentDidMount() {
    this.loadKreditoren();
  }

  loadKreditoren = async () => {
    try {
      const response = await this.authService.apiCall('/admin/kreditoren');
      if (response && response.ok) {
        const data = await response.json();
        this.setState({ kreditoren: data.kreditoren, loading: false });
      } else {
        this.setState({ error: 'Fehler beim Laden der Kreditoren', loading: false });
      }
    } catch (error) {
      console.error('Error loading kreditoren:', error);
      this.setState({ error: 'Fehler beim Laden der Kreditoren', loading: false });
    }
  };

  handleOpenDialog = (kreditor = null) => {
    // Store reference to the trigger element for focus restoration
    this.triggerRef.current = document.activeElement;
    
    this.setState({
      dialogOpen: true,
      editingKreditor: kreditor,
      formData: kreditor ? {
        iban: kreditor.iban || '',
        name: kreditor.name,
        kreditorId: kreditor.kreditorId,
        is_banking: Boolean(kreditor.is_banking),
      } : {
        iban: '',
        name: '',
        kreditorId: '',
        is_banking: false,
      },
    });
  };

  handleCloseDialog = () => {
    this.setState({
      dialogOpen: false,
      editingKreditor: null,
      formData: {
        iban: '',
        name: '',
        kreditorId: '',
        is_banking: false,
      },
    });
    
    // Restore focus to the trigger element after dialog closes
    setTimeout(() => {
      if (this.triggerRef.current && this.triggerRef.current.focus) {
        this.triggerRef.current.focus();
      }
    }, 100);
  };

  handleInputChange = (field) => (event) => {
    this.setState({
      formData: {
        ...this.state.formData,
        [field]: event.target.value,
      },
    });
  };

  handleCheckboxChange = (field) => (event) => {
    this.setState({
      formData: {
        ...this.state.formData,
        [field]: event.target.checked,
      },
    });
  };

  isFormValid = () => {
    const { formData } = this.state;
    // Name and kreditorId are always required
    const basicFieldsValid = formData.name.trim() !== '' && formData.kreditorId.trim() !== '';
    
    // IBAN is optional for banking accounts, required for regular kreditors
    const ibanValid = formData.is_banking || formData.iban.trim() !== '';
    
    return basicFieldsValid && ibanValid;
  };

  handleSave = async () => {
    const { editingKreditor, formData } = this.state;
    
    try {
      const url = editingKreditor 
        ? `/admin/kreditoren/${editingKreditor.id}`
        : '/admin/kreditoren';
      
      const method = editingKreditor ? 'PUT' : 'POST';
      
      const response = await this.authService.apiCall(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response && response.ok) {
        this.handleCloseDialog();
        this.loadKreditoren();
      } else {
        const errorData = await response.json();
        this.setState({ error: errorData.error || 'Fehler beim Speichern' });
      }
    } catch (error) {
      console.error('Error saving kreditor:', error);
      this.setState({ error: 'Fehler beim Speichern des Kreditors' });
    }
  };

  handleDeleteClick = (kreditor) => {
    // Store reference to the trigger element for focus restoration
    this.triggerRef.current = document.activeElement;
    
    this.setState({
      confirmDialogOpen: true,
      itemToDelete: kreditor,
    });
  };

  handleDeleteConfirm = async () => {
    const { itemToDelete } = this.state;
    if (!itemToDelete) return;

    this.setState({ confirmDialogOpen: false, itemToDelete: null });
    
    // Restore focus to the trigger element after dialog closes
    setTimeout(() => {
      if (this.triggerRef.current && this.triggerRef.current.focus) {
        this.triggerRef.current.focus();
      }
    }, 100);

    try {
      const response = await this.authService.apiCall(`/admin/kreditoren/${kreditor.id}`, {
        method: 'DELETE',
      });

      if (response && response.ok) {
        this.loadKreditoren();
      } else {
        const errorData = await response.json();
        this.setState({ error: errorData.error || 'Fehler beim Löschen' });
      }
    } catch (error) {
      console.error('Error deleting kreditor:', error);
      this.setState({ error: 'Fehler beim Löschen des Kreditors' });
    }
  };

  handleDeleteCancel = () => {
    this.setState({
      confirmDialogOpen: false,
      itemToDelete: null,
    });
    
    // Restore focus to the trigger element after dialog closes
    setTimeout(() => {
      if (this.triggerRef.current && this.triggerRef.current.focus) {
        this.triggerRef.current.focus();
      }
    }, 100);
  };

  render() {
    const { kreditoren, loading, error, dialogOpen, editingKreditor, formData } = this.state;

    if (loading) {
      return (
        <Box display="flex" justifyContent="center" alignItems="center" minHeight="200px">
          <CircularProgress />
        </Box>
      );
    }

    return (
      <Box>
        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
          <Typography variant="h6">Kreditoren</Typography>
          <Button
            variant="contained"
            startIcon={<AddIcon />}
            onClick={() => this.handleOpenDialog()}
          >
            Neuer Kreditor
          </Button>
        </Box>

        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Kreditor ID</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>IBAN</TableCell>
                <TableCell>Typ</TableCell>
                <TableCell align="right">Aktionen</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {kreditoren.map((kreditor) => (
                <TableRow key={kreditor.id}>
                  <TableCell>{kreditor.kreditorId}</TableCell>
                  <TableCell>{kreditor.name}</TableCell>
                  <TableCell style={{ 
                    color: kreditor.is_banking ? '#ff5722' : 'inherit',
                    fontWeight: kreditor.is_banking ? 'bold' : 'normal'
                  }}>
                    {kreditor.iban || 'Keine IBAN'}
                  </TableCell>
                  <TableCell>
                    {kreditor.is_banking ? 
                      <span style={{ color: '#ff5722', fontWeight: 'bold' }}>Banking</span> : 
                      'Kreditor'
                    }
                  </TableCell>
                  <TableCell align="right">
                    <IconButton
                      size="small"
                      onClick={() => this.handleOpenDialog(kreditor)}
                    >
                      <EditIcon />
                    </IconButton>
                    <IconButton
                      size="small"
                                              onClick={() => this.handleDeleteClick(kreditor)}
                      color="error"
                    >
                      <DeleteIcon />
                    </IconButton>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        <Dialog 
          open={dialogOpen} 
          onClose={this.handleCloseDialog} 
          maxWidth="sm" 
          fullWidth
          ref={this.dialogRef}
          disableAutoFocus={false}
          disableEnforceFocus={false}
          disableRestoreFocus={true}
          aria-labelledby="kreditor-dialog-title"
          aria-describedby="kreditor-dialog-content"
        >
          <DialogTitle id="kreditor-dialog-title">
            {editingKreditor ? 'Kreditor bearbeiten' : 'Neuer Kreditor'}
          </DialogTitle>
          <DialogContent id="kreditor-dialog-content">
            <TextField
              autoFocus
              margin="dense"
              label="Kreditor ID"
              fullWidth
              variant="outlined"
              value={formData.kreditorId}
              onChange={this.handleInputChange('kreditorId')}
              sx={{ mb: 2 }}
            />
            <TextField
              margin="dense"
              label="Name"
              fullWidth
              variant="outlined"
              value={formData.name}
              onChange={this.handleInputChange('name')}
              sx={{ mb: 2 }}
            />
            <TextField
              margin="dense"
              label="IBAN"
              fullWidth
              variant="outlined"
              value={formData.iban}
              onChange={this.handleInputChange('iban')}
              helperText={formData.is_banking ? "IBAN ist optional für Banking-Konten" : ""}
              sx={{ mb: 2 }}
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={formData.is_banking}
                  onChange={this.handleCheckboxChange('is_banking')}
                  color="primary"
                />
              }
              label="Banking-Konto (z.B. PayPal) - benötigt manuelle Kreditor-Zuordnung"
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleCloseDialog}>Abbrechen</Button>
            <Button 
              onClick={this.handleSave} 
              variant="contained"
              disabled={!this.isFormValid()}
            >
              Speichern
            </Button>
          </DialogActions>
        </Dialog>

        {/* Confirmation Dialog */}
        <Dialog
          open={this.state.confirmDialogOpen}
          onClose={this.handleDeleteCancel}
          maxWidth="sm"
          fullWidth
          ref={this.confirmDialogRef}
          disableAutoFocus={false}
          disableEnforceFocus={false}
          disableRestoreFocus={true}
          aria-labelledby="kreditor-confirm-dialog-title"
          aria-describedby="kreditor-confirm-dialog-content"
        >
          <DialogTitle id="kreditor-confirm-dialog-title">Löschen bestätigen</DialogTitle>
          <DialogContent id="kreditor-confirm-dialog-content">
            <Typography>
              {this.state.itemToDelete && 
                `Kreditor "${this.state.itemToDelete.name}" wirklich löschen?`
              }
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleDeleteCancel}>
              Abbrechen
            </Button>
            <Button onClick={this.handleDeleteConfirm} color="error" variant="contained">
              Löschen
            </Button>
          </DialogActions>
        </Dialog>
      </Box>
    );
  }
}

export default KreditorTable;