import { Icon } from "@iconify/react";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  FormControl,
  InputAdornment,
  InputLabel,
  LinearProgress,
  MenuItem,
  Pagination,
  Paper,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import api from "../api/api.config";
import { getDepositos } from "../api/depositos.service";
import { getSucursales } from "../api/sucursales.service";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { usePermission } from "../hooks/usePermission";
import { sanitizeCell } from "../components/_standards";
import { hoyISO } from "../utils/fecha";

// ==================== API ====================

const getReporteNiveles = async (params) => {
  const query = new URLSearchParams();
  if (params.page) query.set("page", String(params.page));
  if (params.limit) query.set("limit", String(params.limit));
  if (params.deposito_id) query.set("deposito_id", params.deposito_id);
  if (params.sucursal_id) query.set("sucursal_id", params.sucursal_id);
  if (params.search) query.set("search", params.search);
  const res = await api.get(`/stock/reporte/niveles?${query.toString()}`);
  return res.data;
};

// ==================== HELPERS ====================

const formatNum = (n) => new Intl.NumberFormat("es-PY").format(Number(n) || 0);

const getEstadoStock = (item) => {
  const disp = Number(item.cantidad_disponible || 0);
  const min = Number(item.stock_minimo || 0);
  const max = Number(item.stock_maximo || 0);

  if (disp <= 0) return { label: "Sin stock", color: "error", severity: 3 };
  if (min > 0 && disp <= min)
    return { label: "Bajo mínimo", color: "warning", severity: 2 };
  if (max > 0 && disp > max)
    return { label: "Sobre máximo", color: "info", severity: 1 };
  return { label: "OK", color: "success", severity: 0 };
};

const getNivelPorcentaje = (item) => {
  const disp = Number(item.cantidad_disponible || 0);
  const min = Number(item.stock_minimo || 0);
  const max = Number(item.stock_maximo || 0);

  if (max > 0) return Math.min(100, (disp / max) * 100);
  if (min > 0) return Math.min(100, (disp / (min * 3)) * 100);
  return disp > 0 ? 100 : 0;
};

const getBarColor = (estado) => {
  if (estado.severity === 3) return "error";
  if (estado.severity === 2) return "warning";
  if (estado.severity === 1) return "info";
  return "success";
};

// ==================== CSV EXPORT ====================

const exportCSV = (items) => {
  const headers = [
    "Producto",
    "Código",
    "Depósito",
    "Sucursal",
    "Disponible",
    "Reservado",
    "Stock Mín.",
    "Stock Máx.",
    "Estado",
    "Ubicación",
  ];
  const rows = items.map((s) => {
    const estado = getEstadoStock(s);
    return [
      s.producto?.descripcion || "",
      s.producto?.cod_producto || "",
      s.deposito?.descripcion || "",
      s.deposito?.sucursal?.descripcion || "",
      Number(s.cantidad_disponible || 0),
      Number(s.cantidad_reservada || 0),
      Number(s.stock_minimo || 0),
      Number(s.stock_maximo || 0),
      estado.label,
      s.ubicacion || "",
    ];
  });
  const csv = [headers.join(";"), ...rows.map((r) => r.map(sanitizeCell).join(";"))].join("\n");
  const BOM = "\uFEFF";
  const blob = new Blob([BOM + csv], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `niveles_stock_${hoyISO()}.csv`;
  a.click();
  URL.revokeObjectURL(url);
  toast.success("Reporte exportado correctamente");
};

// ==================== COMPONENT ====================

export function ReporteNivelesStock() {
  const navigate = useNavigate();
  const muiTheme = useTheme();
  const isMobile = useMediaQuery(muiTheme.breakpoints.down("md"));
  const { canRead } = usePermission("REPORTES");
  const canReadStock = usePermission("INVENTARIO").can("INV_STK_STOCK_VER");

  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [sucursalId, setSucursalId] = useState("");
  const [depositoId, setDepositoId] = useState("");
  const [estadoFilter, setEstadoFilter] = useState("todos");
  const [page, setPage] = useState(1);
  const limit = 20;

  const handleSearchChange = useCallback((e) => {
    setSearch(e.target.value);
    clearTimeout(window._nivelesSearchTimer);
    window._nivelesSearchTimer = setTimeout(() => {
      setSearchDebounced(e.target.value);
      setPage(1);
    }, 400);
  }, []);

  // Sucursales y depósitos
  const { data: sucursalesData } = useQuery({
    queryKey: ["sucursales-reporte-niveles"],
    queryFn: () => getSucursales(1, 100),
    staleTime: 5 * 60 * 1000,
  });
  const sucursales = sucursalesData?.data || sucursalesData || [];

  const { data: depositosData } = useQuery({
    queryKey: ["depositos-reporte-niveles", sucursalId],
    queryFn: () => getDepositos(sucursalId || undefined),
    staleTime: 5 * 60 * 1000,
  });
  const depositos = depositosData?.data || depositosData || [];

  // Query principal
  const { data: response, isLoading } = useQuery({
    queryKey: [
      "reporte-niveles-stock",
      page,
      searchDebounced,
      sucursalId,
      depositoId,
    ],
    queryFn: () =>
      getReporteNiveles({
        page,
        limit,
        deposito_id: depositoId || undefined,
        sucursal_id: sucursalId || undefined,
        search: searchDebounced || undefined,
      }),
  });

  const items = useMemo(() => response?.data || [], [response]);
  const totalItems = response?.total || 0;
  const totalPages = Math.max(1, Math.ceil(totalItems / limit));
  const kpis = response?.kpis || {};

  // Filtro de estado en frontend (el backend devuelve todos)
  const filteredItems = useMemo(() => {
    if (estadoFilter === "todos") return items;
    return items.filter((item) => {
      const estado = getEstadoStock(item);
      if (estadoFilter === "sin_stock") return estado.severity === 3;
      if (estadoFilter === "bajo_minimo") return estado.severity === 2;
      if (estadoFilter === "sobre_maximo") return estado.severity === 1;
      if (estadoFilter === "ok") return estado.severity === 0;
      return true;
    });
  }, [items, estadoFilter]);

  // Export
  const handleExport = async () => {
    try {
      const all = await getReporteNiveles({
        page: 1,
        limit: 10000,
        deposito_id: depositoId || undefined,
        sucursal_id: sucursalId || undefined,
        search: searchDebounced || undefined,
      });
      exportCSV(all?.data || []);
    } catch {
      toast.error("Error al exportar");
    }
  };

  if (!canRead || !canReadStock) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver este reporte." />
    );
  }

  return (
    <Box sx={{ maxWidth: 1400, mx: "auto", p: { xs: 2, md: 3 } }}>
      {/* ── Header ── */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          mb: 1,
          flexWrap: "wrap",
          gap: 1,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
          <Button
            size="small"
            onClick={() => navigate("/reportes")}
            sx={{ minWidth: 32, p: 0.5 }}
          >
            <Icon icon="lucide:arrow-left" width={20} />
          </Button>
          <Box>
            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
              <Icon icon="lucide:layers" width={22} />
              <Typography variant="h6" fontWeight={700}>
                Niveles de Stock
              </Typography>
            </Box>
            <Typography variant="caption" color="text.secondary">
              Estado actual del inventario por producto y depósito
            </Typography>
          </Box>
        </Box>
        <Button
          variant="outlined"
          size="small"
          startIcon={<Icon icon="lucide:download" width={16} />}
          onClick={handleExport}
        >
          Exportar
        </Button>
      </Box>

      <Typography
        variant="caption"
        color="text.secondary"
        sx={{ mb: 2, display: "block" }}
      >
        <span
          style={{ cursor: "pointer" }}
          onClick={() => navigate("/reportes")}
        >
          Reportes
        </span>
        {" > "}Niveles de Stock
      </Typography>

      {/* ── Filtros ── */}
      <Paper variant="outlined" sx={{ p: 2, mb: 2, borderRadius: 2 }}>
        <Box
          sx={{
            display: "flex",
            gap: 1.5,
            flexWrap: "wrap",
            alignItems: "center",
          }}
        >
          <TextField
            size="small"
            placeholder="Buscar por producto o código..."
            value={search}
            onChange={handleSearchChange}
            // Se estira y ocupa el espacio libre de la fila: los nombres de
            // producto son largos y el texto buscado tiene que leerse entero.
            sx={{ flex: "1 1 360px", minWidth: 0 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="lucide:search" width={16} />
                </InputAdornment>
              ),
            }}
          />
          <FormControl size="small" sx={{ minWidth: 150 }}>
            <InputLabel>Sucursal</InputLabel>
            <Select
              value={sucursalId}
              label="Sucursal"
              onChange={(e) => {
                setSucursalId(e.target.value);
                setDepositoId("");
                setPage(1);
              }}
            >
              <MenuItem value="">Todas</MenuItem>
              {sucursales.map((s) => (
                <MenuItem key={s.id} value={s.id}>
                  {s.nombre || s.descripcion}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 150 }}>
            <InputLabel>Depósito</InputLabel>
            <Select
              value={depositoId}
              label="Depósito"
              onChange={(e) => {
                setDepositoId(e.target.value);
                setPage(1);
              }}
            >
              <MenuItem value="">Todos</MenuItem>
              {depositos.map((d) => (
                <MenuItem key={d.id} value={d.id}>
                  {d.descripcion}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
          <FormControl size="small" sx={{ minWidth: 160 }}>
            <InputLabel>Estado</InputLabel>
            <Select
              value={estadoFilter}
              label="Estado"
              onChange={(e) => setEstadoFilter(e.target.value)}
            >
              <MenuItem value="todos">Todos</MenuItem>
              <MenuItem value="ok">OK</MenuItem>
              <MenuItem value="bajo_minimo">Bajo mínimo</MenuItem>
              <MenuItem value="sin_stock">Sin stock</MenuItem>
              <MenuItem value="sobre_maximo">Sobre máximo</MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Paper>

      {/* ── KPIs ── */}
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: {
            xs: "repeat(2, 1fr)",
            sm: "repeat(3, 1fr)",
            md: "repeat(5, 1fr)",
          },
          gap: 2,
          mb: 2,
        }}
      >
        {[
          {
            icon: "lucide:box",
            label: "Total Productos",
            value: formatNum(kpis.totalProductos || 0),
            color: "primary.main",
          },
          {
            icon: "lucide:check-circle",
            label: "OK",
            value: formatNum(kpis.ok || 0),
            color: "success.main",
          },
          {
            icon: "lucide:alert-triangle",
            label: "Bajo Mínimo",
            value: formatNum(kpis.bajoMinimo || 0),
            color: "warning.main",
          },
          {
            icon: "lucide:x-circle",
            label: "Sin Stock",
            value: formatNum(kpis.sinStock || 0),
            color: "error.main",
          },
          {
            icon: "lucide:package",
            label: "Unid. Disponibles",
            value: formatNum(kpis.totalDisponible || 0),
            color: "info.main",
          },
        ].map((kpi, i) => (
          <Card key={i} variant="outlined" sx={{ borderRadius: 2 }}>
            <CardContent
              sx={{
                p: "14px !important",
                display: "flex",
                alignItems: "center",
                gap: 1.5,
              }}
            >
              <Icon icon={kpi.icon} width={20} style={{ opacity: 0.6 }} />
              <Box>
                <Typography variant="caption" color="text.secondary">
                  {kpi.label}
                </Typography>
                <Typography variant="h6" fontWeight={700} color={kpi.color}>
                  {kpi.value}
                </Typography>
              </Box>
            </CardContent>
          </Card>
        ))}
      </Box>

      {/* ── Tabla ── */}
      {isLoading ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {[...Array(10)].map((_, i) => (
            <Skeleton key={i} variant="rounded" height={44} />
          ))}
        </Box>
      ) : filteredItems.length === 0 ? (
        <Paper
          variant="outlined"
          sx={{ p: 6, textAlign: "center", borderRadius: 2 }}
        >
          <Icon
            icon="lucide:package-x"
            width={48}
            style={{ opacity: 0.3, marginBottom: 12 }}
          />
          <Typography color="text.secondary">
            No se encontraron productos con los filtros aplicados
          </Typography>
        </Paper>
      ) : isMobile ? (
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {filteredItems.map((item) => {
            const estado = getEstadoStock(item);
            const pct = getNivelPorcentaje(item);
            return (
              <Card
                key={item.id}
                variant="outlined"
                sx={{ borderRadius: 2 }}
              >
                <CardContent sx={{ p: "12px !important" }}>
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "space-between",
                      mb: 0.5,
                    }}
                  >
                    <Typography variant="body2" fontWeight={600} noWrap>
                      {item.producto?.descripcion || "-"}
                    </Typography>
                    <Chip
                      label={estado.label}
                      color={estado.color}
                      size="small"
                      sx={{ fontSize: "0.68rem", height: 20 }}
                    />
                  </Box>
                  <Typography variant="caption" color="text.secondary">
                    {item.producto?.cod_producto || ""}{" "}
                    {item.deposito?.descripcion
                      ? `• ${item.deposito.descripcion}`
                      : ""}
                  </Typography>
                  <Box sx={{ mt: 1, mb: 0.5 }}>
                    <LinearProgress
                      variant="determinate"
                      value={pct}
                      color={getBarColor(estado)}
                      sx={{ height: 6, borderRadius: 3 }}
                    />
                  </Box>
                  <Box sx={{ display: "flex", gap: 2 }}>
                    <Typography variant="caption">
                      <strong>Disp:</strong>{" "}
                      {formatNum(item.cantidad_disponible)}
                    </Typography>
                    <Typography variant="caption">
                      <strong>Mín:</strong> {formatNum(item.stock_minimo)}
                    </Typography>
                    {item.stock_maximo && (
                      <Typography variant="caption">
                        <strong>Máx:</strong> {formatNum(item.stock_maximo)}
                      </Typography>
                    )}
                  </Box>
                </CardContent>
              </Card>
            );
          })}
        </Box>
      ) : (
        <TableContainer
          component={Paper}
          variant="outlined"
          sx={{ borderRadius: 2 }}
        >
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell sx={{ fontWeight: 600 }}>Producto</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Depósito</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Sucursal</TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">
                  Disponible
                </TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">
                  Reservado
                </TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">
                  Mín.
                </TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">
                  Máx.
                </TableCell>
                <TableCell sx={{ fontWeight: 600, width: 160 }}>
                  Nivel
                </TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Estado</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Ubicación</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredItems.map((item) => {
                const estado = getEstadoStock(item);
                const pct = getNivelPorcentaje(item);
                return (
                  <TableRow
                    key={item.id}
                    hover
                    sx={{ "&:last-child td": { borderBottom: 0 } }}
                  >
                    <TableCell>
                      <Typography variant="body2" fontWeight={500}>
                        {item.producto?.descripcion || "-"}
                      </Typography>
                      {item.producto?.cod_producto && (
                        <Typography variant="caption" color="text.secondary">
                          {item.producto.cod_producto}
                        </Typography>
                      )}
                    </TableCell>
                    <TableCell>{item.deposito?.descripcion || "-"}</TableCell>
                    <TableCell>
                      {item.deposito?.sucursal?.descripcion || "-"}
                    </TableCell>
                    <TableCell align="right">
                      <Typography variant="body2" fontWeight={600}>
                        {formatNum(item.cantidad_disponible)}
                      </Typography>
                    </TableCell>
                    <TableCell align="right">
                      {formatNum(item.cantidad_reservada)}
                    </TableCell>
                    <TableCell align="right">
                      <Typography
                        variant="body2"
                        color={
                          Number(item.stock_minimo) > 0
                            ? "text.primary"
                            : "text.disabled"
                        }
                      >
                        {Number(item.stock_minimo)
                          ? formatNum(item.stock_minimo)
                          : "-"}
                      </Typography>
                    </TableCell>
                    <TableCell align="right">
                      <Typography
                        variant="body2"
                        color={
                          Number(item.stock_maximo)
                            ? "text.primary"
                            : "text.disabled"
                        }
                      >
                        {Number(item.stock_maximo)
                          ? formatNum(item.stock_maximo)
                          : "-"}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Tooltip
                        title={`${Math.round(pct)}%`}
                        placement="top"
                      >
                        <LinearProgress
                          variant="determinate"
                          value={pct}
                          color={getBarColor(estado)}
                          sx={{ height: 8, borderRadius: 4, minWidth: 100 }}
                        />
                      </Tooltip>
                    </TableCell>
                    <TableCell>
                      <Chip
                        label={estado.label}
                        color={estado.color}
                        size="small"
                        sx={{ fontSize: "0.75rem" }}
                      />
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2" color="text.secondary">
                        {item.ubicacion || "-"}
                      </Typography>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      {/* ── Paginación ── */}
      {totalItems > 0 && (
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            mt: 2,
            flexWrap: "wrap",
            gap: 1,
          }}
        >
          <Typography variant="caption" color="text.secondary">
            Mostrando {(page - 1) * limit + 1}-
            {Math.min(page * limit, totalItems)} de {totalItems}
          </Typography>
          <Pagination
            count={totalPages}
            page={page}
            onChange={(_, p) => setPage(p)}
            size="small"
            color="primary"
          />
        </Box>
      )}
    </Box>
  );
}