import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  FormControlLabel,
  Grid,
  InputAdornment,
  MenuItem,
  Skeleton,
  Stack,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { MonedaInput } from "../../common/MonedaInput";
import {
  useConfigViaticosQuery,
  useUpdateConfigViaticosMutation,
} from "../../../tanstack/RendicionViaticosStack";

/**
 * Modal de configuración de Rendición de Viáticos por empresa.
 *
 * Setea:
 *  - anticipo_viatico_requiere_aprobacion
 *  - anticipo_viatico_umbral_aprobacion
 *  - reintegro_viatico_default
 *  - viatico_dias_alerta
 */
export function ConfigViaticosDialog({ open, onClose }) {
  const { data: config, isLoading } = useConfigViaticosQuery();
  const mut = useUpdateConfigViaticosMutation();

  const [requiereAprobacion, setRequiereAprobacion] = useState(false);
  const [umbral, setUmbral] = useState(0);
  const [reintegroDefault, setReintegroDefault] = useState("INMEDIATO");
  const [diasAlerta, setDiasAlerta] = useState(15);

  useEffect(() => {
    if (open && config) {
      setRequiereAprobacion(!!config.anticipo_viatico_requiere_aprobacion);
      setUmbral(Number(config.anticipo_viatico_umbral_aprobacion || 0));
      setReintegroDefault(config.reintegro_viatico_default || "INMEDIATO");
      setDiasAlerta(Number(config.viatico_dias_alerta ?? 15));
    }
  }, [open, config]);

  const dirty = useMemo(() => {
    if (!config) return false;
    return (
      Boolean(config.anticipo_viatico_requiere_aprobacion) !== requiereAprobacion ||
      Number(config.anticipo_viatico_umbral_aprobacion || 0) !== Number(umbral || 0) ||
      (config.reintegro_viatico_default || "INMEDIATO") !== reintegroDefault ||
      Number(config.viatico_dias_alerta ?? 15) !== Number(diasAlerta || 0)
    );
  }, [config, requiereAprobacion, umbral, reintegroDefault, diasAlerta]);

  const handleGuardar = async () => {
    try {
      await mut.mutateAsync({
        anticipo_viatico_requiere_aprobacion: requiereAprobacion,
        anticipo_viatico_umbral_aprobacion: Number(umbral || 0),
        reintegro_viatico_default: reintegroDefault,
        viatico_dias_alerta: Number(diasAlerta || 0),
      });
      onClose?.();
    } catch {
      /* toast por el hook */
    }
  };

  return (
    <Dialog
      open={open}
      onClose={mut.isPending ? undefined : onClose}
      maxWidth="sm"
      fullWidth
    >
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Icon icon="mdi:cog-outline" />
        Configuración de Rendición de Viáticos
      </DialogTitle>
      <DialogContent dividers>
        <Alert severity="info" icon={<Icon icon="mdi:information-outline" />} sx={{ mb: 2 }}>
          Estos parámetros aplican a toda la empresa. Cambiarlos afecta las próximas
          rendiciones — no toca las existentes.
        </Alert>

        {isLoading ? (
          <Box sx={{ py: 2 }}>
            <Skeleton height={40} sx={{ mb: 2 }} />
            <Skeleton height={40} sx={{ mb: 2 }} />
            <Skeleton height={40} sx={{ mb: 2 }} />
            <Skeleton height={40} />
          </Box>
        ) : (
          <Stack spacing={2.5}>
            {/* Aprobación de adelantos */}
            <Box>
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                APROBACIÓN DE ADELANTOS
              </Typography>
              <Grid container spacing={2} sx={{ mt: 0.5 }}>
                <Grid size={12}>
                  <FormControlLabel
                    control={
                      <Switch
                        checked={requiereAprobacion}
                        onChange={(e) => setRequiereAprobacion(e.target.checked)}
                      />
                    }
                    label={
                      <Box>
                        <Typography variant="body2" fontWeight={600}>
                          Requerir aprobación por monto
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                          Si está activo, un adelanto superior al umbral queda como
                          <strong> PENDIENTE_APROBACION</strong> hasta que un supervisor lo apruebe.
                        </Typography>
                      </Box>
                    }
                  />
                </Grid>
                <Grid size={12}>
                  <MonedaInput
                    label="Umbral de aprobación (Gs.)"
                    value={umbral}
                    onChange={setUmbral}
                    moneda="PYG"
                    fullWidth
                    size="small"
                    disabled={!requiereAprobacion}
                    helperText={
                      requiereAprobacion
                        ? "Adelantos por encima de este monto necesitan aprobación."
                        : "El umbral se aplica solo si la aprobación está activa."
                    }
                  />
                </Grid>
              </Grid>
            </Box>

            <Divider />

            {/* Reintegro por defecto */}
            <Box>
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                CIERRE — REINTEGRO POR DEFECTO
              </Typography>
              <TextField
                select
                size="small"
                fullWidth
                sx={{ mt: 1 }}
                label="Modo de reintegro sugerido al cerrar"
                value={reintegroDefault}
                onChange={(e) => setReintegroDefault(e.target.value)}
                helperText="Se pre-selecciona en el diálogo de cierre. El operador puede cambiarlo caso por caso."
              >
                <MenuItem value="INMEDIATO">
                  <Stack direction="row" alignItems="center" spacing={1}>
                    <Icon icon="mdi:flash" width={18} />
                    <span>Pagar ahora (INMEDIATO)</span>
                  </Stack>
                </MenuItem>
                <MenuItem value="DIFERIDO">
                  <Stack direction="row" alignItems="center" spacing={1}>
                    <Icon icon="mdi:clock-outline" width={18} />
                    <span>Diferir como CxP al empleado (DIFERIDO)</span>
                  </Stack>
                </MenuItem>
              </TextField>
            </Box>

            <Divider />

            {/* Alertas */}
            <Box>
              <Typography variant="caption" fontWeight={700} sx={{ letterSpacing: 0.5, color: "text.secondary" }}>
                ALERTAS Y REPORTES
              </Typography>
              <TextField
                type="number"
                size="small"
                fullWidth
                sx={{ mt: 1 }}
                label="Días para alertar rendiciones sin cerrar"
                value={diasAlerta}
                onChange={(e) => setDiasAlerta(e.target.value)}
                InputProps={{
                  endAdornment: <InputAdornment position="end">días</InputAdornment>,
                }}
                helperText="Rendiciones abiertas por más de esta cantidad de días aparecen destacadas en rojo en el listado y en el reporte de saldos por empleado."
                inputProps={{ min: 1, max: 365 }}
              />
            </Box>
          </Stack>
        )}
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={mut.isPending}>
          Cancelar
        </Button>
        <Button
          variant="contained"
          onClick={handleGuardar}
          disabled={mut.isPending || !dirty}
          startIcon={<Icon icon="mdi:content-save-outline" />}
        >
          {mut.isPending ? "Guardando..." : "Guardar cambios"}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default ConfigViaticosDialog;