import { Clear, FilterList } from "@mui/icons-material";
import {
    Box,
    Button,
    Card,
    CardContent,
    Chip,
    Collapse,
    FormControl,
    IconButton,
    InputLabel,
    MenuItem,
    Pagination,
    Select,
    Skeleton,
    TextField,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { DataGrid } from "@mui/x-data-grid";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { getMovimientos } from "../../api";
import { usePermission } from "../../hooks/usePermission";
import { useReferencialesQuery } from "../../tanstack/ReferencialesStack";
import { getErrorApi } from "../../utils/errorUtils";
import { AccesoRestringido } from "../common/AccesoRestringido";

const columns = [
  {
    field: "created_at",
    headerName: "Fecha",
    width: 130,
    valueFormatter: (value) => {
      if (!value) return "-";
      return value;
    },
  },
  {
    field: "producto",
    headerName: "Producto",
    width: 200,
    flex: 1,
    minWidth: 150,
    valueGetter: (value, row) =>
      row.producto?.descripcion || row.producto?.nombre || "-",
  },
  {
    field: "sucursal",
    headerName: "Sucursal",
    width: 150,
    valueGetter: (value, row) => row.deposito_origen?.sucursal?.nombre || "-",
  },
  {
    field: "deposito",
    headerName: "Depósito",
    width: 150,
    valueGetter: (value, row) => row.deposito_origen?.descripcion || "-",
  },
  {
    field: "tipo_movimiento",
    headerName: "Tipo",
    width: 160,
    renderCell: (params) => {
      const tipo = params.row.tipo_movimiento;
      if (!tipo) return "-";
      const color =
        tipo.afecta_stock > 0
          ? "success"
          : tipo.afecta_stock < 0
            ? "error"
            : "default";
      return <Chip label={tipo.descripcion} color={color} size="small" />;
    },
  },
  {
    field: "cantidad",
    headerName: "Cantidad",
    width: 110,
    type: "number",
    valueFormatter: (value) =>
      value ? Number(value).toLocaleString("es-PY") : "0",
  },
  {
    field: "documento_origen",
    headerName: "Documento",
    width: 130,
  },
  {
    field: "observaciones",
    headerName: "Observaciones",
    width: 200,
    flex: 1,
  },
];

export function MovimientosTab() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { can } = usePermission("INVENTARIO");
  const canRead = can("INV_MOV_MOVIMIENTO_VER");

  // Filtros
  const [showFilters, setShowFilters] = useState(false);
  const [tipoMovimientoId, setTipoMovimientoId] = useState("");
  const [fechaDesde, setFechaDesde] = useState("");
  const [fechaHasta, setFechaHasta] = useState("");

  // Paginación
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 25,
  });

  // Referenciales para tipos de movimiento
  const { data: referenciales } = useReferencialesQuery();
  const tiposMovimiento = referenciales?.tipo_movimiento_inventario || [];

  // Build query params
  const queryParams = {
    page: paginationModel.page + 1,
    limit: paginationModel.pageSize,
    ...(tipoMovimientoId && { tipo_movimiento_id: tipoMovimientoId }),
    ...(fechaDesde && { fecha_desde: new Date(fechaDesde).toISOString() }),
    ...(fechaHasta && {
      fecha_hasta: new Date(fechaHasta + "T23:59:59").toISOString(),
    }),
  };

  const {
    data: response,
    isLoading,
    error: movimientosError,
  } = useQuery({
    queryKey: ["movimientos-inventario-general", queryParams],
    queryFn: () => getMovimientos(queryParams),
  });

  const movimientos = response?.data || [];
  const totalRows = response?.total || 0;

  const hasActiveFilters = tipoMovimientoId || fechaDesde || fechaHasta;

  const handleClearFilters = () => {
    setTipoMovimientoId("");
    setFechaDesde("");
    setFechaHasta("");
    setPaginationModel({ ...paginationModel, page: 0 });
  };

  // Filter bar component (shared between mobile and desktop)
  const FilterBar = (
    <Collapse in={showFilters}>
      <Box
        sx={{
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          gap: 1.5,
          py: 1.5,
          flexWrap: "wrap",
          alignItems: { sm: "center" },
        }}
      >
        <FormControl size="small" sx={{ minWidth: { xs: "100%", sm: 180 } }}>
          <InputLabel>Tipo Movimiento</InputLabel>
          <Select
            value={tipoMovimientoId}
            label="Tipo Movimiento"
            onChange={(e) => {
              setTipoMovimientoId(e.target.value);
              setPaginationModel({ ...paginationModel, page: 0 });
            }}
          >
            <MenuItem value="">Todos</MenuItem>
            {tiposMovimiento.map((tipo) => (
              <MenuItem key={tipo.id} value={tipo.id}>
                {tipo.descripcion}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <TextField
          size="small"
          type="date"
          label="Desde"
          value={fechaDesde}
          onChange={(e) => {
            setFechaDesde(e.target.value);
            setPaginationModel({ ...paginationModel, page: 0 });
          }}
          InputLabelProps={{ shrink: true }}
          sx={{ minWidth: { xs: "100%", sm: 155 } }}
        />

        <TextField
          size="small"
          type="date"
          label="Hasta"
          value={fechaHasta}
          onChange={(e) => {
            setFechaHasta(e.target.value);
            setPaginationModel({ ...paginationModel, page: 0 });
          }}
          InputLabelProps={{ shrink: true }}
          sx={{ minWidth: { xs: "100%", sm: 155 } }}
        />

        {hasActiveFilters && (
          <Button
            size="small"
            onClick={handleClearFilters}
            startIcon={<Clear />}
            color="inherit"
          >
            Limpiar
          </Button>
        )}
      </Box>
    </Collapse>
  );

  const errorModulo = getErrorApi(movimientosError);

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver los movimientos de inventario." />
    );
  }

  if (errorModulo) {
    return (
      <AccesoRestringido titulo="Módulo no disponible" mensaje={errorModulo} />
    );
  }

  return (
    <Box
      sx={{
        height: "100%",
        width: "100%",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Toolbar */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 0.5,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Tooltip title={showFilters ? "Ocultar filtros" : "Mostrar filtros"}>
            <IconButton
              size="small"
              onClick={() => setShowFilters(!showFilters)}
              color={hasActiveFilters ? "primary" : "default"}
            >
              <FilterList />
            </IconButton>
          </Tooltip>
          {hasActiveFilters && (
            <Chip
              label={`${totalRows} resultado${totalRows !== 1 ? "s" : ""}`}
              size="small"
              color="primary"
              variant="outlined"
              sx={{ fontSize: "0.75rem" }}
            />
          )}
        </Box>
        <Typography variant="caption" color="text.secondary">
          {totalRows} movimiento{totalRows !== 1 ? "s" : ""}
        </Typography>
      </Box>

      {FilterBar}

      {/* Content */}
      {isMobile ? (
        <Box sx={{ flex: 1, overflow: "auto" }}>
          {isLoading ? (
            <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
              {[1, 2, 3, 4, 5].map((i) => (
                <Skeleton key={i} variant="rounded" height={80} />
              ))}
            </Box>
          ) : movimientos.length === 0 ? (
            <Box sx={{ textAlign: "center", py: 4 }}>
              <Typography color="text.secondary">
                {hasActiveFilters
                  ? "No se encontraron movimientos con los filtros aplicados"
                  : "No hay movimientos registrados"}
              </Typography>
            </Box>
          ) : (
            <>
              <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                {movimientos.map((mov) => {
                  const tipo = mov.tipo_movimiento;
                  const color =
                    tipo?.afecta_stock > 0
                      ? "success"
                      : tipo?.afecta_stock < 0
                        ? "error"
                        : "default";
                  return (
                    <Card
                      key={mov.id}
                      variant="outlined"
                      sx={{ borderRadius: 2 }}
                    >
                      <CardContent sx={{ p: 1.5, "&:last-child": { pb: 1.5 } }}>
                        <Box
                          sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "flex-start",
                            mb: 0.5,
                          }}
                        >
                          <Typography
                            variant="body2"
                            fontWeight={600}
                            noWrap
                            sx={{ flex: 1, minWidth: 0 }}
                          >
                            {mov.producto?.descripcion ||
                              mov.producto?.nombre ||
                              "-"}
                          </Typography>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{ ml: 1, whiteSpace: "nowrap" }}
                          >
                            {mov.created_at || "-"}
                          </Typography>
                        </Box>
                        <Box
                          sx={{
                            display: "flex",
                            gap: 1,
                            alignItems: "center",
                            flexWrap: "wrap",
                          }}
                        >
                          {tipo && (
                            <Chip
                              label={tipo.descripcion}
                              color={color}
                              size="small"
                              sx={{ fontSize: "0.65rem", height: 20 }}
                            />
                          )}
                          <Chip
                            label={`Cant: ${Number(mov.cantidad || 0).toLocaleString("es-PY")}`}
                            size="small"
                            variant="outlined"
                            sx={{ fontSize: "0.65rem", height: 20 }}
                          />
                          {mov.deposito_origen && (
                            <Typography
                              variant="caption"
                              color="text.secondary"
                            >
                              {mov.deposito_origen.descripcion}
                            </Typography>
                          )}
                        </Box>
                        {mov.documento_origen && (
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{ mt: 0.5, display: "block" }}
                          >
                            Doc: {mov.documento_origen}
                          </Typography>
                        )}
                        {mov.observaciones && (
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            noWrap
                            sx={{ mt: 0.25, display: "block" }}
                          >
                            {mov.observaciones}
                          </Typography>
                        )}
                      </CardContent>
                    </Card>
                  );
                })}
              </Box>
              {totalRows > 0 && (
                <Box sx={{ display: "flex", justifyContent: "center", py: 2 }}>
                  <Pagination
                    count={Math.ceil(totalRows / paginationModel.pageSize)}
                    page={paginationModel.page + 1}
                    onChange={(_, page) =>
                      setPaginationModel({ ...paginationModel, page: page - 1 })
                    }
                    size="small"
                    color="primary"
                  />
                </Box>
              )}
            </>
          )}
        </Box>
      ) : (
        <Box sx={{ flex: 1, minHeight: 0 }}>
          <DataGrid
            rows={movimientos}
            columns={columns}
            loading={isLoading}
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            pageSizeOptions={[10, 25, 50, 100]}
            rowCount={totalRows}
            paginationMode="server"
            disableRowSelectionOnClick
            sx={{
              border: "none",
              "& .MuiDataGrid-cell": {
                borderColor: "divider",
              },
              "& .MuiDataGrid-cell:focus": { outline: "none" },
              "& .MuiDataGrid-row:hover": { backgroundColor: "action.hover" },
              "& .MuiDataGrid-columnHeaders": {
                fontSize: "0.875rem",
                borderBottom: 1,
                borderColor: "divider",
              },
              "& .MuiDataGrid-footerContainer": {
                borderTop: 1,
                borderColor: "divider",
              },
            }}
          />
        </Box>
      )}
    </Box>
  );
}