import { Add, Edit, Person, 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 {
  useChofereQuery,
  useDeleteChoferMutation,
} from "../../../tanstack/ChofereStack";
import { ChoferFormDialog } from "./ChoferFormDialog";

export const ChofereTab = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { data, isLoading } = useChofereQuery(1, 200);
  const deleteMutation = useDeleteChoferMutation();
  const ventasPerm = usePermission("VENTAS");
  const canCreate = ventasPerm.can("VEN_CHO_CHOFER_CREAR");
  const canEdit = ventasPerm.can("VEN_CHO_CHOFER_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.personas?.razon_social?.toLowerCase().includes(t) ||
        i.personas?.nro_documento?.includes(t) ||
        i.nro_libreta_conducir?.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 chofer..."
          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 Chofer
          </Button>
        )}
      </Box>

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
          <CircularProgress />
        </Box>
      ) : (
        <TableContainer component={Paper} variant="outlined">
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Nombre</TableCell>
                <TableCell>CI</TableCell>
                <TableCell>Libreta</TableCell>
                <TableCell>Categoría</TableCell>
                <TableCell>Vto. Licencia</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 choferes registrados
                  </TableCell>
                </TableRow>
              ) : (
                filtered.map((item) => {
                  const vto = item.fecha_vencimiento_licencia;
                  const vencido = vto && new Date(vto) < new Date();
                  return (
                    <TableRow key={item.id} hover>
                      <TableCell>{item.personas?.razon_social}</TableCell>
                      <TableCell>{item.personas?.nro_documento || "—"}</TableCell>
                      <TableCell>{item.nro_libreta_conducir || "—"}</TableCell>
                      <TableCell>
                        {item.categoria_licencia ? (
                          <Chip label={`Cat. ${item.categoria_licencia}`} size="small" variant="outlined" />
                        ) : "—"}
                      </TableCell>
                      <TableCell>
                        {vto ? (
                          <Chip
                            label={new Date(vto).toLocaleDateString("es-PY")}
                            size="small"
                            color={vencido ? "error" : "success"}
                          />
                        ) : "—"}
                      </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>
      )}

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