import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Box,
  Button,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputAdornment,
  InputLabel,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  Pagination,
  Select,
  Skeleton,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import {
  useAvanzarEstadoCaMutation,
  useComprasAsistadasQuery,
  useEliminarCompraAsistidaMutation,
  useGenerarLinkCaMutation,
} from "../../tanstack/CompraAsistidaStack";
import { ConfirmDialog } from "../ui/ConfirmDialog";
import { formatMoney } from "../../utils/formatMoney";

dayjs.locale("es");

const ESTADOS = [
  { value: "", label: "Todos los estados" },
  { value: "borrador", label: "Borrador" },
  { value: "cotizado", label: "Cotizado" },
  { value: "pago_recibido", label: "Pago Recibido" },
  { value: "en_compra_china", label: "En Compra China" },
  { value: "en_transito", label: "En Tránsito" },
  { value: "en_aduana", label: "En Aduana" },
  { value: "entregado", label: "Entregado" },
  { value: "facturado", label: "Facturado" },
  { value: "cancelado", label: "Cancelado" },
];

// pago_recibido: solo via webhook (BancardPostPagoHook), no transición manual
// facturado: solo via botón "Facturar" (endpoint dedicado), no transición manual
const TRANSICIONES = {
  borrador: ["cotizado", "cancelado"],
  cotizado: ["borrador", "cancelado"],
  pago_recibido: ["en_compra_china"],
  en_compra_china: ["en_transito"],
  en_transito: ["en_aduana"],
  en_aduana: ["entregado"],
  entregado: [],
  facturado: [],
  cancelado: [],
};

const ESTADO_CONFIG = {
  borrador: { label: "Borrador", color: "default" },
  cotizado: { label: "Cotizado", color: "warning" },
  pago_recibido: { label: "Pago Recibido", color: "success" },
  en_compra_china: { label: "En Compra China", color: "warning" },
  en_transito: { label: "En Tránsito", color: "warning" },
  en_aduana: { label: "En Aduana", color: "warning" },
  entregado: { label: "Entregado", color: "success" },
  facturado: { label: "Facturado", color: "secondary" },
  cancelado: { label: "Cancelado", color: "error" },
};

function calcTotales(ca) {
  const totalUsd = (ca.items || []).reduce(
    (s, i) => s + Number(i.cantidad) * Number(i.precio_usd),
    0,
  );
  const cotiz = Number(ca.cotizacion_usd_gs || 7500);
  const totalGs =
    totalUsd * cotiz +
    Number(ca.servicio_gs || 0) +
    Number(ca.logistica_gs || 0) +
    Number(ca.comision_gs || 0);
  return { totalUsd, totalGs };
}

function getNombreCliente(cliente) {
  if (!cliente) return "—";
  return (
    cliente.personas?.razon_social ||
    cliente.nombre_fantasia ||
    "Sin nombre"
  );
}

export function CompraAsistidaTab() {
  const navigate = useNavigate();
  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [estado, setEstado] = useState("");
  const [page, setPage] = useState(1);
  const limit = 20;

  const [menuAnchor, setMenuAnchor] = useState(null);
  const [menuRow, setMenuRow] = useState(null);

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

  const { data, isLoading } = useComprasAsistadasQuery({
    search: searchDebounced || undefined,
    estado: estado || undefined,
    page,
    limit,
  });

  const avanzarMutation = useAvanzarEstadoCaMutation();
  const eliminarMutation = useEliminarCompraAsistidaMutation();
  const generarLinkMutation = useGenerarLinkCaMutation();

  const [linkData, setLinkData] = useState(null);
  const [confirmLink, setConfirmLink] = useState(null); // row pendiente de confirmar
  const [confirmEliminar, setConfirmEliminar] = useState(null);

  const rows = data?.data ?? [];
  const total = data?.total ?? 0;
  const totalPages = Math.ceil(total / limit);

  const handleMenuOpen = (e, row) => {
    setMenuAnchor(e.currentTarget);
    setMenuRow(row);
  };

  const handleMenuClose = () => {
    setMenuAnchor(null);
    setMenuRow(null);
  };

  const handleAvanzar = (nuevoEstado) => {
    avanzarMutation.mutate({ id: menuRow.id, estado: nuevoEstado });
    handleMenuClose();
  };

  const handleEliminar = () => {
    setConfirmEliminar(menuRow);
    handleMenuClose();
  };

  const handleEditar = () => {
    navigate(`/ventas/compras-asistidas/${menuRow.id}/editar`);
    handleMenuClose();
  };

  const handleGenerarLink = () => {
    setConfirmLink(menuRow);
    handleMenuClose();
  };

  const handleConfirmLink = () => {
    generarLinkMutation.mutate(confirmLink.id, {
      onSuccess: (data) => { setLinkData(data); setConfirmLink(null); },
      onError: () => setConfirmLink(null),
    });
  };

  const handleCopiarLink = () => {
    navigator.clipboard.writeText(linkData.url);
  };

  const handleWhatsApp = () => {
    const msg = encodeURIComponent(`Hola! Tu link de pago para el pedido está aquí: ${linkData.url}`);
    window.open(`https://wa.me/?text=${msg}`, "_blank");
  };

  return (
    <Wrapper>
      {/* Barra de filtros */}
      <FilterBar>
        <TextField
          size="small"
          placeholder="Buscar por número o cliente..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <Icon icon="mdi:magnify" />
              </InputAdornment>
            ),
          }}
          sx={{ minWidth: 260 }}
        />
        <FormControl size="small" sx={{ minWidth: 200 }}>
          <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>
        <Box flex={1} />
        <Button
          variant="contained"
          startIcon={<Icon icon="mdi:plus" />}
          onClick={() => navigate("/ventas/compras-asistidas/nueva")}
          sx={{ bgcolor: "#f88533", "&:hover": { bgcolor: "#e07320" } }}
        >
          Nueva Compra Asistida
        </Button>
      </FilterBar>

      {/* Tabla */}
      <TableContainer sx={{ flex: 1, overflowY: "auto" }}>
        <Table stickyHeader size="small">
          <TableHead>
            <TableRow>
              <TableCell>Número</TableCell>
              <TableCell>Fecha</TableCell>
              <TableCell>Cliente</TableCell>
              <TableCell align="center">Items</TableCell>
              <TableCell align="right">Total USD</TableCell>
              <TableCell align="right">Total GS</TableCell>
              <TableCell>Estado</TableCell>
              <TableCell align="center">Acciones</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {isLoading
              ? Array.from({ length: 8 }).map((_, i) => (
                  <TableRow key={i}>
                    {Array.from({ length: 8 }).map((__, j) => (
                      <TableCell key={j}>
                        <Skeleton />
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              : rows.map((row) => {
                  const { totalUsd, totalGs } = calcTotales(row);
                  const estadoConf = ESTADO_CONFIG[row.estado] || {
                    label: row.estado,
                    color: "default",
                  };
                  return (
                    <TableRow key={row.id} hover>
                      <TableCell>
                        <Typography fontWeight={600} fontSize={13}>
                          {row.numero}
                        </Typography>
                      </TableCell>
                      <TableCell>
                        {dayjs(row.created_at).format("DD/MM/YYYY")}
                      </TableCell>
                      <TableCell>{getNombreCliente(row.cliente)}</TableCell>
                      <TableCell align="center">
                        {row.items?.length ?? 0}
                      </TableCell>
                      <TableCell align="right">
                        {formatMoney(totalUsd, "USD")}
                      </TableCell>
                      <TableCell align="right">
                        {formatMoney(totalGs, "PYG")}
                      </TableCell>
                      <TableCell>
                        <Chip
                          label={estadoConf.label}
                          color={estadoConf.color}
                          size="small"
                        />
                      </TableCell>
                      <TableCell align="center">
                        <Tooltip title="Acciones">
                          <IconButton
                            size="small"
                            onClick={(e) => handleMenuOpen(e, row)}
                          >
                            <Icon icon="mdi:dots-vertical" />
                          </IconButton>
                        </Tooltip>
                      </TableCell>
                    </TableRow>
                  );
                })}
            {!isLoading && rows.length === 0 && (
              <TableRow>
                <TableCell colSpan={8} align="center" sx={{ py: 4 }}>
                  <Typography color="text.secondary">
                    No se encontraron compras asistidas
                  </Typography>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Paginación */}
      {totalPages > 1 && (
        <Box display="flex" justifyContent="center" py={2}>
          <Pagination
            count={totalPages}
            page={page}
            onChange={(_, v) => setPage(v)}
            color="primary"
          />
        </Box>
      )}

      {/* Menú contextual */}
      <Menu
        anchorEl={menuAnchor}
        open={Boolean(menuAnchor)}
        onClose={handleMenuClose}
      >
        {menuRow &&
          ["borrador", "cotizado"].includes(menuRow.estado) && (
            <MenuItem onClick={handleEditar}>
              <ListItemIcon><Icon icon="mdi:pencil" /></ListItemIcon>
              <ListItemText>Editar</ListItemText>
            </MenuItem>
          )}
        {menuRow && menuRow.estado === "cotizado" && (
          <MenuItem onClick={handleGenerarLink}>
            <ListItemIcon><Icon icon="mdi:link-variant" style={{ color: "#f88533" }} /></ListItemIcon>
            <ListItemText>Generar link de pago</ListItemText>
          </MenuItem>
        )}
        {menuRow &&
          (TRANSICIONES[menuRow.estado] || []).map((sig) => {
            const conf = ESTADO_CONFIG[sig] || { label: sig };
            return (
              <MenuItem key={sig} onClick={() => handleAvanzar(sig)}>
                <ListItemIcon>
                  <Icon icon="mdi:arrow-right-circle-outline" />
                </ListItemIcon>
                <ListItemText>→ {conf.label}</ListItemText>
              </MenuItem>
            );
          })}
        {menuRow && menuRow.estado === "borrador" && (
          <MenuItem onClick={handleEliminar} sx={{ color: "error.main" }}>
            <ListItemIcon>
              <Icon icon="mdi:delete-outline" color="red" />
            </ListItemIcon>
            <ListItemText>Eliminar</ListItemText>
          </MenuItem>
        )}
      </Menu>

      {/* Modal link de pago */}
      <Dialog open={!!linkData} onClose={() => setLinkData(null)} maxWidth="sm" fullWidth>
        <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Icon icon="mdi:link-variant" style={{ color: "#f88533" }} />
          Link de pago generado
        </DialogTitle>
        <DialogContent>
          <Typography variant="body2" color="text.secondary" mb={1}>
            Copiá y enviá este link al cliente por WhatsApp, email o el medio que prefieras.
            Expira el{" "}
            <strong>
              {linkData && dayjs(linkData.fecha_expiracion).format("DD/MM/YYYY HH:mm")}
            </strong>
          </Typography>
          <TextField
            fullWidth
            value={linkData?.url ?? ""}
            InputProps={{
              readOnly: true,
              endAdornment: (
                <InputAdornment position="end">
                  <Tooltip title="Copiar">
                    <IconButton onClick={handleCopiarLink} size="small">
                      <Icon icon="mdi:content-copy" />
                    </IconButton>
                  </Tooltip>
                </InputAdornment>
              ),
            }}
            size="small"
          />
          <Box mt={1}>
            <Typography variant="caption" color="text.secondary">
              Total a pagar: <strong>{linkData && formatMoney(linkData.monto_total, "PYG")}</strong>
            </Typography>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button
            variant="contained"
            startIcon={<Icon icon="mdi:whatsapp" />}
            onClick={handleWhatsApp}
            sx={{ bgcolor: "#25D366", "&:hover": { bgcolor: "#1da851" } }}
          >
            Enviar por WhatsApp
          </Button>
          <Button onClick={handleCopiarLink} startIcon={<Icon icon="mdi:content-copy" />}>
            Copiar link
          </Button>
          <Button onClick={() => setLinkData(null)}>Cerrar</Button>
        </DialogActions>
      </Dialog>

      {/* Confirmación generar link */}
      <ConfirmDialog
        open={!!confirmLink}
        onClose={() => setConfirmLink(null)}
        onConfirm={handleConfirmLink}
        title="Generar link de pago"
        message={`Se generará un nuevo link de pago para ${confirmLink?.numero}. Si ya existe uno activo, quedará cancelado automáticamente.`}
        confirmText="Generar link"
        confirmColor="warning"
        loading={generarLinkMutation.isPending}
      />

      {/* Confirmación eliminar */}
      <ConfirmDialog
        open={!!confirmEliminar}
        onClose={() => setConfirmEliminar(null)}
        onConfirm={() => { eliminarMutation.mutate(confirmEliminar.id); setConfirmEliminar(null); }}
        title="Eliminar compra asistida"
        message={`¿Eliminás la compra asistida ${confirmEliminar?.numero}? Esta acción no se puede deshacer.`}
        confirmText="Eliminar"
        confirmColor="error"
        loading={eliminarMutation.isPending}
      />

    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
`;

const FilterBar = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
`;