import { Add, Assessment, CheckCircleOutline, DeleteOutline, PictureAsPdf, Payments, PointOfSale, Refresh, TrendingUp, Visibility, VisibilityOutlined } from "@mui/icons-material";
import {
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import {
  eliminarComisionSupervisor,
  generarComisionSupervisor,
  getReporteComisionesSupervisores,
  getSupervisoresActivos,
  liquidarComisionSupervisor,
  previewComisionSupervisor,
  recalcularComisionSupervisor,
} from "../../../api/supervisores.service";
import { ESTADO_COMISION, getEstadoComisionChip } from "../../_standards/enums/estados";
import { SupervisoresPdfModal } from "./SupervisoresPdfModal";
import { ComisionSupervisorDetalleDialog } from "./ComisionSupervisorDetalleDialog";

const hoy = new Date();
const primerDiaMes = new Date(hoy.getFullYear(), hoy.getMonth(), 1).toISOString().slice(0, 10);
const ultimoDiaMes = new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0).toISOString().slice(0, 10);

const fmt = (n) =>
  Number(n || 0).toLocaleString("es-PY", { minimumFractionDigits: 0, maximumFractionDigits: 0 });

const fmtFecha = (s) => {
  if (!s) return "-";
  const d = new Date(s);
  return d.toLocaleDateString("es-PY", { day: "2-digit", month: "2-digit", year: "numeric" });
};

const EMPTY_GEN = { supervisor_id: null, periodo_desde: primerDiaMes, periodo_hasta: ultimoDiaMes, observaciones: "" };

export function SupervisoresComisionesTab() {
  const qc = useQueryClient();

  // Filtros
  const [filtroSup, setFiltroSup] = useState(null);
  const [filtroDesde, setFiltroDesde] = useState(primerDiaMes);
  const [filtroHasta, setFiltroHasta] = useState(ultimoDiaMes);
  const [buscar, setBuscar] = useState({ supervisor_id: null, periodo_desde: primerDiaMes, periodo_hasta: ultimoDiaMes });

  // Dialog generar
  const [genOpen, setGenOpen] = useState(false);
  const [genForm, setGenForm] = useState(EMPTY_GEN);
  const [previewData, setPreviewData] = useState(null);
  const [previewLoading, setPreviewLoading] = useState(false);

  // PDF + detalle
  const [pdfTipo, setPdfTipo] = useState(null);
  const [detalleId, setDetalleId] = useState(null);

  const { data: supervisoresActivos = [] } = useQuery({
    queryKey: ["supervisores-activos"],
    queryFn: getSupervisoresActivos,
  });

  const { data: reporte = [], isFetching } = useQuery({
    queryKey: ["supervisores-reporte-comisiones", buscar],
    queryFn: () =>
      getReporteComisionesSupervisores({
        supervisor_id: buscar.supervisor_id || undefined,
        periodo_desde: buscar.periodo_desde || undefined,
        periodo_hasta: buscar.periodo_hasta || undefined,
      }),
  });

  const generarMut = useMutation({
    mutationFn: ({ id, data }) => generarComisionSupervisor(id, data),
    onSuccess: () => {
      toast.success("Comisión generada");
      qc.invalidateQueries({ queryKey: ["supervisores-reporte-comisiones"] });
      setGenOpen(false);
      setGenForm(EMPTY_GEN);
    },
    onError: (e) => toast.error(e?.response?.data?.message || "Error al generar comisión"),
  });

  const liquidarMut = useMutation({
    mutationFn: (comisionId) => liquidarComisionSupervisor(comisionId),
    onSuccess: () => {
      toast.success("Comisión marcada como liquidada");
      qc.invalidateQueries({ queryKey: ["supervisores-reporte-comisiones"] });
    },
    onError: (e) => toast.error(e?.response?.data?.message || "Error al liquidar"),
  });

  const recalcularMut = useMutation({
    mutationFn: (comisionId) => recalcularComisionSupervisor(comisionId),
    onSuccess: () => {
      toast.success("Comisión recalculada con datos actuales");
      qc.invalidateQueries({ queryKey: ["supervisores-reporte-comisiones"] });
    },
    onError: (e) => toast.error(e?.response?.data?.message || "Error al recalcular"),
  });

  const eliminarMut = useMutation({
    mutationFn: (comisionId) => eliminarComisionSupervisor(comisionId),
    onSuccess: () => {
      toast.success("Comisión eliminada");
      qc.invalidateQueries({ queryKey: ["supervisores-reporte-comisiones"] });
    },
    onError: (e) => toast.error(e?.response?.data?.message || "Error al eliminar"),
  });

  const handleEliminar = (id) => {
    if (window.confirm("¿Eliminar esta comisión pendiente? Esta acción no se puede deshacer.")) {
      eliminarMut.mutate(id);
    }
  };

  const handlePreview = async () => {
    if (!genForm.supervisor_id) return toast.error("Seleccioná un supervisor");
    if (!genForm.periodo_desde || !genForm.periodo_hasta) return toast.error("Definí el período");
    setPreviewLoading(true);
    setPreviewData(null);
    try {
      const data = await previewComisionSupervisor(genForm.supervisor_id, {
        periodo_desde: genForm.periodo_desde,
        periodo_hasta: genForm.periodo_hasta,
      });
      setPreviewData(data);
    } catch (e) {
      toast.error(e?.response?.data?.message || "Error al obtener vista previa");
    } finally {
      setPreviewLoading(false);
    }
  };

  const handleBuscar = () =>
    setBuscar({ supervisor_id: filtroSup?.id || null, periodo_desde: filtroDesde, periodo_hasta: filtroHasta });

  const handleGenerar = () => {
    if (!genForm.supervisor_id) return toast.error("Seleccioná un supervisor");
    if (!genForm.periodo_desde || !genForm.periodo_hasta) return toast.error("Definí el período");
    generarMut.mutate({
      id: genForm.supervisor_id,
      data: { periodo_desde: genForm.periodo_desde, periodo_hasta: genForm.periodo_hasta, observaciones: genForm.observaciones || undefined },
    });
  };

  // Totales del reporte
  const totales = reporte.reduce(
    (acc, r) => ({
      ventas: acc.ventas + Number(r.total_ventas || 0),
      cobros: acc.cobros + Number(r.total_cobros || 0),
      comision: acc.comision + Number(r.total_comision || 0),
    }),
    { ventas: 0, cobros: 0, comision: 0 }
  );

  const supLabel = (s) => `${s.nombre}${s.apellido ? " " + s.apellido : ""}${s.codigo ? " (" + s.codigo + ")" : ""}`;

  return (
    <Box>
      {/* Filtros */}
      <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
        <Box display="flex" gap={2} flexWrap="wrap" alignItems="flex-end">
          <Autocomplete
            size="small"
            options={supervisoresActivos}
            getOptionLabel={(o) => supLabel(o)}
            value={filtroSup}
            onChange={(_, v) => setFiltroSup(v)}
            renderInput={(params) => <TextField {...params} label="Supervisor" />}
            sx={{ minWidth: 220 }}
            clearOnEscape
          />
          <TextField
            size="small"
            label="Desde"
            type="date"
            value={filtroDesde}
            onChange={(e) => setFiltroDesde(e.target.value)}
            InputLabelProps={{ shrink: true }}
          />
          <TextField
            size="small"
            label="Hasta"
            type="date"
            value={filtroHasta}
            onChange={(e) => setFiltroHasta(e.target.value)}
            InputLabelProps={{ shrink: true }}
          />
          <Button variant="contained" onClick={handleBuscar} disabled={isFetching}>
            {isFetching ? <CircularProgress size={18} /> : "Buscar"}
          </Button>
          <Box flex={1} />
          <Button
            variant="outlined"
            startIcon={<PictureAsPdf />}
            onClick={() => setPdfTipo("resumen")}
          >
            PDF Resumen
          </Button>
          <Button
            variant="outlined"
            startIcon={<PictureAsPdf />}
            onClick={() => setPdfTipo("detalle")}
          >
            PDF Detallado
          </Button>
          <Button
            variant="outlined"
            startIcon={<Add />}
            onClick={() => setGenOpen(true)}
          >
            Generar comisión
          </Button>
        </Box>
      </Paper>

      {/* Cards resumen */}
      <Box display="flex" gap={2} mb={2} flexWrap="wrap">
        <Card variant="outlined" sx={{ flex: 1, minWidth: 160 }}>
          <CardContent sx={{ py: 1.5, "&:last-child": { pb: 1.5 } }}>
            <Box display="flex" alignItems="center" gap={1} mb={0.5}>
              <PointOfSale fontSize="small" color="primary" />
              <Typography variant="caption" color="text.secondary">Total ventas equipo</Typography>
            </Box>
            <Typography variant="h6" fontWeight={700}>₲ {fmt(totales.ventas)}</Typography>
          </CardContent>
        </Card>
        <Card variant="outlined" sx={{ flex: 1, minWidth: 160 }}>
          <CardContent sx={{ py: 1.5, "&:last-child": { pb: 1.5 } }}>
            <Box display="flex" alignItems="center" gap={1} mb={0.5}>
              <Payments fontSize="small" color="success" />
              <Typography variant="caption" color="text.secondary">Total cobros equipo</Typography>
            </Box>
            <Typography variant="h6" fontWeight={700} color="success.main">₲ {fmt(totales.cobros)}</Typography>
          </CardContent>
        </Card>
        <Card variant="outlined" sx={{ flex: 1, minWidth: 160 }}>
          <CardContent sx={{ py: 1.5, "&:last-child": { pb: 1.5 } }}>
            <Box display="flex" alignItems="center" gap={1} mb={0.5}>
              <TrendingUp fontSize="small" color="warning" />
              <Typography variant="caption" color="text.secondary">Total comisiones</Typography>
            </Box>
            <Typography variant="h6" fontWeight={700} color="warning.main">₲ {fmt(totales.comision)}</Typography>
          </CardContent>
        </Card>
        <Card variant="outlined" sx={{ flex: 1, minWidth: 160 }}>
          <CardContent sx={{ py: 1.5, "&:last-child": { pb: 1.5 } }}>
            <Box display="flex" alignItems="center" gap={1} mb={0.5}>
              <Assessment fontSize="small" color="info" />
              <Typography variant="caption" color="text.secondary">Registros</Typography>
            </Box>
            <Typography variant="h6" fontWeight={700}>{reporte.length}</Typography>
          </CardContent>
        </Card>
      </Box>

      {/* Tabla */}
      <TableContainer component={Paper} variant="outlined">
        <Table size="small">
          <TableHead>
            <TableRow sx={{ "& th": { fontWeight: 600, bgcolor: "action.hover" } }}>
              <TableCell>Supervisor</TableCell>
              <TableCell>Período</TableCell>
              <TableCell align="right">Ventas equipo</TableCell>
              <TableCell align="right">Cobros equipo</TableCell>
              <TableCell align="right">Com. ventas</TableCell>
              <TableCell align="right">Com. cobros</TableCell>
              <TableCell align="right">Total comisión</TableCell>
              <TableCell align="center">Estado</TableCell>
              <TableCell align="center">Acciones</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {isFetching ? (
              <TableRow>
                <TableCell colSpan={9} align="center" sx={{ py: 4 }}>
                  <CircularProgress size={28} />
                </TableCell>
              </TableRow>
            ) : reporte.length === 0 ? (
              <TableRow>
                <TableCell colSpan={9} align="center" sx={{ py: 4, color: "text.secondary" }}>
                  Sin registros para los filtros seleccionados
                </TableCell>
              </TableRow>
            ) : (
              reporte.map((r) => (
                <TableRow key={r.id} hover>
                  <TableCell>
                    <Typography variant="body2" fontWeight={500}>
                      {r.supervisor ? `${r.supervisor.nombre} ${r.supervisor.apellido || ""}`.trim() : "-"}
                    </Typography>
                    {r.supervisor?.codigo && (
                      <Typography variant="caption" color="text.secondary">{r.supervisor.codigo}</Typography>
                    )}
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2">{fmtFecha(r.periodo_desde)}</Typography>
                    <Typography variant="caption" color="text.secondary">al {fmtFecha(r.periodo_hasta)}</Typography>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2">₲ {fmt(r.total_ventas)}</Typography>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2">₲ {fmt(r.total_cobros)}</Typography>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2" color="primary.main">₲ {fmt(r.comision_ventas)}</Typography>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2" color="success.main">₲ {fmt(r.comision_cobros)}</Typography>
                  </TableCell>
                  <TableCell align="right">
                    <Typography variant="body2" fontWeight={600} color="warning.main">
                      ₲ {fmt(r.total_comision)}
                    </Typography>
                  </TableCell>
                  <TableCell align="center">
                    {(() => {
                      const meta = getEstadoComisionChip(r.estado || ESTADO_COMISION.PENDIENTE);
                      return (
                        <Chip
                          label={meta.label}
                          size="small"
                          color={meta.color}
                          variant="outlined"
                        />
                      );
                    })()}
                  </TableCell>
                  <TableCell align="center">
                    <Tooltip title="Ver detalle">
                      <IconButton
                        size="small"
                        color="info"
                        onClick={() => setDetalleId(r.id)}
                      >
                        <Visibility fontSize="small" />
                      </IconButton>
                    </Tooltip>
                    {r.estado !== ESTADO_COMISION.LIQUIDADA && (
                      <>
                        <Tooltip title="Recalcular con datos actuales">
                          <IconButton
                            size="small"
                            color="warning"
                            onClick={() => recalcularMut.mutate(r.id)}
                            disabled={recalcularMut.isPending}
                          >
                            <Refresh fontSize="small" />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title="Marcar como liquidada">
                          <IconButton
                            size="small"
                            color="success"
                            onClick={() => liquidarMut.mutate(r.id)}
                            disabled={liquidarMut.isPending}
                          >
                            <CheckCircleOutline fontSize="small" />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title="Eliminar comisión pendiente">
                          <IconButton
                            size="small"
                            color="error"
                            onClick={() => handleEliminar(r.id)}
                            disabled={eliminarMut.isPending}
                          >
                            <DeleteOutline fontSize="small" />
                          </IconButton>
                        </Tooltip>
                      </>
                    )}
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Dialog generar comisión */}
      <Dialog
        open={genOpen}
        onClose={() => {
          setGenOpen(false);
          setPreviewData(null);
        }}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>Generar comisión supervisor</DialogTitle>
        <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 2, pt: 2 }}>
          <Box display="flex" gap={2} flexWrap="wrap">
            <Autocomplete
              size="small"
              options={supervisoresActivos}
              getOptionLabel={(o) => supLabel(o)}
              value={supervisoresActivos.find((s) => s.id === genForm.supervisor_id) || null}
              onChange={(_, v) => {
                setGenForm((f) => ({ ...f, supervisor_id: v?.id || null }));
                setPreviewData(null);
              }}
              renderInput={(params) => <TextField {...params} label="Supervisor *" />}
              sx={{ minWidth: 260, flex: 1 }}
            />
            <TextField
              size="small"
              label="Período desde *"
              type="date"
              value={genForm.periodo_desde}
              onChange={(e) => {
                setGenForm((f) => ({ ...f, periodo_desde: e.target.value }));
                setPreviewData(null);
              }}
              InputLabelProps={{ shrink: true }}
            />
            <TextField
              size="small"
              label="Período hasta *"
              type="date"
              value={genForm.periodo_hasta}
              onChange={(e) => {
                setGenForm((f) => ({ ...f, periodo_hasta: e.target.value }));
                setPreviewData(null);
              }}
              InputLabelProps={{ shrink: true }}
            />
          </Box>
          <TextField
            size="small"
            label="Observaciones"
            value={genForm.observaciones}
            onChange={(e) => setGenForm((f) => ({ ...f, observaciones: e.target.value }))}
            multiline
            rows={2}
            fullWidth
          />

          <Box display="flex" justifyContent="flex-end">
            <Button
              size="small"
              variant="outlined"
              startIcon={<VisibilityOutlined />}
              onClick={handlePreview}
              disabled={previewLoading}
            >
              {previewLoading ? "Calculando..." : "Vista previa"}
            </Button>
          </Box>

          {previewData && (
            <Paper variant="outlined" sx={{ p: 2 }}>
              <Typography variant="subtitle2" gutterBottom>
                Desglose del equipo
              </Typography>
              <TableContainer>
                <Table size="small">
                  <TableHead>
                    <TableRow>
                      <TableCell>Vendedor / Cobrador</TableCell>
                      <TableCell align="right">Ventas</TableCell>
                      <TableCell align="right">Cobros</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {previewData.equipo.map((e) => (
                      <TableRow key={e.vendedor_cobrador.id}>
                        <TableCell>
                          {e.vendedor_cobrador.nombre}{" "}
                          {e.vendedor_cobrador.apellido || ""}
                          <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
                            {e.vendedor_cobrador.tipo}
                          </Typography>
                        </TableCell>
                        <TableCell align="right">₲ {fmt(e.ventas)}</TableCell>
                        <TableCell align="right">₲ {fmt(e.cobros)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
              <Box display="flex" gap={3} mt={2} flexWrap="wrap">
                <Box>
                  <Typography variant="caption" color="text.secondary">Total ventas</Typography>
                  <Typography variant="body2" fontWeight={600}>₲ {fmt(previewData.totales.ventas)}</Typography>
                </Box>
                <Box>
                  <Typography variant="caption" color="text.secondary">Total cobros</Typography>
                  <Typography variant="body2" fontWeight={600}>₲ {fmt(previewData.totales.cobros)}</Typography>
                </Box>
                <Box>
                  <Typography variant="caption" color="text.secondary">
                    Com. ventas ({previewData.supervisor.porcentaje_comision_ventas}%)
                  </Typography>
                  <Typography variant="body2" fontWeight={600} color="primary.main">
                    ₲ {fmt(previewData.totales.comision_ventas)}
                  </Typography>
                </Box>
                <Box>
                  <Typography variant="caption" color="text.secondary">
                    Com. cobros ({previewData.supervisor.porcentaje_comision_cobros}%)
                  </Typography>
                  <Typography variant="body2" fontWeight={600} color="success.main">
                    ₲ {fmt(previewData.totales.comision_cobros)}
                  </Typography>
                </Box>
                <Box>
                  <Typography variant="caption" color="text.secondary">Total comisión</Typography>
                  <Typography variant="body2" fontWeight={700} color="warning.main">
                    ₲ {fmt(previewData.totales.total_comision)}
                  </Typography>
                </Box>
              </Box>
            </Paper>
          )}
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setGenOpen(false);
              setPreviewData(null);
            }}
            color="inherit"
          >
            Cancelar
          </Button>
          <Button variant="contained" onClick={handleGenerar} disabled={generarMut.isPending}>
            {generarMut.isPending ? "Generando..." : "Generar"}
          </Button>
        </DialogActions>
      </Dialog>

      <SupervisoresPdfModal
        open={!!pdfTipo}
        onClose={() => setPdfTipo(null)}
        tipo={pdfTipo || "resumen"}
        supervisorId={buscar.supervisor_id || undefined}
        periodoDesde={buscar.periodo_desde}
        periodoHasta={buscar.periodo_hasta}
      />

      <ComisionSupervisorDetalleDialog
        open={!!detalleId}
        onClose={() => setDetalleId(null)}
        comisionId={detalleId}
      />
    </Box>
  );
}