import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  Box,
  Typography,
  Button,
  Paper,
  IconButton,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
} from '@mui/material';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { articoliService, lookupService } from '../services/lookupService';
import { Articolo } from '../types';

export default function ArticoliPage() {
  const queryClient = useQueryClient();
  const [openDialog, setOpenDialog] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [formData, setFormData] = useState<Partial<Articolo>>({ attivo: true });

  const { data: articoli = [], isLoading } = useQuery({
    queryKey: ['articoli'],
    queryFn: () => articoliService.getAll(),
  });

  const { data: tipiMateriale = [] } = useQuery({
    queryKey: ['lookup', 'tipi-materiale'],
    queryFn: () => lookupService.getTipiMateriale(),
  });

  const { data: categorie = [] } = useQuery({
    queryKey: ['lookup', 'categorie'],
    queryFn: () => lookupService.getCategorie(),
  });

  const createMutation = useMutation({
    mutationFn: (data: Partial<Articolo>) => articoliService.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['articoli'] });
      handleCloseDialog();
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<Articolo> }) => articoliService.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['articoli'] });
      handleCloseDialog();
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => articoliService.delete(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['articoli'] }),
  });

  const handleCloseDialog = () => {
    setOpenDialog(false);
    setEditingId(null);
    setFormData({ attivo: true });
  };

  const handleEdit = (articolo: Articolo) => {
    setFormData(articolo);
    setEditingId(articolo.id);
    setOpenDialog(true);
  };

  const handleSubmit = () => {
    if (editingId) {
      updateMutation.mutate({ id: editingId, data: formData });
    } else {
      createMutation.mutate(formData);
    }
  };

  const columns: GridColDef[] = [
    { field: 'codice', headerName: 'Codice', width: 100 },
    { field: 'descrizione', headerName: 'Descrizione', flex: 1, minWidth: 200 },
    {
      field: 'tipoMateriale',
      headerName: 'Tipo',
      width: 130,
      valueGetter: (value: any) => value?.descrizione || '',
    },
    {
      field: 'categoria',
      headerName: 'Categoria',
      width: 120,
      valueGetter: (value: any) => value?.descrizione || '',
    },
    { field: 'qtaDisponibile', headerName: 'Disponibile', width: 100, type: 'number' },
    { field: 'qtaStdA', headerName: 'Qta A', width: 80, type: 'number' },
    { field: 'qtaStdB', headerName: 'Qta B', width: 80, type: 'number' },
    { field: 'qtaStdS', headerName: 'Qta S', width: 80, type: 'number' },
    { field: 'unitaMisura', headerName: 'UM', width: 60 },
    {
      field: 'actions',
      headerName: 'Azioni',
      width: 120,
      sortable: false,
      renderCell: (params) => (
        <Box>
          <IconButton size="small" onClick={() => handleEdit(params.row)}>
            <EditIcon />
          </IconButton>
          <IconButton
            size="small"
            color="error"
            onClick={() => {
              if (confirm('Eliminare questo articolo?')) {
                deleteMutation.mutate(params.row.id);
              }
            }}
          >
            <DeleteIcon />
          </IconButton>
        </Box>
      ),
    },
  ];

  return (
    <Box>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
        <Typography variant="h4">Articoli</Typography>
        <Button variant="contained" startIcon={<AddIcon />} onClick={() => setOpenDialog(true)}>
          Nuovo Articolo
        </Button>
      </Box>

      <Paper sx={{ height: 600, width: '100%' }}>
        <DataGrid
          rows={articoli}
          columns={columns}
          loading={isLoading}
          pageSizeOptions={[10, 25, 50]}
          initialState={{
            pagination: { paginationModel: { pageSize: 25 } },
          }}
          disableRowSelectionOnClick
        />
      </Paper>

      <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="md" fullWidth>
        <DialogTitle>{editingId ? 'Modifica Articolo' : 'Nuovo Articolo'}</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} sx={{ mt: 1 }}>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Codice"
                fullWidth
                required
                value={formData.codice || ''}
                onChange={(e) => setFormData({ ...formData, codice: e.target.value })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 8 }}>
              <TextField
                label="Descrizione"
                fullWidth
                required
                value={formData.descrizione || ''}
                onChange={(e) => setFormData({ ...formData, descrizione: e.target.value })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 6 }}>
              <FormControl fullWidth>
                <InputLabel>Tipo Materiale</InputLabel>
                <Select
                  value={formData.tipoMaterialeId || ''}
                  label="Tipo Materiale"
                  onChange={(e) => setFormData({ ...formData, tipoMaterialeId: e.target.value as number })}
                >
                  {tipiMateriale.map((t) => (
                    <MenuItem key={t.id} value={t.id}>{t.descrizione}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 12, md: 6 }}>
              <FormControl fullWidth>
                <InputLabel>Categoria</InputLabel>
                <Select
                  value={formData.categoriaId || ''}
                  label="Categoria"
                  onChange={(e) => setFormData({ ...formData, categoriaId: e.target.value as number })}
                >
                  {categorie.map((c) => (
                    <MenuItem key={c.id} value={c.id}>{c.descrizione}</MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Quantità Disponibile"
                fullWidth
                type="number"
                value={formData.qtaDisponibile || ''}
                onChange={(e) => setFormData({ ...formData, qtaDisponibile: parseFloat(e.target.value) || undefined })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Unità Misura"
                fullWidth
                value={formData.unitaMisura || ''}
                onChange={(e) => setFormData({ ...formData, unitaMisura: e.target.value })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 4 }}></Grid>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Qta Std Adulti (A)"
                fullWidth
                type="number"
                value={formData.qtaStdA || ''}
                onChange={(e) => setFormData({ ...formData, qtaStdA: parseFloat(e.target.value) || undefined })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Qta Std Buffet (B)"
                fullWidth
                type="number"
                value={formData.qtaStdB || ''}
                onChange={(e) => setFormData({ ...formData, qtaStdB: parseFloat(e.target.value) || undefined })}
              />
            </Grid>
            <Grid size={{ xs: 12, md: 4 }}>
              <TextField
                label="Qta Std Seduti (S)"
                fullWidth
                type="number"
                value={formData.qtaStdS || ''}
                onChange={(e) => setFormData({ ...formData, qtaStdS: parseFloat(e.target.value) || undefined })}
              />
            </Grid>
            <Grid size={{ xs: 12 }}>
              <TextField
                label="Note"
                fullWidth
                multiline
                rows={3}
                value={formData.note || ''}
                onChange={(e) => setFormData({ ...formData, note: e.target.value })}
              />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseDialog}>Annulla</Button>
          <Button variant="contained" onClick={handleSubmit}>
            {editingId ? 'Salva' : 'Crea'}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
}