import {
    Add,
    Close,
    Edit,
    Numbers,
    PowerSettingsNew,
    Star,
    StarBorder,
} from "@mui/icons-material";
import {
    Alert,
    Box,
    Button,
    Chip,
    CircularProgress,
    Divider,
    Drawer,
    FormControl,
    IconButton,
    InputLabel,
    LinearProgress,
    MenuItem,
    Paper,
    Select,
    TextField,
    Tooltip,
    Typography,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { useEmpresa } from "../../../context/EmpresaContext";
import { useTimbradosQuery } from "../../../tanstack/EmpresaStack";
import {
    useCreateNumeracionMutation,
    useNumeracionesByPuntoExpedicionQuery,
    useSetNumeracionDefaultMutation,
    useToggleNumeracionMutation,
    useUnsetNumeracionDefaultMutation,
    useUpdateNumeracionMutation,
} from "../../../tanstack/NumeracionesStack";
import { useTiposDocumentoQuery } from "../../../tanstack/ReferencialesStack";
import { EmptyState } from "../../_standards";

const pad7 = (n) => String(n ?? 0).padStart(7, "0");

const calcUso = (num) => {
  const ini = Number(num.numero_inicial) || 1;
  const act = Number(num.numero_actual) || ini;
  const fin = num.numero_final ? Number(num.numero_final) : null;
  if (!fin || fin <= ini) return null;
  const total = fin - ini + 1;
  const usados = Math.max(0, Math.min(total, act - ini));
  const pct = Math.round((usados / total) * 100);
  return { total, usados, restantes: total - usados, pct };
};

export const NumeracionesDialog = ({ open, onClose, puntoExpedicion }) => {
  const { empresaId } = useEmpresa();
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [editData, setEditData] = useState({
    numero_actual: "",
    numero_inicial: "",
    numero_final: "",
  });

  const { data: numeraciones, isLoading } =
    useNumeracionesByPuntoExpedicionQuery(puntoExpedicion?.id);
  const { data: tiposDocumento } = useTiposDocumentoQuery();
  const { data: timbrados } = useTimbradosQuery(empresaId);

  const createMutation = useCreateNumeracionMutation();
  const toggleMutation = useToggleNumeracionMutation();
  const updateMutation = useUpdateNumeracionMutation();
  const setDefaultMutation = useSetNumeracionDefaultMutation();
  const unsetDefaultMutation = useUnsetNumeracionDefaultMutation();

  const tiposDocumentoList = tiposDocumento || [];
  const timbradosList = useMemo(() => timbrados || [], [timbrados]);

  const {
    control,
    handleSubmit,
    reset,
    setValue,
    formState: { errors },
  } = useForm({
    defaultValues: {
      tipo_documento_id: "",
      timbrado_id: "",
      numero_inicial: 1,
      numero_final: "",
    },
  });

  useEffect(() => {
    if (timbradosList.length === 1) {
      setValue("timbrado_id", timbradosList[0].id);
    }
  }, [timbradosList, setValue]);

  const handleClose = () => {
    setShowForm(false);
    setEditingId(null);
    reset();
    onClose();
  };

  const handleStartEdit = (num) => {
    setEditingId(num.id);
    setEditData({
      numero_actual: num.numero_actual || "",
      numero_inicial: num.numero_inicial || "",
      numero_final: num.numero_final || "",
    });
  };

  const handleCancelEdit = () => {
    setEditingId(null);
    setEditData({ numero_actual: "", numero_inicial: "", numero_final: "" });
  };

  const handleSaveEdit = () => {
    updateMutation.mutate(
      {
        id: editingId,
        data: {
          numero_actual: Number(editData.numero_actual) || 1,
          numero_inicial: Number(editData.numero_inicial) || 1,
          numero_final: editData.numero_final
            ? Number(editData.numero_final)
            : null,
        },
      },
      { onSuccess: () => setEditingId(null) },
    );
  };

  const onSubmit = (data) => {
    createMutation.mutate(
      {
        empresa_id: empresaId,
        punto_expedicion_id: puntoExpedicion?.id,
        tipo_documento_id: data.tipo_documento_id,
        timbrado_id: data.timbrado_id || undefined,
        numero_inicial: Number(data.numero_inicial) || 1,
        numero_final: data.numero_final ? Number(data.numero_final) : undefined,
      },
      {
        onSuccess: () => {
          setShowForm(false);
          reset();
        },
      },
    );
  };

  return (
    <Drawer
      anchor="right"
      open={open}
      onClose={handleClose}
      PaperProps={{
        sx: { width: { xs: "100%", sm: 520 }, maxWidth: "100vw" },
      }}
    >
      <Box
        sx={{
          px: 2.5,
          py: 2,
          display: "flex",
          alignItems: "center",
          gap: 1.5,
          borderBottom: 1,
          borderColor: "divider",
        }}
      >
        <Numbers color="primary" />
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography variant="subtitle1" fontWeight={700} noWrap>
            Numeraciones
          </Typography>
          <Typography variant="caption" color="text.secondary" noWrap>
            Punto {puntoExpedicion?.punto_expedicion}
            {puntoExpedicion?.descripcion && ` · ${puntoExpedicion.descripcion}`}
          </Typography>
        </Box>
        <IconButton onClick={handleClose} size="small">
          <Close />
        </IconButton>
      </Box>

      <Box sx={{ p: 2.5, overflowY: "auto", flex: 1 }}>
        {!showForm && (
          <Box sx={{ display: "flex", justifyContent: "flex-end", mb: 2 }}>
            <Button
              variant="contained"
              size="small"
              startIcon={<Add />}
              onClick={() => setShowForm(true)}
            >
              Nueva Numeración
            </Button>
          </Box>
        )}

        {showForm && (
          <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
            <Typography variant="subtitle2" gutterBottom>
              Nueva Numeración
            </Typography>
            <form onSubmit={handleSubmit(onSubmit)}>
              <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <Controller
                  name="tipo_documento_id"
                  control={control}
                  rules={{ required: "Tipo de documento es requerido" }}
                  render={({ field }) => (
                    <FormControl
                      size="small"
                      fullWidth
                      error={!!errors.tipo_documento_id}
                    >
                      <InputLabel>Tipo de Documento *</InputLabel>
                      <Select {...field} label="Tipo de Documento *">
                        {tiposDocumentoList.map((tipo) => (
                          <MenuItem key={tipo.id} value={tipo.id}>
                            {tipo.descripcion} ({tipo.abreviatura})
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />

                <Controller
                  name="timbrado_id"
                  control={control}
                  render={({ field }) => (
                    <FormControl size="small" fullWidth>
                      <InputLabel>Timbrado (opcional)</InputLabel>
                      <Select {...field} label="Timbrado (opcional)">
                        <MenuItem value="">Sin timbrado</MenuItem>
                        {timbradosList.map((timbrado) => (
                          <MenuItem key={timbrado.id} value={timbrado.id}>
                            {timbrado.num_timbrado}
                          </MenuItem>
                        ))}
                      </Select>
                    </FormControl>
                  )}
                />

                <Box sx={{ display: "flex", gap: 2 }}>
                  <Controller
                    name="numero_inicial"
                    control={control}
                    render={({ field }) => (
                      <TextField
                        {...field}
                        label="Número Inicial"
                        size="small"
                        type="number"
                        fullWidth
                        inputProps={{ min: 1 }}
                      />
                    )}
                  />
                  <Controller
                    name="numero_final"
                    control={control}
                    render={({ field }) => (
                      <TextField
                        {...field}
                        label="Número Final (opcional)"
                        size="small"
                        type="number"
                        fullWidth
                        inputProps={{ min: 1 }}
                      />
                    )}
                  />
                </Box>

                <Box
                  sx={{ display: "flex", gap: 1, justifyContent: "flex-end" }}
                >
                  <Button
                    size="small"
                    onClick={() => {
                      setShowForm(false);
                      reset();
                    }}
                  >
                    Cancelar
                  </Button>
                  <Button
                    type="submit"
                    variant="contained"
                    size="small"
                    disabled={createMutation.isPending}
                    startIcon={
                      createMutation.isPending && <CircularProgress size={14} />
                    }
                  >
                    {createMutation.isPending ? "Creando..." : "Crear"}
                  </Button>
                </Box>
              </Box>
            </form>
          </Paper>
        )}

        <Divider sx={{ my: 2 }} />

        {isLoading ? (
          <Box sx={{ display: "flex", justifyContent: "center", py: 3 }}>
            <CircularProgress size={24} />
          </Box>
        ) : numeraciones?.length === 0 ? (
          <EmptyState
            compact
            icon="mdi:format-list-numbered"
            title="Sin numeraciones configuradas"
            description="Agregá una numeración para empezar a emitir comprobantes desde este punto de expedición."
            ctaLabel="Nueva Numeración"
            onCta={() => setShowForm(true)}
          />
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {numeraciones?.map((num) => {
              const uso = calcUso(num);
              const cerca = uso && uso.pct >= 90;
              const medio = uso && uso.pct >= 70 && uso.pct < 90;
              return (
                <Paper key={num.id} variant="outlined" sx={{ p: 1.5 }}>
                  <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                    <Box sx={{ flex: 1, minWidth: 0 }}>
                      <Box
                        sx={{
                          display: "flex",
                          alignItems: "center",
                          gap: 0.75,
                          flexWrap: "wrap",
                        }}
                      >
                        <Typography variant="body2" fontWeight={600}>
                          {num.tipo_documento?.descripcion || "Documento"}
                        </Typography>
                        {num.tipo_documento?.abreviatura && (
                          <Chip
                            label={num.tipo_documento.abreviatura}
                            size="small"
                            variant="outlined"
                            sx={{ height: 18, fontSize: "0.65rem" }}
                          />
                        )}
                        {num.timbrado && (
                          <Chip
                            label={`T. ${num.timbrado.num_timbrado}`}
                            size="small"
                            variant="outlined"
                            sx={{ height: 18, fontSize: "0.65rem" }}
                          />
                        )}
                      </Box>
                      <Typography
                        variant="caption"
                        color="text.secondary"
                        sx={{ display: "block", mt: 0.25 }}
                      >
                        {pad7(num.numero_inicial)} → {pad7(num.numero_actual)}
                        {num.numero_final && ` / ${pad7(num.numero_final)}`}
                      </Typography>
                    </Box>
                    <Chip
                      label={num.active ? "Activo" : "Inactivo"}
                      size="small"
                      color={num.active ? "success" : "default"}
                    />
                    {num.es_default && (
                      <Chip
                        icon={<Star sx={{ fontSize: 14 }} />}
                        label="Default"
                        size="small"
                        color="warning"
                        variant="outlined"
                      />
                    )}
                    <Tooltip
                      title={
                        num.es_default
                          ? "Quitar como predeterminada"
                          : "Marcar como predeterminada"
                      }
                    >
                      <span>
                        <IconButton
                          size="small"
                          onClick={() =>
                            num.es_default
                              ? unsetDefaultMutation.mutate(num.id)
                              : setDefaultMutation.mutate(num.id)
                          }
                          disabled={
                            !num.active ||
                            setDefaultMutation.isPending ||
                            unsetDefaultMutation.isPending
                          }
                        >
                          {num.es_default ? (
                            <Star fontSize="small" color="warning" />
                          ) : (
                            <StarBorder fontSize="small" />
                          )}
                        </IconButton>
                      </span>
                    </Tooltip>
                    <Tooltip title="Editar">
                      <IconButton
                        size="small"
                        onClick={() => handleStartEdit(num)}
                        disabled={editingId === num.id}
                      >
                        <Edit fontSize="small" />
                      </IconButton>
                    </Tooltip>
                    <Tooltip title={num.active ? "Desactivar" : "Activar"}>
                      <IconButton
                        size="small"
                        onClick={() => toggleMutation.mutate(num.id)}
                        disabled={toggleMutation.isPending}
                      >
                        <PowerSettingsNew
                          fontSize="small"
                          color={num.active ? "success" : "disabled"}
                        />
                      </IconButton>
                    </Tooltip>
                  </Box>

                  {uso && (
                    <Box sx={{ mt: 1 }}>
                      <LinearProgress
                        variant="determinate"
                        value={uso.pct}
                        color={cerca ? "error" : medio ? "warning" : "primary"}
                        sx={{ height: 6, borderRadius: 3 }}
                      />
                      <Box
                        sx={{
                          display: "flex",
                          justifyContent: "space-between",
                          mt: 0.5,
                        }}
                      >
                        <Typography variant="caption" color="text.secondary">
                          {uso.usados.toLocaleString("es-PY")} de{" "}
                          {uso.total.toLocaleString("es-PY")} usados ({uso.pct}%)
                        </Typography>
                        <Typography
                          variant="caption"
                          color={
                            cerca
                              ? "error.main"
                              : medio
                                ? "warning.main"
                                : "text.secondary"
                          }
                          fontWeight={cerca || medio ? 600 : 400}
                        >
                          {uso.restantes.toLocaleString("es-PY")} restantes
                        </Typography>
                      </Box>
                      {cerca && (
                        <Alert severity="error" sx={{ mt: 0.75, py: 0 }}>
                          Quedan menos del 10%. Solicitá un nuevo timbrado.
                        </Alert>
                      )}
                    </Box>
                  )}

                  {editingId === num.id && (
                    <Box
                      sx={{
                        mt: 1.5,
                        pt: 1.5,
                        borderTop: "1px solid",
                        borderColor: "divider",
                      }}
                    >
                      <Box
                        sx={{
                          display: "flex",
                          gap: 2,
                          mb: 1.5,
                          flexWrap: "wrap",
                        }}
                      >
                        <TextField
                          label="Número Inicial"
                          size="small"
                          type="number"
                          sx={{ flex: 1, minWidth: 120 }}
                          value={editData.numero_inicial}
                          onChange={(e) =>
                            setEditData((prev) => ({
                              ...prev,
                              numero_inicial: e.target.value,
                            }))
                          }
                          inputProps={{ min: 1 }}
                        />
                        <TextField
                          label="Número Actual"
                          size="small"
                          type="number"
                          sx={{ flex: 1, minWidth: 120 }}
                          value={editData.numero_actual}
                          onChange={(e) =>
                            setEditData((prev) => ({
                              ...prev,
                              numero_actual: e.target.value,
                            }))
                          }
                          inputProps={{ min: 1 }}
                          helperText="Próximo número que se emitirá"
                        />
                        <TextField
                          label="Número Final"
                          size="small"
                          type="number"
                          sx={{ flex: 1, minWidth: 120 }}
                          value={editData.numero_final}
                          onChange={(e) =>
                            setEditData((prev) => ({
                              ...prev,
                              numero_final: e.target.value,
                            }))
                          }
                          inputProps={{ min: 1 }}
                        />
                      </Box>
                      <Box
                        sx={{
                          display: "flex",
                          gap: 1,
                          justifyContent: "flex-end",
                        }}
                      >
                        <Button size="small" onClick={handleCancelEdit}>
                          Cancelar
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
                          onClick={handleSaveEdit}
                          disabled={updateMutation.isPending}
                          startIcon={
                            updateMutation.isPending && (
                              <CircularProgress size={14} />
                            )
                          }
                        >
                          {updateMutation.isPending ? "Guardando..." : "Guardar"}
                        </Button>
                      </Box>
                    </Box>
                  )}
                </Paper>
              );
            })}
          </Box>
        )}
      </Box>
    </Drawer>
  );
};