import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  InputAdornment,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { fmtFechaCalendario } from "../../../utils/fecha";
import { useCallback, useEffect, useMemo, useState } from "react";
import { getFacturasAprobadas } from "../../../api/notasCredito.service";
import { formatMoney } from "../../../utils/formatMoney";

export function BuscadorFacturasNC({
  open,
  onClose,
  onSelectFactura,
  cliente,
  tipoDocumento = "electronico",
}) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  const [selectedFactura, setSelectedFactura] = useState(null);

  // Debounce para búsqueda
  useEffect(() => {
    const timer = setTimeout(() => setSearchDebounced(search), 500);
    return () => clearTimeout(timer);
  }, [search]);

  // Query para obtener facturas aprobadas filtradas por cliente
  const {
    data: facturasData,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: [
      "facturas-aprobadas-nc",
      cliente?.id,
      searchDebounced,
      tipoDocumento,
    ],
    queryFn: () =>
      getFacturasAprobadas({
        search: searchDebounced,
        cliente_id: cliente?.id,
        // Todas las del cliente (el máximo del endpoint), no las primeras 10: el
        // modal no pagina y una factura de hace dos meses quedaba afuera.
        limit: 100,
        tipo_documento: tipoDocumento,
        // Solo facturas con saldo disponible para NC
        con_saldo_disponible: tipoDocumento === "electronico",
      }),
    enabled: open && !!cliente?.id,
  });

  console.log("facturasData:", facturasData);
  // De la más reciente a la más vieja por fecha de EMISIÓN. El endpoint ordena
  // por fecha de carga, y las facturas importadas después (libro de Marangatu)
  // aparecían antes que las emitidas en el sistema.
  const facturas = useMemo(
    () =>
      [...(facturasData?.data || [])].sort(
        (a, b) => new Date(b.dfeemide || 0).getTime() - new Date(a.dfeemide || 0).getTime(),
      ),
    [facturasData],
  );

  const handleSelectFactura = useCallback((factura) => {
    setSelectedFactura(factura);
  }, []);

  const handleConfirm = useCallback(() => {
    if (selectedFactura) {
      onSelectFactura(selectedFactura);
      onClose();
      setSelectedFactura(null);
      setSearch("");
      setSearchDebounced("");
    }
  }, [selectedFactura, onSelectFactura, onClose]);

  const handleClose = useCallback(() => {
    onClose();
    setSelectedFactura(null);
    setSearch("");
    setSearchDebounced("");
  }, [onClose]);

  // Total ya cobrado en la factura (suma de recibo_cobro_detalle no anulados)
  const calcularTotalCobrado = (factura) => {
    const cuotas = factura.factura_cuotas || [];
    let cobrado = 0;
    for (const cuota of cuotas) {
      const detalles = cuota.recibo_cobro_detalle || [];
      for (const d of detalles) {
        const estadoRec = d.recibos_cobro?.estado;
        if (estadoRec && String(estadoRec).toLowerCase().includes("anul")) continue;
        cobrado += Number(d.monto_pagado || 0);
      }
    }
    return cobrado;
  };

  // Saldo disponible para emitir NC = límite legal/SIFEN (total factura − NCs previas).
  // Los cobros NO reducen este disponible: el recibo no es documento fiscal, la NC
  // sigue siendo emitible aunque haya cobros. Los cobros se muestran solo como info.
  const calcularSaldoDisponible = (factura) => {
    if (tipoDocumento === "impreso") {
      return factura.factura_subtotales?.[0]?.dtotope || 0;
    }
    const totalOriginal = factura.factura_subtotales?.[0]?.dtotope || 0;
    const totalNotasCredito = factura.total_notas_credito || 0;
    return Math.max(0, totalOriginal - totalNotasCredito);
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="lg"
      fullWidth
      fullScreen={isMobile}
      scroll="paper"
    >
      <DialogTitle>
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
          }}
        >
          <Typography variant="h6" component="div">
            Buscar Factura{" "}
            {tipoDocumento === "electronico" ? "Electrónica" : "Impresa"}
          </Typography>
          <IconButton onClick={handleClose} size="small">
            <Icon icon="mdi:close" width={20} />
          </IconButton>
        </Box>
      </DialogTitle>

      <DialogContent dividers sx={{ p: { xs: 1.5, sm: 2 } }}>
        {/* Información del cliente seleccionado */}
        {cliente && (
          <Card variant="outlined" sx={{ mb: 2, bgcolor: "info.50" }}>
            <CardContent sx={{ p: 2 }}>
              <Typography variant="subtitle2" color="info.main" gutterBottom>
                <Icon
                  icon="mdi:account"
                  width={18}
                  style={{ verticalAlign: "middle", marginRight: 4 }}
                />
                Cliente Seleccionado
              </Typography>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    Razón Social
                  </Typography>
                  <Typography variant="body2" fontWeight={500}>
                    {cliente.personas?.razon_social || "Sin nombre"}
                  </Typography>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    RUC/CI
                  </Typography>
                  <Typography variant="body2" fontWeight={500}>
                    {cliente.personas?.ruc ||
                      cliente.personas?.nro_documento ||
                      "Sin documento"}
                  </Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        )}

        {/* Alerta sobre tipo de documento */}
        <Card
          variant="outlined"
          sx={{
            mb: 2,
            bgcolor:
              tipoDocumento === "electronico" ? "warning.50" : "success.50",
          }}
        >
          <CardContent sx={{ p: 2 }}>
            <Typography
              variant="subtitle2"
              color={
                tipoDocumento === "electronico"
                  ? "warning.main"
                  : "success.main"
              }
              gutterBottom
            >
              <Icon
                icon={
                  tipoDocumento === "electronico"
                    ? "mdi:lightning-bolt"
                    : "mdi:printer"
                }
                width={18}
                style={{ verticalAlign: "middle", marginRight: 4 }}
              />
              Documento{" "}
              {tipoDocumento === "electronico" ? "Electrónico" : "Impreso"}
            </Typography>
            <Typography variant="body2">
              {tipoDocumento === "electronico"
                ? "Solo se muestran facturas con saldo disponible (total − NCs previas). La columna \"Cobrado\" es informativa: si es > 0, verificá con el cliente antes de emitir NC."
                : "Modo manual: puede seleccionar cualquier factura. Los totales y cantidades no están validados automáticamente."}
            </Typography>
          </CardContent>
        </Card>

        {/* Buscador */}
        <Box sx={{ mb: 2 }}>
          <TextField
            fullWidth
            size="small"
            placeholder="Buscar por número de factura..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Icon icon="mdi:magnify" width={20} />
                </InputAdornment>
              ),
              endAdornment: search && (
                <InputAdornment position="end">
                  <IconButton size="small" onClick={() => setSearch("")}>
                    <Icon icon="mdi:close" width={18} />
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </Box>

        {/* Información de la factura seleccionada */}
        {selectedFactura && (
          <Card variant="outlined" sx={{ mb: 2, bgcolor: "primary.50" }}>
            <CardContent sx={{ p: 2 }}>
              <Typography variant="subtitle2" color="primary" gutterBottom>
                <Icon
                  icon="mdi:check-circle"
                  width={18}
                  style={{ verticalAlign: "middle", marginRight: 4 }}
                />
                Factura Seleccionada
              </Typography>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6} md={3}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    Número
                  </Typography>
                  <Typography variant="body2" fontWeight={500}>
                    {`${selectedFactura.dest}-${selectedFactura.dpunexp}-${selectedFactura.dnumdoc}`}
                  </Typography>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    Fecha
                  </Typography>
                  <Typography variant="body2" fontWeight={500}>
                    {fmtFechaCalendario(selectedFactura.dfeemide)}
                  </Typography>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    Total Original
                  </Typography>
                  <Typography
                    variant="body2"
                    fontWeight={500}
                    color="success.main"
                  >
                    {formatMoney(
                      selectedFactura.factura_subtotales?.[0]?.dtotope || 0,
                      selectedFactura.moneda?.codigo || "PYG",
                    )}
                  </Typography>
                </Grid>
                <Grid item xs={12} sm={6} md={3}>
                  <Typography
                    variant="caption"
                    color="text.secondary"
                    display="block"
                  >
                    Saldo Disponible
                  </Typography>
                  <Typography
                    variant="body2"
                    fontWeight={500}
                    color="primary.main"
                  >
                    {formatMoney(
                      calcularSaldoDisponible(selectedFactura),
                      selectedFactura.moneda?.codigo || "PYG",
                    )}
                  </Typography>
                </Grid>
              </Grid>
              {calcularTotalCobrado(selectedFactura) > 0 && (
                <Box
                  sx={{
                    mt: 1.5,
                    p: 1.25,
                    borderRadius: 1,
                    bgcolor: "warning.50",
                    border: "1px solid",
                    borderColor: "warning.light",
                    display: "flex",
                    gap: 1,
                    alignItems: "flex-start",
                  }}
                >
                  <Icon
                    icon="mdi:information-outline"
                    width={18}
                    style={{ color: "#ed6c02", flexShrink: 0, marginTop: 2 }}
                  />
                  <Typography variant="caption" color="text.primary">
                    Esta factura ya tiene cobros registrados por{" "}
                    <strong>
                      {formatMoney(
                        calcularTotalCobrado(selectedFactura),
                        selectedFactura.moneda?.codigo || "PYG",
                      )}
                    </strong>
                    . Legalmente podés emitir NC hasta el saldo disponible, pero
                    verificá con el cliente antes de emitir una NC que exceda
                    lo que aún queda por cobrar.
                  </Typography>
                </Box>
              )}
            </CardContent>
          </Card>
        )}

        {/* Tabla de facturas */}
        <TableContainer
          component={Paper}
          variant="outlined"
          sx={{ maxHeight: 400 }}
        >
          <Table size={isMobile ? "small" : "medium"} stickyHeader>
            <TableHead>
              <TableRow>
                <TableCell sx={{ fontWeight: 600 }}>Número</TableCell>
                <TableCell sx={{ fontWeight: 600 }}>Fecha</TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="right">
                  Total Original
                </TableCell>
                {tipoDocumento === "electronico" && (
                  <>
                    <TableCell sx={{ fontWeight: 600 }} align="right">
                      NC Aplicadas
                    </TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">
                      Cobrado
                    </TableCell>
                    <TableCell sx={{ fontWeight: 600 }} align="right">
                      Saldo Disponible
                    </TableCell>
                  </>
                )}
                <TableCell sx={{ fontWeight: 600 }} align="center">
                  Estado
                </TableCell>
                <TableCell sx={{ fontWeight: 600 }} align="center">
                  Acción
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {!cliente ? (
                <TableRow>
                  <TableCell
                    colSpan={tipoDocumento === "electronico" ? 8 : 5}
                    align="center"
                    sx={{ py: 4 }}
                  >
                    <Box
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        gap: 2,
                      }}
                    >
                      <Icon
                        icon="mdi:account-alert"
                        width={48}
                        color="text.secondary"
                      />
                      <Typography variant="body1" color="text.secondary">
                        Seleccione un cliente primero
                      </Typography>
                    </Box>
                  </TableCell>
                </TableRow>
              ) : isLoading ? (
                <TableRow>
                  <TableCell
                    colSpan={tipoDocumento === "electronico" ? 8 : 5}
                    align="center"
                    sx={{ py: 4 }}
                  >
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        gap: 1,
                      }}
                    >
                      <Icon
                        icon="mdi:loading"
                        width={20}
                        className="animate-spin"
                      />
                      <Typography>Buscando facturas...</Typography>
                    </Box>
                  </TableCell>
                </TableRow>
              ) : facturas.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={tipoDocumento === "electronico" ? 8 : 5}
                    align="center"
                    sx={{ py: 4 }}
                  >
                    <Box
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        gap: 2,
                      }}
                    >
                      <Icon
                        icon="mdi:file-document-outline"
                        width={48}
                        color="text.secondary"
                      />
                      <Typography variant="body1" color="text.secondary">
                        {searchDebounced
                          ? "No se encontraron facturas"
                          : `No hay facturas ${tipoDocumento === "electronico" ? "con saldo disponible" : "disponibles"} para este cliente`}
                      </Typography>
                    </Box>
                  </TableCell>
                </TableRow>
              ) : (
                facturas.map((factura) => {
                  const saldoDisponible = calcularSaldoDisponible(factura);
                  const sinSaldo =
                    tipoDocumento === "electronico" && saldoDisponible <= 0;

                  return (
                    <TableRow
                      key={factura.id}
                      hover={!sinSaldo}
                      selected={selectedFactura?.id === factura.id}
                      sx={{
                        cursor: sinSaldo ? "not-allowed" : "pointer",
                        opacity: sinSaldo ? 0.6 : 1,
                      }}
                      onClick={() => !sinSaldo && handleSelectFactura(factura)}
                    >
                      <TableCell>
                        {`${factura.dest}-${factura.dpunexp}-${factura.dnumdoc}`}
                      </TableCell>
                      <TableCell>
                        {fmtFechaCalendario(factura.dfeemide)}
                      </TableCell>
                      <TableCell align="right">
                        {formatMoney(
                          factura.factura_subtotales?.[0]?.dtotope || 0,
                          factura.moneda?.codigo || "PYG",
                        )}
                      </TableCell>
                      {tipoDocumento === "electronico" && (
                        <>
                          <TableCell align="right">
                            {formatMoney(
                              factura.total_notas_credito || 0,
                              factura.moneda?.codigo || "PYG",
                            )}
                          </TableCell>
                          <TableCell align="right">
                            <Typography
                              variant="body2"
                              color={
                                calcularTotalCobrado(factura) > 0
                                  ? "warning.main"
                                  : "text.secondary"
                              }
                            >
                              {formatMoney(
                                calcularTotalCobrado(factura),
                                factura.moneda?.codigo || "PYG",
                              )}
                            </Typography>
                          </TableCell>
                          <TableCell align="right">
                            <Typography
                              variant="body2"
                              color={
                                saldoDisponible > 0
                                  ? "success.main"
                                  : "error.main"
                              }
                              fontWeight={500}
                            >
                              {formatMoney(
                                saldoDisponible,
                                factura.moneda?.codigo || "PYG",
                              )}
                            </Typography>
                          </TableCell>
                        </>
                      )}
                      <TableCell align="center">
                        <Chip label="Aprobado" size="small" color="success" />
                      </TableCell>
                      <TableCell align="center">
                        <Button
                          size="small"
                          variant={
                            selectedFactura?.id === factura.id
                              ? "contained"
                              : "outlined"
                          }
                          disabled={sinSaldo}
                          onClick={(e) => {
                            e.stopPropagation();
                            if (!sinSaldo) handleSelectFactura(factura);
                          }}
                        >
                          {selectedFactura?.id === factura.id
                            ? "Seleccionada"
                            : sinSaldo
                              ? "Sin saldo"
                              : "Seleccionar"}
                        </Button>
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>

      <DialogActions sx={{ p: 2, gap: 1 }}>
        <Button onClick={handleClose} variant="outlined">
          Cancelar
        </Button>
        <Button
          onClick={handleConfirm}
          variant="contained"
          disabled={!selectedFactura}
          startIcon={<Icon icon="mdi:check" />}
        >
          Confirmar Selección
        </Button>
      </DialogActions>
    </Dialog>
  );
}