import { CheckCircle, Receipt, Save, Warning } from "@mui/icons-material";
import {
    Alert,
    Box,
    Button,
    Chip,
    Divider,
    FormControl,
    InputLabel,
    MenuItem,
    Paper,
    Select,
    TextField,
    Typography,
} from "@mui/material";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { updateEmpresa } from "../../../api/empresas.service";
import { useEmpresa } from "../../../context/EmpresaContext";

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

  const timbradoActual = empresa?.empresas_timbrado?.[0];
  const hasTimbrado = !!timbradoActual;

  const [formData, setFormData] = useState({
    num_timbrado: "",
    fecha_inicio: "",
    id_csc: "",
    csc: "",
    ambiente: "hml",
  });

  // Cargar datos del timbrado cuando estén disponibles
  useEffect(() => {
    if (timbradoActual) {
      setFormData({
        num_timbrado: timbradoActual.num_timbrado || "",
        fecha_inicio: timbradoActual.fecha_inicio?.split("T")[0] || "",
        id_csc: timbradoActual.id_csc || "",
        csc: timbradoActual.csc || "",
        ambiente: timbradoActual.ambiente || "hml",
      });
    }
  }, [timbradoActual]);

  const mutation = useMutation({
    mutationFn: (data) => updateEmpresa(empresaId, { timbrado: data }),
    onSuccess: () => {
      toast.success("Timbrado guardado correctamente");
      queryClient.invalidateQueries({ queryKey: ["empresa"] });
      refetch();
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al guardar timbrado");
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (
      !formData.num_timbrado ||
      !formData.fecha_inicio ||
      !formData.id_csc ||
      !formData.csc
    ) {
      toast.error("Complete todos los campos requeridos");
      return;
    }
    mutation.mutate(formData);
  };

  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" },
          }}
        >
          <Receipt color="primary" />
          Timbrado
        </Typography>
        {hasTimbrado ? (
          <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" } }}
      >
        Configuración del timbrado para facturación electrónica
      </Typography>
      <Divider sx={{ mb: 3 }} />

      <Box
        component="form"
        onSubmit={handleSubmit}
        sx={{ display: "flex", flexDirection: "column", gap: 2 }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            gap: 2,
          }}
        >
          <TextField
            label="Número de Timbrado"
            size="small"
            fullWidth
            value={formData.num_timbrado}
            onChange={(e) =>
              setFormData({ ...formData, num_timbrado: e.target.value })
            }
            placeholder="12345678"
            inputProps={{ maxLength: 8 }}
            required
          />
          <TextField
            label="Fecha Inicio"
            size="small"
            type="date"
            fullWidth
            value={formData.fecha_inicio}
            onChange={(e) =>
              setFormData({ ...formData, fecha_inicio: e.target.value })
            }
            InputLabelProps={{ shrink: true }}
            required
          />
        </Box>

        <Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            gap: 2,
          }}
        >
          <TextField
            label="ID CSC"
            size="small"
            fullWidth
            value={formData.id_csc}
            onChange={(e) =>
              setFormData({ ...formData, id_csc: e.target.value })
            }
            placeholder="001"
            inputProps={{ maxLength: 4 }}
            required
          />
          <FormControl size="small" fullWidth>
            <InputLabel>Ambiente</InputLabel>
            <Select
              value={formData.ambiente}
              label="Ambiente"
              onChange={(e) =>
                setFormData({ ...formData, ambiente: e.target.value })
              }
            >
              <MenuItem value="hml">Homologación (Pruebas)</MenuItem>
              <MenuItem value="prod">Producción</MenuItem>
            </Select>
          </FormControl>
        </Box>

        <TextField
          label="CSC (Código de Seguridad)"
          size="small"
          fullWidth
          value={formData.csc}
          onChange={(e) => setFormData({ ...formData, csc: e.target.value })}
          placeholder="ABCD0000000000000000000000000000"
          required
        />

        <Button
          type="submit"
          variant="contained"
          startIcon={<Save />}
          disabled={mutation.isPending}
          sx={{ alignSelf: "flex-start" }}
        >
          {mutation.isPending ? "Guardando..." : "Guardar Timbrado"}
        </Button>
      </Box>

      {hasTimbrado && (
        <Alert severity="success" sx={{ mt: 2 }}>
          Timbrado activo: <strong>{timbradoActual.num_timbrado}</strong> -
          Ambiente:{" "}
          {timbradoActual.ambiente === "prod" ? "Producción" : "Homologación"}
        </Alert>
      )}
    </Paper>
  );
};