import { Add, DirectionsCar, Edit, PowerSettingsNew, Search } from "@mui/icons-material";
import {
  Box, Button, Chip, CircularProgress, Fab, IconButton, InputAdornment,
  Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
  TextField, Tooltip, useMediaQuery, useTheme,
} from "@mui/material";
import { useMemo, useState } from "react";
import { usePermission } from "../../../hooks/usePermission";
import {
  useDeleteVehiculoMutation,
  useVehiculosQuery,
} from "../../../tanstack/VehiculosStack";
import { VehiculoFormDialog } from "./VehiculoFormDialog";

const TIPO_LABELS = {
  camion: "Camión", camioneta: "Camioneta", furgon: "Furgón",
  moto: "Moto", cisterna: "Cisterna", trailer: "Tráiler", otro: "Otro",
};

export const VehiculosTab = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { data, isLoading } = useVehiculosQuery(1, 200);
  const deleteMutation = useDeleteVehiculoMutation();
  const ventasPerm = usePermission("VENTAS");
  const canCreate = ventasPerm.can("VEN_VEH_VEHICULO_CREAR");
  const canEdit = ventasPerm.can("VEN_VEH_VEHICULO_EDITAR");

  const [dialogOpen, setDialogOpen] = useState(false);
  const [selected, setSelected] = useState(null);
  const [search, setSearch] = useState("");

  const items = data?.items || [];
  const filtered = useMemo(() => {
    if (!search) return items;
    const t = search.toLowerCase();
    return items.filter(
      (i) =>
        i.marca?.toLowerCase().includes(t) ||
        i.modelo?.toLowerCase().includes(t) ||
        i.nro_matricula?.toLowerCase().includes(t) ||
        i.transportistas?.personas?.razon_social?.toLowerCase().includes(t)
    );
  }, [items, search]);

  const handleCreate = () => { setSelected(null); setDialogOpen(true); };
  const handleEdit = (item) => { setSelected(item); setDialogOpen(true); };

  return (
    <Box sx={{ height: "100%" }}>
      <Box sx={{ display: "flex", gap: 2, mb: 2, alignItems: "center", flexWrap: "wrap" }}>
        <TextField
          size="small"
          placeholder="Buscar vehículo..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          InputProps={{ startAdornment: <InputAdornment position="start"><Search fontSize="small" /></InputAdornment> }}
          sx={{ minWidth: 240 }}
        />
        {!isMobile && canCreate && (
          <Button variant="contained" startIcon={<Add />} onClick={handleCreate}>
            Nuevo Vehículo
          </Button>
        )}
      </Box>

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
          <CircularProgress />
        </Box>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Marca / Modelo</TableCell>
                <TableCell>Tipo</TableCell>
                <TableCell>Matrícula</TableCell>
                <TableCell>Transportista</TableCell>
                <TableCell>Capacidad</TableCell>
                <TableCell>Estado</TableCell>
                {canEdit && <TableCell align="center">Acciones</TableCell>}
              </TableRow>
            </TableHead>
            <TableBody>
              {filtered.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} align="center" sx={{ py: 4, color: "text.secondary" }}>
                    No hay vehículos registrados
                  </TableCell>
                </TableRow>
              ) : (
                filtered.map((item) => (
                  <TableRow key={item.id} hover>
                    <TableCell>
                      <Box sx={{ fontWeight: 500 }}>{item.marca}</Box>
                      {item.modelo && <Box sx={{ fontSize: "0.8rem", color: "text.secondary" }}>{item.modelo} {item.anio && `(${item.anio})`}</Box>}
                    </TableCell>
                    <TableCell>
                      <Chip label={TIPO_LABELS[item.tipo_vehiculo] || item.tipo_vehiculo} size="small" variant="outlined" />
                    </TableCell>
                    <TableCell>{item.nro_matricula || item.nro_identificacion || "—"}</TableCell>
                    <TableCell>{item.transportistas?.personas?.razon_social || "—"}</TableCell>
                    <TableCell>{item.capacidad_carga_kg ? `${item.capacidad_carga_kg} kg` : "—"}</TableCell>
                    <TableCell>
                      <Chip label={item.activo ? "Activo" : "Inactivo"} size="small" color={item.activo ? "success" : "error"} />
                    </TableCell>
                    {canEdit && (
                      <TableCell align="center">
                        <Tooltip title="Editar">
                          <IconButton size="small" onClick={() => handleEdit(item)}>
                            <Edit fontSize="small" />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title={item.activo ? "Desactivar" : "Activar"}>
                          <IconButton
                            size="small"
                            color={item.activo ? "error" : "success"}
                            onClick={() => deleteMutation.mutate(item.id)}
                          >
                            <PowerSettingsNew fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      </TableCell>
                    )}
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {isMobile && canCreate && (
        <Fab color="primary" sx={{ position: "fixed", bottom: 80, right: 16 }} onClick={handleCreate}>
          <Add />
        </Fab>
      )}

      <VehiculoFormDialog
        open={dialogOpen}
        onClose={() => setDialogOpen(false)}
        vehiculo={selected}
      />
    </Box>
  );
};