import { Icon } from "@iconify/react/dist/iconify.js";
import { useMutation, useQuery } from "@tanstack/react-query";
import dayjs from "dayjs";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { UserAuth } from "../../context/AuthContent";
import { useEmpresaStore } from "../../store/EmpresaStore";
import { useThemeStore } from "../../store/ThemeStore";

// API imports
import {
    getDepositoPrincipal,
    getDepositos,
} from "../../api/depositos.service";
import { getEmpresaMonedas } from "../../api/monedas.service";
import { createNotaCredito } from "../../api/notasCredito.service";
import { getNumeracionesBySucursal } from "../../api/numeraciones.service";
import { getReferenciales } from "../../api/referenciales.service";
import { getSucursales } from "../../api/sucursales.service";
import { hoyISO } from "../../utils/fecha";

// Components

const DEFAULT_CONFIG = {
  layout: "admin",
  show_product_image: false,
  show_product_stock: true,
  enable_discounts: false, // Sin descuentos en NC
  enable_taxes: true,
  compact_mode: false,
};

export function NuevaNotaCredito() {
  const navigate = useNavigate();
  const { user } = UserAuth();
  const { dataempresa } = useEmpresaStore();
  const { themeStyle } = useThemeStore();

  // Estado de nota de crédito
  const [sucursalActiva, setSucursalActiva] = useState(null);
  const [puntoExpedicionActivo, setPuntoExpedicionActivo] = useState(null);
  const [numeracionActiva, setNumeracionActiva] = useState(null);
  const [fecha, setFecha] = useState(() => hoyISO());
  const [monedaActiva, setMonedaActiva] = useState(null);
  const [motivoEmisionActivo, setMotivoEmisionActivo] = useState(null);
  const [tipoDocumento, setTipoDocumento] = useState("electronico");
  const [depositoActivo, setDepositoActivo] = useState(null);
  const [informacionAdicional, setInformacionAdicional] = useState("");

  // Estado de items y cliente
  const [items, setItems] = useState([]);
  const [cliente, setCliente] = useState(null);
  const [facturaAsociada, setFacturaAsociada] = useState(null);

  // Estado de cotización
  const [cotizacionActiva, setCotizacionActiva] = useState(null);
  const [cotizacionRequerida, setCotizacionRequerida] = useState(false);

  // Estado para diálogos
  const [buscadorFacturasOpen, setBuscadorFacturasOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  // Estado para búsqueda de productos (modo impreso)
  const [showProductSearch, setShowProductSearch] = useState(false);

  // Formulario de la nota de crédito
  const [formData, setFormData] = useState({
    dfeemide: dayjs(),
    dest: "",
    dpunexp: "",
    dnumdoc: "",
    factura_cab_id: "",
    facturaAsociada: null,
    cliente_id: "",
    cliente: null,
    moneda_id: "",
    tipo_impuesto_id: "",
    motivo_emision_id: "",
    dinfoemi: "",
  });
  const [buscadorOpen, setBuscadorOpen] = useState(false);

  // Queries para cargar datos
  const { data: sucursalesData } = useQuery({
    queryKey: ["sucursales"],
    queryFn: () => getSucursales(),
  });

  const { data: monedasData } = useQuery({
    queryKey: ["empresaMonedas"],
    queryFn: getEmpresaMonedas,
  });

  const { data: referencialesData } = useQuery({
    queryKey: ["referenciales"],
    queryFn: getReferenciales,
  });

  // Cargar numeraciones cuando cambia la sucursal (filtrar por tipo documento 5 = Nota de Crédito)
  const { data: numeracionesData } = useQuery({
    queryKey: ["numeraciones-nc", sucursalActiva?.id],
    queryFn: () => getNumeracionesBySucursal(sucursalActiva?.id, 5), // Tipo 5 = Nota de Crédito
    enabled: !!sucursalActiva?.id,
  });

  // Cargar depósitos de la sucursal activa
  const { data: depositosData } = useQuery({
    queryKey: ["depositos", sucursalActiva?.id],
    queryFn: () => getDepositos(sucursalActiva?.id),
    enabled: !!sucursalActiva?.id,
  });

  // Cargar depósito principal de la sucursal
  const { data: depositoPrincipal } = useQuery({
    queryKey: ["deposito-principal", sucursalActiva?.id],
    queryFn: () => getDepositoPrincipal(sucursalActiva?.id),
    enabled: !!sucursalActiva?.id,
  });

  // Mutation para crear nota de crédito
  const createMutation = useMutation({
    mutationFn: createNotaCredito,
    onSuccess: (data) => {
      navigate(`/ventas/notas-credito/${data.id}`);
    },
    onError: (error) => {
      console.error("Error al crear nota de crédito:", error);
    },
  });

  // Manejar selección de factura
  const handleSelectFactura = useCallback((factura) => {
    setFormData((prev) => ({
      ...prev,
      factura_cab_id: factura.id,
      facturaAsociada: factura,
      cliente_id: factura.clientes?.id || "",
      cliente: factura.clientes,
      moneda_id: factura.moneda?.id || "",
      tipo_impuesto_id: factura.tipo_impuesto?.id || "",
    }));
  }, []);

  // Calcular totales basados en la factura (sin descuentos)
  const totalesCalculados = useMemo(() => {
    if (!formData.facturaAsociada) return null;

    const factura = formData.facturaAsociada;
    const subtotales = factura.factura_subtotales?.[0];

    if (!subtotales) return null;

    // Para nota de crédito, tomamos los totales de la factura sin descuentos
    return {
      subtotal_exento: subtotales.subtotal_exento || 0,
      subtotal_5: subtotales.subtotal_5 || 0,
      subtotal_10: subtotales.subtotal_10 || 0,
      total_operacion: subtotales.total_operacion || 0,
      total_iva: subtotales.total_iva || 0,
      total_general: subtotales.dtotope || 0,
      liquidacion_iva_5: subtotales.liquidacion_iva_5 || 0,
      liquidacion_iva_10: subtotales.liquidacion_iva_10 || 0,
      total_base_gravada_5: subtotales.total_base_gravada_5 || 0,
      total_base_gravada_10: subtotales.total_base_gravada_10 || 0,
    };
  }, [formData.facturaAsociada]);

  // Validar formulario
  const validateForm = useCallback(() => {
    const newErrors = {};

    if (!formData.factura_cab_id) {
      newErrors.factura = "Debe seleccionar una factura";
    }
    if (!formData.motivo_emision_id) {
      newErrors.motivo = "Debe seleccionar un motivo de emisión";
    }
    if (!formData.dest) {
      newErrors.dest = "Establecimiento es requerido";
    }
    if (!formData.dpunexp) {
      newErrors.dpunexp = "Punto de expedición es requerido";
    }
    if (!formData.dnumdoc) {
      newErrors.dnumdoc = "Número de documento es requerido";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }, [formData]);

  // Manejar envío del formulario
  const handleSubmit = useCallback(async () => {
    if (!validateForm()) return;

    const factura = formData.facturaAsociada;
    const items =
      factura.factura_det?.map((item, index) => ({
        producto_id: item.producto_id,
        unidad_medida:
          item.productos?.unidades_de_medida?.representacion || "UNI",
        descripcion: item.descripcion,
        cantidad: item.cantidad,
        precio_unitario: item.precio_unitario,
        total_bruto: item.total_bruto,
        total_operacion: item.total_operacion,
        total_gs: item.total_gs,
        afectacion_iva: item.afectacion_iva,
        porcentaje_iva: item.porcentaje_iva,
        proporcion_iva: item.proporcion_iva || 100,
        base_gravada: item.base_gravada,
        liquidacion_iva: item.liquidacion_iva,
        descuento: 0, // Sin descuentos en nota de crédito
        porcentaje_descuento: 0,
        item: index + 1,
      })) || [];

    const payload = {
      cabecera: {
        cliente_id: formData.cliente_id,
        tipo_impuesto_id: formData.tipo_impuesto_id,
        moneda_id: formData.moneda_id,
        motivo_emision_id: formData.motivo_emision_id,
        factura_cab_id: formData.factura_cab_id,
        dinfoemi: formData.dinfoemi || undefined,
        dest: formData.dest,
        dpunexp: formData.dpunexp,
        dnumdoc: formData.dnumdoc,
        dfeemide: `${formData.dfeemide.format("YYYY-MM-DD")} ${dayjs().format("HH:mm:ss")}`,
        documentos_asociados: {
          tipo_documento_asociado: 1, // Factura
          numero_documento_asociado: `${factura.dest}-${factura.dpunexp}-${factura.dnumdoc}`,
          fecha_documento_asociado: factura.dfecemi,
        },
      },
      items,
      subtotal: {
        subtotal_exento: totalesCalculados?.subtotal_exento || 0,
        subtotal_5: totalesCalculados?.subtotal_5 || 0,
        subtotal_10: totalesCalculados?.subtotal_10 || 0,
        total_operacion: totalesCalculados?.total_operacion || 0,
        total_descuento: 0, // Sin descuentos
        total_descuento_global_item: 0,
        total_anticipo_item: 0,
        total_anticipo_global: 0,
        porcentaje_descuento_total: 0,
        total_anticipo: 0,
        total_redondeo: 0,
        total_general_operacion: totalesCalculados?.total_general || 0,
        liquidacion_iva_5: totalesCalculados?.liquidacion_iva_5 || 0,
        liquidacion_iva_10: totalesCalculados?.liquidacion_iva_10 || 0,
        total_iva: totalesCalculados?.total_iva || 0,
        total_base_gravada_5: totalesCalculados?.total_base_gravada_5 || 0,
        total_base_gravada_10: totalesCalculados?.total_base_gravada_10 || 0,
        total_base_gravada:
          (totalesCalculados?.total_base_gravada_5 || 0) +
          (totalesCalculados?.total_base_gravada_10 || 0),
        total_gs: totalesCalculados?.total_general || 0,
      },
    };

    createMutation.mutate(payload);
  }, [formData, totalesCalculados, validateForm, createMutation]);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
      <Box>
        {/* Header */}
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 3 }}>
          <Button
            variant="outlined"
            startIcon={<Icon icon="mdi:arrow-left" />}
            onClick={() => navigate("/ventas/notas-credito")}
            size={isMobile ? "small" : "medium"}
          >
            Volver
          </Button>
          <Typography variant="h4" fontWeight={600} sx={{ flex: 1 }}>
            Nueva Nota de Crédito
          </Typography>
          <Button
            variant="contained"
            startIcon={<Icon icon="mdi:content-save" />}
            onClick={handleSubmit}
            disabled={createMutation.isPending || !formData.facturaAsociada}
            size={isMobile ? "small" : "medium"}
          >
            {createMutation.isPending ? "Guardando..." : "Guardar"}
          </Button>
        </Box>

        <Grid container spacing={3}>
          {/* Datos de la Nota de Crédito */}
          <Grid item xs={12} md={6}>
            <Paper variant="outlined" sx={{ p: { xs: 2, sm: 3 } }}>
              <Typography variant="subtitle1" fontWeight={600} gutterBottom>
                <Icon
                  icon="mdi:file-document-outline"
                  width={20}
                  style={{ verticalAlign: "middle", marginRight: 8 }}
                />
                Datos de la Nota de Crédito
              </Typography>

              <Grid container spacing={2}>
                <Grid item xs={4}>
                  <TextField
                    fullWidth
                    size="small"
                    label="Establecimiento"
                    value={formData.dest}
                    onChange={(e) =>
                      setFormData((prev) => ({ ...prev, dest: e.target.value }))
                    }
                    error={!!errors.dest}
                    helperText={errors.dest}
                  />
                </Grid>
                <Grid item xs={4}>
                  <TextField
                    fullWidth
                    size="small"
                    label="Punto Expedición"
                    value={formData.dpunexp}
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        dpunexp: e.target.value,
                      }))
                    }
                    error={!!errors.dpunexp}
                    helperText={errors.dpunexp}
                  />
                </Grid>
                <Grid item xs={4}>
                  <TextField
                    fullWidth
                    size="small"
                    label="Número"
                    value={formData.dnumdoc}
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        dnumdoc: e.target.value,
                      }))
                    }
                    error={!!errors.dnumdoc}
                    helperText={errors.dnumdoc}
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <DatePicker
                    label="Fecha de Emisión"
                    value={formData.dfeemide}
                    onChange={(newValue) =>
                      setFormData((prev) => ({ ...prev, dfeemide: newValue }))
                    }
                    slotProps={{
                      textField: {
                        size: "small",
                        fullWidth: true,
                      },
                    }}
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <FormControl fullWidth size="small" error={!!errors.motivo}>
                    <InputLabel>Motivo de Emisión</InputLabel>
                    <Select
                      value={formData.motivo_emision_id}
                      onChange={(e) =>
                        setFormData((prev) => ({
                          ...prev,
                          motivo_emision_id: e.target.value,
                        }))
                      }
                      label="Motivo de Emisión"
                    >
                      {MOTIVOS_EMISION.map((motivo) => (
                        <MenuItem key={motivo.id} value={motivo.id}>
                          {motivo.descripcion}
                        </MenuItem>
                      ))}
                    </Select>
                  </FormControl>
                </Grid>
                <Grid item xs={12}>
                  <TextField
                    fullWidth
                    size="small"
                    label="Información Adicional (Opcional)"
                    multiline
                    rows={2}
                    value={formData.dinfoemi}
                    onChange={(e) =>
                      setFormData((prev) => ({
                        ...prev,
                        dinfoemi: e.target.value,
                      }))
                    }
                  />
                </Grid>
              </Grid>
            </Paper>
          </Grid>

          {/* Factura Asociada */}
          <Grid item xs={12} md={6}>
            <Paper variant="outlined" sx={{ p: { xs: 2, sm: 3 } }}>
              <Box
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  mb: 2,
                }}
              >
                <Typography variant="subtitle1" fontWeight={600}>
                  <Icon
                    icon="mdi:file-document"
                    width={20}
                    style={{ verticalAlign: "middle", marginRight: 8 }}
                  />
                  Factura Asociada
                </Typography>
                <Button
                  variant="outlined"
                  size="small"
                  startIcon={<Icon icon="mdi:magnify" />}
                  onClick={() => setBuscadorOpen(true)}
                >
                  {isMobile ? "Buscar" : "Buscar Factura"}
                </Button>
              </Box>

              {errors.factura && (
                <Alert severity="error" sx={{ mb: 2 }}>
                  {errors.factura}
                </Alert>
              )}

              {formData.facturaAsociada ? (
                <Card variant="outlined" sx={{ bgcolor: "success.50" }}>
                  <CardContent>
                    <Grid container spacing={2}>
                      <Grid item xs={12} sm={6}>
                        <Typography
                          variant="caption"
                          color="text.secondary"
                          display="block"
                        >
                          Número de Factura
                        </Typography>
                        <Typography variant="body2" fontWeight={500}>
                          {`${formData.facturaAsociada.dest}-${formData.facturaAsociada.dpunexp}-${formData.facturaAsociada.dnumdoc}`}
                        </Typography>
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <Typography
                          variant="caption"
                          color="text.secondary"
                          display="block"
                        >
                          Fecha
                        </Typography>
                        <Typography variant="body2" fontWeight={500}>
                          {dayjs(formData.facturaAsociada.dfecemi).format(
                            "DD/MM/YYYY",
                          )}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography
                          variant="caption"
                          color="text.secondary"
                          display="block"
                        >
                          Cliente
                        </Typography>
                        <Typography variant="body2" fontWeight={500}>
                          {formData.facturaAsociada.clientes?.personas
                            ?.razon_social || "Sin nombre"}
                        </Typography>
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <Typography
                          variant="caption"
                          color="text.secondary"
                          display="block"
                        >
                          Estado SIFEN
                        </Typography>
                        <Chip label="Aprobado" size="small" color="success" />
                      </Grid>
                      <Grid item xs={12} sm={6}>
                        <Typography
                          variant="caption"
                          color="text.secondary"
                          display="block"
                        >
                          Total Factura
                        </Typography>
                        <Typography
                          variant="body2"
                          fontWeight={500}
                          color="success.main"
                        >
                          {formatMoney(
                            formData.facturaAsociada.factura_subtotales?.[0]
                              ?.dtotope || 0,
                            formData.facturaAsociada.moneda?.codigo || "PYG",
                          )}
                        </Typography>
                      </Grid>
                    </Grid>
                  </CardContent>
                </Card>
              ) : (
                <Box
                  sx={{ textAlign: "center", py: 4, color: "text.secondary" }}
                >
                  <Icon icon="mdi:file-document-outline" width={48} />
                  <Typography variant="body2" sx={{ mt: 1 }}>
                    No hay factura seleccionada
                  </Typography>
                  <Typography variant="caption">
                    Haz clic en &quot;Buscar Factura&quot; para seleccionar una
                  </Typography>
                </Box>
              )}
            </Paper>
          </Grid>

          {/* Items de la Factura */}
          {formData.facturaAsociada && (
            <Grid item xs={12}>
              <Paper variant="outlined" sx={{ p: { xs: 2, sm: 3 } }}>
                <Typography variant="subtitle1" fontWeight={600} gutterBottom>
                  <Icon
                    icon="mdi:format-list-bulleted"
                    width={20}
                    style={{ verticalAlign: "middle", marginRight: 8 }}
                  />
                  Items de la Factura
                </Typography>

                <TableContainer sx={{ overflowX: "auto" }}>
                  <Table
                    size={isMobile ? "small" : "medium"}
                    sx={{ minWidth: 650 }}
                  >
                    <TableHead>
                      <TableRow sx={{ bgcolor: "action.hover" }}>
                        <TableCell sx={{ fontWeight: 600 }}>#</TableCell>
                        <TableCell sx={{ fontWeight: 600 }}>
                          Descripción
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }} align="right">
                          Cantidad
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }} align="right">
                          Precio Unit.
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }} align="right">
                          IVA %
                        </TableCell>
                        <TableCell sx={{ fontWeight: 600 }} align="right">
                          Total
                        </TableCell>
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {formData.facturaAsociada.factura_det?.map(
                        (item, index) => (
                          <TableRow key={index}>
                            <TableCell>{index + 1}</TableCell>
                            <TableCell>{item.descripcion}</TableCell>
                            <TableCell align="right">{item.cantidad}</TableCell>
                            <TableCell align="right">
                              {formatMoney(
                                item.precio_unitario,
                                formData.facturaAsociada.moneda?.codigo,
                              )}
                            </TableCell>
                            <TableCell align="right">
                              {item.porcentaje_iva}%
                            </TableCell>
                            <TableCell align="right">
                              {formatMoney(
                                item.total_operacion,
                                formData.facturaAsociada.moneda?.codigo,
                              )}
                            </TableCell>
                          </TableRow>
                        ),
                      )}
                    </TableBody>
                  </Table>
                </TableContainer>
              </Paper>
            </Grid>
          )}

          {/* Totales */}
          {totalesCalculados && (
            <Grid item xs={12} md={6} sx={{ ml: "auto" }}>
              <Paper variant="outlined" sx={{ p: { xs: 2, sm: 3 } }}>
                <Typography variant="subtitle1" fontWeight={600} gutterBottom>
                  <Icon
                    icon="mdi:calculator"
                    width={20}
                    style={{ verticalAlign: "middle", marginRight: 8 }}
                  />
                  Totales de la Nota de Crédito
                </Typography>

                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  <Box
                    sx={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <Typography variant="body2">Subtotal Exento:</Typography>
                    <Typography variant="body2">
                      {formatMoney(
                        totalesCalculados.subtotal_exento,
                        formData.facturaAsociada?.moneda?.codigo,
                      )}
                    </Typography>
                  </Box>
                  <Box
                    sx={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <Typography variant="body2">Subtotal 5%:</Typography>
                    <Typography variant="body2">
                      {formatMoney(
                        totalesCalculados.subtotal_5,
                        formData.facturaAsociada?.moneda?.codigo,
                      )}
                    </Typography>
                  </Box>
                  <Box
                    sx={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <Typography variant="body2">Subtotal 10%:</Typography>
                    <Typography variant="body2">
                      {formatMoney(
                        totalesCalculados.subtotal_10,
                        formData.facturaAsociada?.moneda?.codigo,
                      )}
                    </Typography>
                  </Box>
                  <Box
                    sx={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <Typography variant="body2">Total IVA:</Typography>
                    <Typography variant="body2">
                      {formatMoney(
                        totalesCalculados.total_iva,
                        formData.facturaAsociada?.moneda?.codigo,
                      )}
                    </Typography>
                  </Box>
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "space-between",
                      pt: 1,
                      borderTop: 1,
                      borderColor: "divider",
                    }}
                  >
                    <Typography variant="subtitle2" fontWeight={600}>
                      Total General:
                    </Typography>
                    <Typography
                      variant="subtitle2"
                      fontWeight={600}
                      color="error.main"
                    >
                      {formatMoney(
                        totalesCalculados.total_general,
                        formData.facturaAsociada?.moneda?.codigo,
                      )}
                    </Typography>
                  </Box>
                </Box>
              </Paper>
            </Grid>
          )}
        </Grid>

        {/* Dialog Buscador de Facturas */}
        <BuscadorFacturas
          open={buscadorOpen}
          onClose={() => setBuscadorOpen(false)}
          onSelectFactura={handleSelectFactura}
        />
      </Box>
    </LocalizationProvider>
  );
}