import {
    Table, TableBody, TableCell, TableContainer,
    TableHead, TableRow, Paper, Box,
    Dialog, DialogActions, DialogContent, DialogTitle,
    TextField, Button
  } from '@mui/material';
  import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
  import SearchIcon from '@mui/icons-material/Search';
  import EditIcon from '@mui/icons-material/Edit';
  import { useState } from 'react';
  
  
  //  Beispiel-Daten
  const exampleData = [
    { label: 'Fondsname', value: 'Fund Real Estate Prime Europe', page: 1, status: 'ok' },
    { label: 'Fondsmanager', value: '', page: 1, status: 'error' },
    { label: 'Risikoprofil', value: 'Core/Core+', page: 10, status: 'warning' },
    { label: 'LTV', value: '30-35 %', page: 8, status: 'ok' }
  ];
  
  // React-Komponente
  export default function KennzahlenTable() {
    // Zustand für bearbeitbare Daten
    const [rows, setRows] = useState(exampleData);
  
    // Zustände für Dialog-Funktion
    const [open, setOpen] = useState(false); // Dialog anzeigen?
    const [currentValue, setCurrentValue] = useState(''); // Eingabewert
    const [currentIndex, setCurrentIndex] = useState<number | null>(null); // Zeilenindex
  
    // Beim Klick auf das Stift-Icon: Dialog öffnen
    const handleEditClick = (value: string, index: number) => {
      setCurrentValue(value);
      setCurrentIndex(index);
      setOpen(true);
    };
  
    // Wert speichern und Dialog schließen
    const handleSave = () => {
      if (currentIndex !== null) {
        const updated = [...rows];
        updated[currentIndex].value = currentValue;
        setRows(updated);
      }
      setOpen(false);
    };
  
    return (
      <>
        <TableContainer component={Paper}>
          <Table>
            {/* Tabellenkopf */}
            <TableHead>
              <TableRow>
                <TableCell><strong>Kennzahl</strong></TableCell>
                <TableCell><strong>Wert</strong></TableCell>
                <TableCell><strong>Seite</strong></TableCell>
              </TableRow>
            </TableHead>
  
            {/* Tabelleninhalt */}
            <TableBody>
              {rows.map((row, index) => {
                // Rahmenfarbe anhand Status
                let borderColor = 'transparent';
                if (row.status === 'error') borderColor = 'red';
                else if (row.status === 'warning') borderColor = '#f6ed48';
  
                return (
                  <TableRow key={index}>
                    {/* Kennzahl */}
                    <TableCell>{row.label}</TableCell>
  
                    {/* Wert mit Status-Icons + Stift rechts */}
                    <TableCell>
                      <Box
                        sx={{
                          border: `2px solid ${borderColor}`,
                          borderRadius: 1,
                          padding: '4px 8px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-between',
                          width: '100%',
                        }}
                      >
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                          {row.status === 'error' && <ErrorOutlineIcon fontSize="small" color="error" />}
                          {row.status === 'warning' && <SearchIcon fontSize="small" sx={{ color: '#f6ed48' }} />}
                          <span>{row.value || '—'}</span>
                        </Box>
  
                        {/* Stift-Icon */}
                        <EditIcon
                          fontSize="small"
                          sx={{ color: '#555', cursor: 'pointer' }}
                          onClick={() => handleEditClick(row.value, index)}
                        />
                      </Box>
                    </TableCell>
  
                    {/* Seitenzahl */}
                    <TableCell>{row.page}</TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
  
        {/* Dialog zum Bearbeiten */}
        <Dialog open={open} onClose={() => setOpen(false)}>
          <DialogTitle>Kennzahl bearbeiten</DialogTitle>
          <DialogContent>
            <TextField
              fullWidth
              value={currentValue}
              onChange={(e) => setCurrentValue(e.target.value)}
              label="Neuer Wert"
              variant="outlined"
              margin="dense"
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setOpen(false)}>Abbrechen</Button>
            <Button onClick={handleSave} variant="contained">Speichern</Button>
          </DialogActions>
        </Dialog>
      </>
    );
  }