import { AttachMoney, HelpOutline, Save, Settings } from "@mui/icons-material";
import {
    Box,
    Button,
    Card,
    CardContent,
    CardHeader,
    Chip,
    Divider,
    FormControl,
    FormControlLabel,
    Grid,
    IconButton,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    Switch,
    TextField,
    Tooltip,
    Typography,
    useTheme,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import { updateEmpresa } from "../../../api/empresas.service";
import { getEmpresaMonedas } from "../../../api/monedas.service";
import { useEmpresa } from "../../../context/EmpresaContext";

export const PreciosConfig = () => {
  const theme = useTheme();
  const { empresa, empresaId, refetch } = useEmpresa();
  const queryClient = useQueryClient();
  const [isEditing, setIsEditing] = useState(false);

  // Obtener monedas disponibles
  const { data: monedasDisponibles } = useQuery({
    queryKey: ["empresa-monedas"],
    queryFn: () => getEmpresaMonedas(),
    staleTime: 5 * 60 * 1000,
  });

  const {
    control,
    handleSubmit,
    reset,
    formState: { isDirty },
  } = useForm({
    defaultValues: {
      tipo_lista_principal:
        empresa?.configuracion_precios?.tipo_lista_principal || "general",
      permitir_multiples_listas:
        empresa?.configuracion_precios?.permitir_multiples_listas || true,
      aplicar_descuentos_automaticos:
        empresa?.configuracion_precios?.aplicar_descuentos_automaticos || false,
      redondeo_precios:
        empresa?.configuracion_precios?.redondeo_precios || "normal",
      decimales_precio: empresa?.configuracion_precios?.decimales_precio || 0,
      moneda_principal:
        empresa?.configuracion_precios?.moneda_principal || "PYG",
      validar_stock_precios:
        empresa?.configuracion_precios?.validar_stock_precios || true,
      mostrar_precios_sin_stock:
        empresa?.configuracion_precios?.mostrar_precios_sin_stock || false,
    },
  });

  console.log("monedasDisponibles", monedasDisponibles);

  // Actualizar form cuando cambie la empresa
  useEffect(() => {
    if (empresa?.configuracion_precios) {
      reset({
        tipo_lista_principal:
          empresa.configuracion_precios.tipo_lista_principal || "general",
        permitir_multiples_listas:
          empresa.configuracion_precios.permitir_multiples_listas || true,
        aplicar_descuentos_automaticos:
          empresa.configuracion_precios.aplicar_descuentos_automaticos || false,
        redondeo_precios:
          empresa.configuracion_precios.redondeo_precios || "normal",
        decimales_precio: empresa.configuracion_precios.decimales_precio || 0,
        moneda_principal:
          empresa.configuracion_precios.moneda_principal || "PYG",
        validar_stock_mostrar_precios:
          empresa.configuracion_precios.validar_stock_mostrar_precios ??
          empresa.configuracion_precios.validar_stock_precios ??
          true,
        mostrar_precios_sin_stock:
          empresa.configuracion_precios.mostrar_precios_sin_stock || false,
      });
    }
  }, [empresa, reset]);

  // Mutación para actualizar configuración
  const updateConfigMutation = useMutation({
    mutationFn: async (data) => {
      const configuracionPrecios = {
        ...empresa?.configuracion_precios,
        ...data,
      };
      if ("validar_stock_precios" in configuracionPrecios) {
        delete configuracionPrecios.validar_stock_precios;
      }
      const configPrecios = {
        configuracion_precios: configuracionPrecios,
      };
      return await updateEmpresa(empresaId, configPrecios);
    },
    onSuccess: () => {
      toast.success("Configuración de precios actualizada correctamente");
      setIsEditing(false);
      refetch();
      queryClient.invalidateQueries(["empresa", empresaId]);
    },
    onError: (error) => {
      toast.error("Error al actualizar configuración: " + error.message);
    },
  });

  const onSubmit = (data) => {
    updateConfigMutation.mutate(data);
  };

  const handleCancel = () => {
    reset();
    setIsEditing(false);
  };

  return (
    <Paper
      elevation={0}
      sx={{
        p: 3,
        border: `1px solid ${theme.palette.divider}`,
        borderRadius: 2,
        backgroundColor: theme.palette.background.paper,
      }}
    >
      <Box
        display="flex"
        alignItems="center"
        justifyContent="space-between"
        mb={3}
      >
        <Box display="flex" alignItems="center" gap={2}>
          <AttachMoney color="primary" sx={{ fontSize: 32 }} />
          <Box>
            <Typography variant="h5" fontWeight="600">
              Configuración de Precios
            </Typography>
            <Typography variant="body2" color="text.secondary">
              Configura el comportamiento de las listas de precios para tu
              empresa
            </Typography>
          </Box>
        </Box>

        <Box display="flex" gap={1}>
          {!isEditing && (
            <Button
              variant="outlined"
              startIcon={<Settings />}
              onClick={() => setIsEditing(true)}
            >
              Configurar
            </Button>
          )}
        </Box>
      </Box>

      <Divider sx={{ mb: 3 }} />

      <form onSubmit={handleSubmit(onSubmit)}>
        <Grid container spacing={3}>
          {/* Configuración General */}
          <Grid item xs={12}>
            <Card
              sx={{
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 2,
              }}
            >
              <CardHeader
                title={
                  <Box display="flex" alignItems="center" gap={1}>
                    <Typography variant="h6" fontWeight={600}>
                      Configuración General
                    </Typography>
                    <Tooltip
                      title="Define el comportamiento básico de las listas de precios en tu empresa"
                      placement="top"
                    >
                      <IconButton size="small">
                        <HelpOutline fontSize="small" />
                      </IconButton>
                    </Tooltip>
                  </Box>
                }
              />
              <CardContent>
                <Grid container spacing={2}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name="tipo_lista_principal"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <Typography variant="body2" fontWeight={500}>
                              Tipo de Lista Principal
                            </Typography>
                            <Tooltip
                              title="Determina cómo se aplicarán los precios por defecto. 'General' aplica a todos los clientes, mientras que las otras opciones permiten precios específicos por segmento."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <FormControl fullWidth disabled={!isEditing}>
                            <Select {...field} displayEmpty>
                              <MenuItem value="general">
                                General - Para todos los clientes
                              </MenuItem>
                              <MenuItem value="cliente">
                                Por Cliente - Precios personalizados
                              </MenuItem>
                              <MenuItem value="zona">
                                Por Zona - Precios por ubicación
                              </MenuItem>
                              <MenuItem value="canal">
                                Por Canal - Precios por tipo de venta
                              </MenuItem>
                            </Select>
                          </FormControl>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{ mt: 0.5, display: "block" }}
                          >
                            Esta configuración afecta cómo se muestran y aplican
                            los precios en todo el sistema
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>

                  <Grid item xs={12} md={6}>
                    <Controller
                      name="moneda_principal"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <Typography variant="body2" fontWeight={500}>
                              Moneda Principal
                            </Typography>
                            <Tooltip
                              title="Moneda base para mostrar precios. Los precios en otras monedas se convertirán automáticamente usando las cotizaciones configuradas."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <FormControl fullWidth disabled={!isEditing}>
                            <Select {...field} displayEmpty>
                              {monedasDisponibles?.map(
                                (moneda) => (
                                  console.log("moneda", moneda),
                                  (
                                    <MenuItem
                                      key={moneda?.moneda?.id}
                                      value={moneda?.moneda?.codigo}
                                    >
                                      {moneda?.moneda?.descripcion} (
                                      {moneda?.moneda?.codigo})
                                    </MenuItem>
                                  )
                                ),
                              )}
                            </Select>
                          </FormControl>
                          <Typography
                            variant="caption"
                            color="text.secondary"
                            sx={{ mt: 0.5, display: "block" }}
                          >
                            Esta será la moneda de referencia para todos los
                            cálculos de precios
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Controller
                      name="permitir_multiples_listas"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <FormControlLabel
                              control={
                                <Switch
                                  {...field}
                                  checked={field.value}
                                  disabled={!isEditing}
                                />
                              }
                              label="Permitir Múltiples Listas de Precios"
                            />
                            <Tooltip
                              title="Permite crear y gestionar varias listas de precios simultáneamente. Útil para manejar precios por temporada, promociones o segmentos de clientes."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            {field.value
                              ? "✅ Podrás crear listas especializadas para diferentes casos de uso"
                              : "⚠️ Solo podrás usar una lista de precios general"}
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>

                  <Grid item xs={12} md={6}>
                    <Controller
                      name="aplicar_descuentos_automaticos"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <FormControlLabel
                              control={
                                <Switch
                                  {...field}
                                  checked={field.value}
                                  disabled={!isEditing}
                                />
                              }
                              label="Aplicar Descuentos Automáticos"
                            />
                            <Tooltip
                              title="Permite aplicar descuentos automáticamente según reglas predefinidas (volumen, cliente VIP, promociones). Los descuentos se calculan en tiempo real al mostrar precios."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            {field.value
                              ? "✅ Los descuentos se aplicarán automáticamente según las reglas configuradas"
                              : "⚠️ Los descuentos deberán aplicarse manualmente en cada venta"}
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>
                </Grid>
              </CardContent>
            </Card>
          </Grid>

          {/* Configuración de Redondeo */}
          <Grid item xs={12} md={6}>
            <Card
              sx={{
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 2,
              }}
            >
              <CardHeader
                title="Redondeo de Precios"
                titleTypographyProps={{ variant: "h6", fontWeight: 600 }}
              />
              <CardContent>
                <Grid container spacing={2}>
                  <Grid item xs={12}>
                    <Controller
                      name="redondeo_precios"
                      control={control}
                      render={({ field }) => (
                        <FormControl fullWidth disabled={!isEditing}>
                          <InputLabel>Tipo de Redondeo</InputLabel>
                          <Select {...field} label="Tipo de Redondeo">
                            <MenuItem value="normal">Normal</MenuItem>
                            <MenuItem value="superior">Hacia Arriba</MenuItem>
                            <MenuItem value="inferior">Hacia Abajo</MenuItem>
                            <MenuItem value="ninguno">Sin Redondeo</MenuItem>
                          </Select>
                        </FormControl>
                      )}
                    />
                  </Grid>

                  <Grid item xs={12}>
                    <Controller
                      name="decimales_precio"
                      control={control}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          type="number"
                          label="Decimales en Precios"
                          inputProps={{ min: 0, max: 4 }}
                          disabled={!isEditing}
                          helperText="Número de decimales a mostrar en los precios"
                        />
                      )}
                    />
                  </Grid>
                </Grid>
              </CardContent>
            </Card>
          </Grid>

          {/* Configuración de Stock */}
          <Grid item xs={12} md={6}>
            <Card
              sx={{
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 2,
              }}
            >
              <CardHeader
                title="Validación de Stock"
                titleTypographyProps={{ variant: "h6", fontWeight: 600 }}
              />
              <CardContent>
                <Grid container spacing={2}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name="validar_stock_mostrar_precios"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <FormControlLabel
                              control={
                                <Switch
                                  {...field}
                                  checked={field.value}
                                  disabled={!isEditing}
                                />
                              }
                              label="Validar Stock al Mostrar Precios"
                            />
                            <Tooltip
                              title="Verifica la disponibilidad de stock antes de mostrar precios. Evita que se muestren precios de productos sin existencias, mejorando la experiencia de compra."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            {field.value
                              ? "✅ Solo se mostrarán precios de productos con stock disponible"
                              : "⚠️ Se mostrarán precios independientemente del stock disponible"}
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>

                  <Grid item xs={12} md={6}>
                    <Controller
                      name="mostrar_precios_sin_stock"
                      control={control}
                      render={({ field }) => (
                        <Box>
                          <Box
                            display="flex"
                            alignItems="center"
                            gap={1}
                            mb={1}
                          >
                            <FormControlLabel
                              control={
                                <Switch
                                  {...field}
                                  checked={field.value}
                                  disabled={!isEditing}
                                />
                              }
                              label="Mostrar Precios sin Stock Disponible"
                            />
                            <Tooltip
                              title="Permite mostrar precios incluso cuando no hay stock disponible. Útil para catálogos, pre-órdenes o cuando se espera reposición pronta del inventario."
                              placement="top"
                            >
                              <IconButton size="small">
                                <HelpOutline fontSize="small" />
                              </IconButton>
                            </Tooltip>
                          </Box>
                          <Typography variant="caption" color="text.secondary">
                            {field.value
                              ? "✅ Los precios se mostrarán aunque no haya stock (ideal para catálogos)"
                              : "⚠️ No se mostrarán precios cuando el producto esté sin stock"}
                          </Typography>
                        </Box>
                      )}
                    />
                  </Grid>
                </Grid>
              </CardContent>
            </Card>
          </Grid>

          {/* Estado Actual */}
          <Grid item xs={12}>
            <Card
              sx={{
                backgroundColor: theme.palette.background.paper,
                border: `1px solid ${theme.palette.divider}`,
                borderRadius: 2,
              }}
            >
              <CardHeader
                title="Estado Actual"
                titleTypographyProps={{ variant: "h6", fontWeight: 600 }}
              />
              <CardContent>
                <Box display="flex" flexWrap="wrap" gap={1}>
                  <Chip
                    label={`Listas Activas: ${monedasDisponibles?.moneda?.length || 0}`}
                    color="primary"
                    variant="outlined"
                  />
                  <Chip
                    label={`Monedas: ${monedasDisponibles?.moneda?.join(", ") || "Ninguna"}`}
                    color="secondary"
                    variant="outlined"
                  />
                  <Chip
                    label={
                      empresa?.configuracion_precios?.permitir_multiples_listas
                        ? "Multi-Lista"
                        : "Lista Única"
                    }
                    color={
                      empresa?.configuracion_precios?.permitir_multiples_listas
                        ? "success"
                        : "default"
                    }
                    variant="outlined"
                  />
                  <Chip
                    label={`Redondeo: ${empresa?.configuracion_precios?.redondeo_precios || "Normal"}`}
                    color="info"
                    variant="outlined"
                  />
                </Box>
              </CardContent>
            </Card>
          </Grid>
        </Grid>

        {/* Botones de acción al final */}
        {isEditing && (
          <Box
            display="flex"
            justifyContent="flex-end"
            gap={2}
            mt={4}
            pt={3}
            borderTop={`1px solid ${theme.palette.divider}`}
          >
            <Button
              variant="outlined"
              onClick={handleCancel}
              disabled={updateConfigMutation.isPending}
            >
              Cancelar
            </Button>
            <Button
              variant="contained"
              startIcon={<Save />}
              onClick={handleSubmit(onSubmit)}
              disabled={!isDirty || updateConfigMutation.isPending}
            >
              {updateConfigMutation.isPending ? "Guardando..." : "Guardar"}
            </Button>
          </Box>
        )}
      </form>
    </Paper>
  );
};