import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Box,
  Chip,
  Collapse,
  FormControl,
  Grid,
  IconButton,
  InputAdornment,
  InputLabel,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  Pagination,
  Paper,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useQuery } from "@tanstack/react-query";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { useEffect, useMemo, useState } from "react";
import { getPedidos } from "../../api/pedidos.service";
import { usePermission } from "../../hooks/usePermission";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { formatMoney } from "../../utils/formatMoney";
import { PedidoDetalleDialog } from "./PedidoDetalleDialog";

dayjs.locale("es");

const ESTADOS = [
  { value: "", label: "Todos los estados" },
  { value: "borrador", label: "Borrador", color: "default" },
  { value: "confirmado", label: "Confirmado", color: "success" },
  { value: "facturado", label: "Facturado", color: "info" },
  { value: "cancelado", label: "Cancelado", color: "error" },
];

const FILTROS_RAPIDOS = [
  { label: "Hoy", value: "hoy" },
  { label: "Ayer", value: "ayer" },
  { label: "Esta semana", value: "semana" },
  { label: "Este mes", value: "mes" },
  { label: "Mes anterior", value: "mes_anterior" },
];

const COLUMNAS_DISPONIBLES = [
  { id: "numero", label: "Nro. Pedido", default: true },
  { id: "fecha", label: "Fecha", default: true },
  { id: "cliente", label: "Cliente", default: true },
  { id: "vendedor", label: "Vendedor", default: false },
  { id: "items", label: "Items", default: true },
  { id: "total", label: "Total", default: true },
  { id: "estado", label: "Estado", default: true },
  { id: "fecha_vencimiento", label: "Vencimiento", default: false },
  { id: "creador", label: "Creado por", default: false },
  { id: "acciones", label: "Acciones", default: true },
];

const COLUMNAS_DEFAULT = COLUMNAS_DISPONIBLES.filter((c) => c.default).map(
  (c) => c.id,
);

const ESTADO_COLOR = {
  borrador: "default",
  confirmado: "success",
  facturado: "info",
  cancelado: "error",
};

export function PedidosTab() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const { can } = usePermission("VENTAS");
  const canRead = can("VEN_PED_PEDIDO_VER");

  // Filtros
  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [estado, setEstado] = useState("");
  const [fechaDesde, setFechaDesde] = useState(dayjs().startOf("week"));
  const [fechaHasta, setFechaHasta] = useState(dayjs().endOf("day"));
  const [filtroRapido, setFiltroRapido] = useState("semana");
  const [showFilters, setShowFilters] = useState(false);
  const [page, setPage] = useState(1);
  const [limit] = useState(20);

  // Columnas
  const [columnasVisibles, setColumnasVisibles] = useState(COLUMNAS_DEFAULT);
  const [columnMenuAnchor, setColumnMenuAnchor] = useState(null);

  // Detalle
  const [pedidoDetalle, setPedidoDetalle] = useState(null);

  // Debounce search
  useEffect(() => {
    const timer = setTimeout(() => {
      setSearchDebounced(search);
      setPage(1);
    }, 500);
    return () => clearTimeout(timer);
  }, [search]);

  const toggleColumna = (columnaId) => {
    setColumnasVisibles((prev) =>
      prev.includes(columnaId)
        ? prev.filter((c) => c !== columnaId)
        : [...prev, columnaId],
    );
  };

  const isColumnaVisible = (id) => columnasVisibles.includes(id);

  // Filtros rápidos de fecha
  const aplicarFiltroRapido = (filtro) => {
    const hoy = dayjs();
    setFiltroRapido(filtro);
    setPage(1);
    switch (filtro) {
      case "hoy":
        setFechaDesde(hoy.startOf("day"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "ayer":
        setFechaDesde(hoy.subtract(1, "day").startOf("day"));
        setFechaHasta(hoy.subtract(1, "day").endOf("day"));
        break;
      case "semana":
        setFechaDesde(hoy.startOf("week"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "mes":
        setFechaDesde(hoy.startOf("month"));
        setFechaHasta(hoy.endOf("day"));
        break;
      case "mes_anterior":
        setFechaDesde(hoy.subtract(1, "month").startOf("month"));
        setFechaHasta(hoy.subtract(1, "month").endOf("month"));
        break;
      default:
        break;
    }
  };

  const limpiarFiltros = () => {
    setSearch("");
    setSearchDebounced("");
    setEstado("");
    setFechaDesde(null);
    setFechaHasta(null);
    setFiltroRapido("");
    setPage(1);
  };

  const hayFiltrosActivos = !!(searchDebounced || estado || fechaDesde || fechaHasta);

  // Query
  const queryParams = useMemo(
    () => ({
      page,
      limit,
      search: searchDebounced || undefined,
      estado: estado || undefined,
      fecha_desde: fechaDesde ? fechaDesde.format("YYYY-MM-DD") : undefined,
      fecha_hasta: fechaHasta ? fechaHasta.format("YYYY-MM-DD") : undefined,
    }),
    [page, limit, searchDebounced, estado, fechaDesde, fechaHasta],
  );

  const {
    data: pedidosData,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["pedidos-tab", queryParams],
    queryFn: () => getPedidos(queryParams),
    keepPreviousData: true,
  });

  const pedidos = pedidosData?.dataFormat || pedidosData?.data || [];
  const pagination = pedidosData?.pagination || {};
  const totalPages = pagination.totalPages || 1;

  // Resumen
  const resumen = useMemo(() => {
    const all = pedidos || [];
    return {
      total: pagination.total || all.length,
      borradores: all.filter((p) => p.estado === "borrador").length,
      confirmados: all.filter((p) => p.estado === "confirmado").length,
      facturados: all.filter((p) => p.estado === "facturado").length,
      cancelados: all.filter((p) => p.estado === "cancelado").length,
    };
  }, [pedidos, pagination]);

  if (!canRead) {
    return <AccesoRestringido modulo="VENTAS_PEDIDOS" />;
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
      <Box>
        {/* Filtros rápidos + búsqueda */}
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: 1,
            mb: 2,
            alignItems: "center",
          }}
        >
          <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap", order: { xs: 2, sm: 1 } }}>
            {FILTROS_RAPIDOS.map((f) => (
              <Chip
                key={f.value}
                label={f.label}
                size="small"
                variant={filtroRapido === f.value ? "filled" : "outlined"}
                color={filtroRapido === f.value ? "primary" : "default"}
                onClick={() => aplicarFiltroRapido(f.value)}
              />
            ))}
            {hayFiltrosActivos && (
              <Chip
                label="Limpiar filtros"
                size="small"
                color="error"
                variant="outlined"
                onDelete={limpiarFiltros}
                onClick={limpiarFiltros}
              />
            )}
          </Box>

          <TextField
            size="small"
            placeholder="Buscar por número, cliente..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            sx={{ minWidth: { xs: "100%", sm: 200 }, order: { xs: 1, sm: 2 }, flex: { sm: 1 }, maxWidth: 300 }}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="mdi:magnify" width={20} />
                </InputAdornment>
              ),
              ...(search && {
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton size="small" onClick={() => setSearch("")}>
                      <Icon icon="mdi:close" width={16} />
                    </IconButton>
                  </InputAdornment>
                ),
              }),
            }}
          />

          <Box sx={{ display: "flex", gap: 0.5, order: 3, ml: "auto" }}>
            <Tooltip title={showFilters ? "Ocultar filtros" : "Más filtros"}>
              <Chip
                icon={<Icon icon="mdi:filter-variant" width={16} />}
                label={`Filtros${hayFiltrosActivos ? ` (${[searchDebounced, estado, fechaDesde, fechaHasta].filter(Boolean).length})` : ""}`}
                size="small"
                variant={showFilters ? "filled" : "outlined"}
                color={hayFiltrosActivos ? "primary" : "default"}
                onClick={() => setShowFilters((v) => !v)}
              />
            </Tooltip>
            <Tooltip title="Refrescar">
              <IconButton size="small" onClick={() => refetch()}>
                <Icon icon="mdi:refresh" width={20} />
              </IconButton>
            </Tooltip>
            <Tooltip title="Columnas">
              <IconButton size="small" onClick={(e) => setColumnMenuAnchor(e.currentTarget)}>
                <Icon icon="mdi:view-column" width={20} />
              </IconButton>
            </Tooltip>
          </Box>
        </Box>

        {/* Panel de filtros avanzados */}
        <Collapse in={showFilters}>
          <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
            <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", alignItems: "center" }}>
              <DatePicker
                label="Desde"
                value={fechaDesde}
                onChange={(v) => { setFechaDesde(v); setFiltroRapido(""); setPage(1); }}
                slotProps={{ textField: { size: "small", sx: { minWidth: 150 } } }}
              />
              <DatePicker
                label="Hasta"
                value={fechaHasta}
                onChange={(v) => { setFechaHasta(v); setFiltroRapido(""); setPage(1); }}
                slotProps={{ textField: { size: "small", sx: { minWidth: 150 } } }}
              />
              <FormControl
                sx={{ flex: 1, minWidth: { xs: "100%", sm: 180 } }}
                size="small"
              >
                <InputLabel>Estado</InputLabel>
                <Select
                  value={estado}
                  label="Estado"
                  onChange={(e) => { setEstado(e.target.value); setPage(1); }}
                >
                  {ESTADOS.map((e) => (
                    <MenuItem key={e.value} value={e.value}>
                      {e.label}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
              <Chip
                label="Limpiar todo"
                variant="outlined"
                color="error"
                size="small"
                onClick={limpiarFiltros}
                onDelete={limpiarFiltros}
              />
            </Box>
          </Paper>
        </Collapse>

        {/* Resumen */}
        <Grid container spacing={1} sx={{ mb: 2 }}>
          {[
            { label: "Total", value: resumen.total, icon: "mdi:clipboard-list", color: "#64748b" },
            { label: "Borradores", value: resumen.borradores, icon: "mdi:pencil", color: "#f59e0b" },
            { label: "Confirmados", value: resumen.confirmados, icon: "mdi:check-circle", color: "#10b981" },
            { label: "Facturados", value: resumen.facturados, icon: "mdi:receipt", color: "#3b82f6" },
            { label: "Cancelados", value: resumen.cancelados, icon: "mdi:cancel", color: "#ef4444" },
          ].map((item) => (
            <Grid item xs={6} sm key={item.label}>
              <Paper
                variant="outlined"
                sx={{ p: 1.5, display: "flex", alignItems: "center", gap: 1 }}
              >
                <Icon icon={item.icon} width={22} color={item.color} />
                <Box>
                  <Typography variant="caption" color="text.secondary">
                    {item.label}
                  </Typography>
                  <Typography variant="h6" fontWeight={700} lineHeight={1}>
                    {item.value}
                  </Typography>
                </Box>
              </Paper>
            </Grid>
          ))}
        </Grid>

        {/* Tabla */}
        {isLoading ? (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {[...Array(5)].map((_, i) => (
              <Skeleton key={i} variant="rounded" height={48} />
            ))}
          </Box>
        ) : pedidos.length === 0 ? (
          <Box sx={{ py: 8, textAlign: "center" }}>
            <Icon icon="mdi:clipboard-text-off" width={56} style={{ opacity: 0.3 }} />
            <Typography color="text.secondary" sx={{ mt: 2 }}>
              No se encontraron pedidos
            </Typography>
            {hayFiltrosActivos && (
              <Chip
                label="Limpiar filtros"
                color="primary"
                variant="outlined"
                size="small"
                sx={{ mt: 1 }}
                onClick={limpiarFiltros}
              />
            )}
          </Box>
        ) : isMobile ? (
          /* Vista móvil: tarjetas */
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {pedidos.map((pedido) => (
              <Paper
                key={pedido.id}
                variant="outlined"
                sx={{ p: 1.5, cursor: "pointer", "&:hover": { borderColor: "primary.main" } }}
                onClick={() => setPedidoDetalle(pedido)}
              >
                <Box sx={{ display: "flex", justifyContent: "space-between", mb: 0.5 }}>
                  <Typography variant="body2" fontWeight={600} fontFamily="monospace">
                    {pedido.numero_pedido || "Borrador"}
                  </Typography>
                  <Chip
                    label={pedido.estado}
                    size="small"
                    color={ESTADO_COLOR[pedido.estado] || "default"}
                    sx={{ textTransform: "capitalize", fontWeight: 600 }}
                  />
                </Box>
                <Typography variant="body2" color="text.secondary" noWrap>
                  {pedido.cliente?.personas?.razon_social || pedido.cliente?.nombre_fantasia || "-"}
                </Typography>
                <Box sx={{ display: "flex", justifyContent: "space-between", mt: 0.5 }}>
                  <Typography variant="caption" color="text.secondary">
                    {pedido.fecha_pedido ? dayjs(pedido.fecha_pedido).format("DD/MM/YY HH:mm") : "-"}
                  </Typography>
                  <Typography variant="body2" fontWeight={700}>
                    {formatMoney(pedido.total, pedido.moneda?.codigo)}
                  </Typography>
                </Box>
              </Paper>
            ))}
          </Box>
        ) : (
          /* Vista desktop: tabla */
          <TableContainer component={Paper} variant="outlined">
            <Table size="small">
              <TableHead>
                <TableRow>
                  {isColumnaVisible("numero") && (
                    <TableCell sx={{ fontWeight: 600 }}>Nro. Pedido</TableCell>
                  )}
                  {isColumnaVisible("fecha") && (
                    <TableCell sx={{ fontWeight: 600 }}>Fecha</TableCell>
                  )}
                  {isColumnaVisible("cliente") && (
                    <TableCell sx={{ fontWeight: 600 }}>Cliente</TableCell>
                  )}
                  {isColumnaVisible("vendedor") && (
                    <TableCell sx={{ fontWeight: 600 }}>Vendedor</TableCell>
                  )}
                  {isColumnaVisible("items") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">Items</TableCell>
                  )}
                  {isColumnaVisible("total") && (
                    <TableCell sx={{ fontWeight: 600 }} align="right">Total</TableCell>
                  )}
                  {isColumnaVisible("estado") && (
                    <TableCell sx={{ fontWeight: 600 }}>Estado</TableCell>
                  )}
                  {isColumnaVisible("fecha_vencimiento") && (
                    <TableCell sx={{ fontWeight: 600 }}>Vencimiento</TableCell>
                  )}
                  {isColumnaVisible("creador") && (
                    <TableCell sx={{ fontWeight: 600 }}>Creado por</TableCell>
                  )}
                  {isColumnaVisible("acciones") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">Acciones</TableCell>
                  )}
                </TableRow>
              </TableHead>
              <TableBody>
                {pedidos.map((pedido) => {
                  const cliente = pedido.cliente;
                  const razonSocial =
                    cliente?.personas?.razon_social || cliente?.nombre_fantasia || "-";
                  const vendedor = pedido.vendedor;
                  const cantItems = pedido._count?.detalle || 0;

                  return (
                    <TableRow
                      key={pedido.id}
                      hover
                      sx={{ cursor: "pointer" }}
                      onClick={() => setPedidoDetalle(pedido)}
                    >
                      {isColumnaVisible("numero") && (
                        <TableCell>
                          <Typography variant="body2" fontWeight={600} fontFamily="monospace">
                            {pedido.numero_pedido || "Borrador"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("fecha") && (
                        <TableCell>
                          <Typography variant="body2">
                            {pedido.fecha_pedido
                              ? dayjs(pedido.fecha_pedido).format("DD/MM/YY HH:mm")
                              : "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("cliente") && (
                        <TableCell>
                          <Typography variant="body2" noWrap sx={{ maxWidth: 200 }}>
                            {razonSocial}
                          </Typography>
                          {cliente?.personas?.ruc && (
                            <Typography variant="caption" color="text.secondary">
                              {cliente.personas.ruc}
                            </Typography>
                          )}
                        </TableCell>
                      )}
                      {isColumnaVisible("vendedor") && (
                        <TableCell>
                          <Typography variant="body2">
                            {vendedor
                              ? `${vendedor.nombre || ""} ${vendedor.apellido || ""}`.trim()
                              : "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("items") && (
                        <TableCell align="center">
                          <Chip label={cantItems} size="small" variant="outlined" />
                        </TableCell>
                      )}
                      {isColumnaVisible("total") && (
                        <TableCell align="right">
                          <Typography variant="body2" fontWeight={600}>
                            {formatMoney(pedido.total, pedido.moneda?.codigo)}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("estado") && (
                        <TableCell>
                          <Chip
                            label={pedido.estado}
                            size="small"
                            color={ESTADO_COLOR[pedido.estado] || "default"}
                            sx={{ textTransform: "capitalize", fontWeight: 600 }}
                          />
                        </TableCell>
                      )}
                      {isColumnaVisible("fecha_vencimiento") && (
                        <TableCell>
                          {pedido.fecha_vencimiento
                            ? dayjs(pedido.fecha_vencimiento).format("DD/MM/YY")
                            : "-"}
                        </TableCell>
                      )}
                      {isColumnaVisible("creador") && (
                        <TableCell>
                          <Typography variant="body2">
                            {pedido.creador?.username || "-"}
                          </Typography>
                        </TableCell>
                      )}
                      {isColumnaVisible("acciones") && (
                        <TableCell align="center">
                          <Tooltip title="Ver detalle">
                            <IconButton
                              size="small"
                              onClick={(e) => {
                                e.stopPropagation();
                                setPedidoDetalle(pedido);
                              }}
                            >
                              <Icon icon="mdi:eye" width={18} />
                            </IconButton>
                          </Tooltip>
                        </TableCell>
                      )}
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
        )}

        {/* Paginación */}
        {totalPages > 1 && (
          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
            <Pagination
              count={totalPages}
              page={page}
              onChange={(_, v) => setPage(v)}
              color="primary"
              size={isMobile ? "small" : "medium"}
            />
          </Box>
        )}

        {/* Menú de columnas */}
        <Menu
          anchorEl={columnMenuAnchor}
          open={Boolean(columnMenuAnchor)}
          onClose={() => setColumnMenuAnchor(null)}
        >
          {COLUMNAS_DISPONIBLES.map((col) => (
            <MenuItem key={col.id} onClick={() => toggleColumna(col.id)} dense>
              <ListItemIcon>
                {columnasVisibles.includes(col.id) ? (
                  <Icon icon="mdi:checkbox-marked" width={20} color={theme.palette.primary.main} />
                ) : (
                  <Icon icon="mdi:checkbox-blank-outline" width={20} />
                )}
              </ListItemIcon>
              <ListItemText>{col.label}</ListItemText>
            </MenuItem>
          ))}
        </Menu>

        {/* Diálogo de detalle de pedido */}
        <PedidoDetalleDialog
          open={!!pedidoDetalle}
          onClose={() => setPedidoDetalle(null)}
          pedido={pedidoDetalle}
        />
      </Box>
    </LocalizationProvider>
  );
}