import React, { useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import TaskIcon from '@mui/icons-material/Task';
import FolderTreeIcon from '@mui/icons-material/AccountTree';
import { Trans, t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { MobileDeviceData, Task } from '../../types';

interface TasksTabProps {
  deviceData: MobileDeviceData;
  onDataChange: (updates: Partial<MobileDeviceData>) => void;
}

const TasksTab: React.FC<TasksTabProps> = ({
  deviceData,
  onDataChange,
}) => {
  const { i18n } = useLingui();
  const [selectedTasks, setSelectedTasks] = useState<Task[]>(deviceData.tasks || []);

  const handleRemoveTask = (taskId: number) => {
    const updatedTasks = selectedTasks.filter(task => task.agb_id !== taskId);
    setSelectedTasks(updatedTasks);
    onDataChange({ tasks: updatedTasks });
  };

  return (
    <Box>
      <Grid container spacing={3}>
            {/* Selected Tasks */}
            <Grid size={{ xs: 12, lg: 6 }}>
              <Box sx={{ mb: 2 }}>
                <Typography variant="h6" fontWeight={600} color="text.primary" sx={{ mb: 1 }}>
                  <i className="fas fa-check-circle" style={{ marginRight: '0.5rem' }} />
                  <Trans>Ausgewählte Aufgaben</Trans>
                </Typography>
              </Box>
              <TableContainer
                component={Paper}
                elevation={0}
                sx={{
                  border: '1px solid #e0e0e0',
                  borderRadius: '8px',
                  maxHeight: '400px',
                  overflowY: 'auto',
                }}
              >
                <Table size="small">
                  <TableBody>
                    {selectedTasks.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={2} align="center">
                          <Typography variant="body2" color="text.secondary" sx={{ py: 4 }}>
                            <Trans>Keine Aufgaben ausgewählt</Trans>
                          </Typography>
                        </TableCell>
                      </TableRow>
                    ) : (
                      selectedTasks.map((task) => (
                        <TableRow
                          key={task.agb_id}
                          sx={{
                            '&:hover': { backgroundColor: '#f8f9fa' },
                            transition: 'background-color 0.2s ease',
                          }}
                        >
                          <TableCell
                            title={task.agb_path.join('/')}
                            sx={{ width: '100%' }}
                          >
                            {task.agb_name}
                          </TableCell>
                          <TableCell align="right" sx={{ width: '50px' }}>
                            <IconButton
                              size="small"
                              onClick={() => handleRemoveTask(task.agb_id)}
                              sx={{
                                color: 'error.main',
                                '&:hover': {
                                  transform: 'scale(1.2)',
                                },
                                transition: 'transform 0.2s ease',
                              }}
                            >
                              <DeleteIcon fontSize="small" />
                            </IconButton>
                          </TableCell>
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </TableContainer>
            </Grid>

            {/* Available Tasks Tree */}
            <Grid size={{ xs: 12, lg: 6 }}>
              <Box sx={{ mb: 2 }}>
                <Typography variant="h6" fontWeight={600} color="text.primary" sx={{ mb: 1 }}>
                  <FolderTreeIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
                  <Trans>Verfügbare Aufgaben</Trans>
                </Typography>
              </Box>
              <Box
                id="agbTree"
                sx={{
                  border: '1px solid #e0e0e0',
                  borderRadius: '8px',
                  height: '400px',
                  overflowY: 'auto',
                  p: 2,
                  backgroundColor: '#fff',
                }}
              >
                <Typography variant="body2" color="text.secondary">
                  <Trans>
                    Doppelklicken Sie auf eine Aufgabe, um sie hinzuzufügen
                  </Trans>
                </Typography>
                {/* Tree will be rendered by jstree */}
              </Box>
            </Grid>
          </Grid>

          <Box sx={{ mt: 3, p: 2, backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
            <Typography variant="body2" color="text.secondary">
              <i className="fas fa-info-circle" style={{ marginRight: '0.5rem' }} />
              <Trans>
                Wählen Sie die Aufgaben aus, die auf diesem Gerät verfügbar sein sollen.
                Doppelklicken Sie auf eine Aufgabe im rechten Bereich, um sie zur Auswahl hinzuzufügen.
              </Trans>
            </Typography>
      </Box>
    </Box>
  );
};

export default TasksTab;