import {
    Category,
    CheckCircle,
    Delete,
    Save,
    Search,
    Warning,
} from "@mui/icons-material";
import {
    Alert,
    Autocomplete,
    Box,
    Button,
    Chip,
    Divider,
    FormControlLabel,
    IconButton,
    Paper,
    Switch,
    TextField,
    Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { updateEmpresa } from "../../../api/empresas.service";
import { getReferenciales } from "../../../api/referenciales.service";
import { useEmpresa } from "../../../context/EmpresaContext";

export const ActividadesConfig = () => {
  const { empresa, empresaId, refetch } = useEmpresa();
  const queryClient = useQueryClient();

  // Cargar catálogo de actividades económicas desde referenciales
  const { data: referenciales } = useQuery({
    queryKey: ["referenciales"],
    queryFn: getReferenciales,
    staleTime: 60 * 60 * 1000,
  });

  const catalogoActividades = referenciales?.actividad_economicas_sifen || [];

  const [actividades, setActividades] = useState([]);
  const [actividadKude, setActividadKude] = useState("");

  // Cargar actividades de la empresa cuando estén disponibles
  useEffect(() => {
    if (empresa?.actividades_economicas) {
      setActividades(
        empresa.actividades_economicas.map((a) => ({
          codactividad: a.codactividad || "",
          desc_actividad: a.desc_actividad || "",
          principal: a.principal || false,
        })),
      );
    }
    setActividadKude(empresa?.actividad_economica_kude || "");
  }, [empresa]);

  const hasActividades = actividades.length > 0;

  const mutation = useMutation({
    mutationFn: ({ actividades, actividad_economica_kude }) =>
      updateEmpresa(empresaId, {
        actividad_economicas: actividades,
        actividad_economica_kude: actividad_economica_kude ?? "",
      }),
    onSuccess: () => {
      toast.success("Actividades económicas guardadas");
      queryClient.invalidateQueries({ queryKey: ["empresa"] });
      refetch();
    },
    onError: (error) => {
      toast.error(
        error.response?.data?.message || "Error al guardar actividades",
      );
    },
  });

  const handleAddActividad = (actividadSeleccionada) => {
    if (!actividadSeleccionada) return;

    // Verificar si ya existe
    if (
      actividades.some(
        (a) => a.codactividad === String(actividadSeleccionada.codigo),
      )
    ) {
      toast.error("Esta actividad ya está agregada");
      return;
    }

    setActividades([
      ...actividades,
      {
        codactividad: String(actividadSeleccionada.codigo),
        desc_actividad: actividadSeleccionada.descripcion,
        principal: actividades.length === 0,
      },
    ]);
  };

  const handleRemoveActividad = (index) => {
    const newActividades = actividades.filter((_, i) => i !== index);
    // Si eliminamos la principal, hacer la primera como principal
    if (actividades[index].principal && newActividades.length > 0) {
      newActividades[0].principal = true;
    }
    setActividades(newActividades);
  };

  const handleTogglePrincipal = (index) => {
    const newActividades = actividades.map((a, i) => ({
      ...a,
      principal: i === index,
    }));
    setActividades(newActividades);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (actividades.length === 0) {
      toast.error("Agregue al menos una actividad económica");
      return;
    }
    if (!actividades.some((a) => a.principal)) {
      toast.error("Debe marcar una actividad como principal");
      return;
    }
    mutation.mutate({
      actividades,
      actividad_economica_kude: actividadKude.trim(),
    });
  };

  return (
    <Paper sx={{ p: { xs: 2, sm: 3 } }}>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mb: 1,
          gap: 1,
          flexWrap: "wrap",
        }}
      >
        <Typography
          variant="h6"
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            fontSize: { xs: "1rem", sm: "1.25rem" },
          }}
        >
          <Category color="primary" />
          Actividades Económicas
        </Typography>
        {hasActividades ? (
          <Chip
            icon={<CheckCircle />}
            label="Configurado"
            color="success"
            size="small"
          />
        ) : (
          <Chip
            icon={<Warning />}
            label="Pendiente"
            color="warning"
            size="small"
          />
        )}
      </Box>
      <Typography
        variant="body2"
        color="text.secondary"
        sx={{ mb: 2, fontSize: { xs: "0.75rem", sm: "0.875rem" } }}
      >
        Actividades económicas registradas en la SET
      </Typography>
      <Divider sx={{ mb: 3 }} />

      <Box
        component="form"
        onSubmit={handleSubmit}
        sx={{ display: "flex", flexDirection: "column", gap: 2 }}
      >
        {/* Buscador de actividades */}
        <Autocomplete
          options={catalogoActividades}
          getOptionLabel={(option) =>
            option ? `${option.codigo} - ${option.descripcion}` : ""
          }
          filterOptions={(options, { inputValue }) => {
            const searchTerm = inputValue.toLowerCase();
            return options.filter(
              (option) =>
                String(option.codigo).includes(searchTerm) ||
                option.descripcion?.toLowerCase().includes(searchTerm),
            );
          }}
          onChange={(_, value) => handleAddActividad(value)}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Buscar actividad económica"
              size="small"
              placeholder="Escriba el código o descripción..."
              InputProps={{
                ...params.InputProps,
                startAdornment: (
                  <Search sx={{ color: "text.secondary", mr: 1 }} />
                ),
              }}
            />
          )}
          value={null}
          isOptionEqualToValue={(option, value) =>
            option?.codigo === value?.codigo
          }
          noOptionsText="No se encontraron actividades"
        />

        {actividades.length === 0 ? (
          <Alert severity="info">
            No hay actividades económicas configuradas. Busque y seleccione al
            menos una.
          </Alert>
        ) : (
          actividades.map((actividad, index) => (
            <Box
              key={actividad.codactividad}
              sx={{
                display: "flex",
                flexDirection: { xs: "column", sm: "row" },
                gap: { xs: 1, sm: 2 },
                alignItems: { xs: "flex-start", sm: "center" },
                p: { xs: 1.5, sm: 2 },
                border: "1px solid",
                borderColor: actividad.principal ? "primary.main" : "divider",
                borderRadius: 2,
                bgcolor: actividad.principal ? "primary.50" : "transparent",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1,
                  width: { xs: "100%", sm: "auto" },
                }}
              >
                <Chip
                  label={actividad.codactividad}
                  color="primary"
                  variant="outlined"
                  size="small"
                />
                <Typography
                  sx={{ flex: 1, fontSize: { xs: "0.875rem", sm: "1rem" } }}
                >
                  {actividad.desc_actividad}
                </Typography>
              </Box>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1,
                  justifyContent: { xs: "space-between", sm: "flex-end" },
                  width: { xs: "100%", sm: "auto" },
                }}
              >
                <FormControlLabel
                  control={
                    <Switch
                      checked={actividad.principal}
                      onChange={() => handleTogglePrincipal(index)}
                      size="small"
                    />
                  }
                  label="Principal"
                  sx={{ minWidth: { xs: "auto", sm: 100 } }}
                />
                <IconButton
                  color="error"
                  onClick={() => handleRemoveActividad(index)}
                  size="small"
                >
                  <Delete />
                </IconButton>
              </Box>
            </Box>
          ))
        )}

        <Divider sx={{ my: 1 }} />
        <Typography variant="subtitle2" color="text.primary">
          Texto personalizado para el KuDE
        </Typography>
        <TextField
          label="Actividad económica a mostrar en factura / NC"
          value={actividadKude}
          onChange={(e) => setActividadKude(e.target.value)}
          size="small"
          fullWidth
          multiline
          maxRows={3}
          inputProps={{ maxLength: 255 }}
          helperText={
            actividadKude
              ? `${actividadKude.length}/255 — Este texto reemplazará la actividad principal en el PDF (no afecta el XML enviado al SET).`
              : "Opcional. Si lo dejás vacío, en el KuDE se muestra la actividad principal."
          }
        />

        <Button
          type="submit"
          variant="contained"
          startIcon={<Save />}
          disabled={mutation.isPending || actividades.length === 0}
          sx={{ alignSelf: "flex-start" }}
        >
          {mutation.isPending ? "Guardando..." : "Guardar Actividades"}
        </Button>
      </Box>
    </Paper>
  );
};