import { Cloud, Visibility, VisibilityOff } from "@mui/icons-material";
import {
  Alert,
  Box,
  Button,
  Divider,
  FormControlLabel,
  IconButton,
  InputAdornment,
  Paper,
  Switch,
  TextField,
  Typography,
} from "@mui/material";
import { useState } from "react";
import {
  useMarangatuConfigQuery,
  useSaveMarangatuConfigMutation,
} from "../../tanstack/MarangatuStack";

export const MarangatuConfigSection = () => {
  const { data: config, isLoading } = useMarangatuConfigQuery();
  const saveMutation = useSaveMarangatuConfigMutation();

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [activoCompras, setActivoCompras] = useState(false);
  const [activoVentas, setActivoVentas] = useState(false);
  const [initialized, setInitialized] = useState(false);

  if (!initialized && config) {
    setUsername(config.username ?? "");
    setActivoCompras(config.activo_compras ?? false);
    setActivoVentas(config.activo_ventas ?? false);
    setInitialized(true);
  }

  const handleSave = () => {
    const payload = {
      username,
      activo_compras: activoCompras,
      activo_ventas: activoVentas,
    };
    if (password) payload.password = password;
    saveMutation.mutate(payload);
  };

  return (
    <Paper elevation={1} sx={{ p: 3 }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
        <Cloud color="primary" />
        <Typography variant="h6" fontWeight={600}>
          Integración Marangatu (SET)
        </Typography>
      </Box>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Credenciales para importar facturas electrónicas históricas desde el portal de la SET.
      </Typography>
      <Divider sx={{ mb: 3 }} />

      {config?.tiene_password && (
        <Alert severity="success" sx={{ mb: 2 }}>
          Credenciales guardadas. Dejar contraseña vacía para mantener la actual.
        </Alert>
      )}

      <Box sx={{ display: "flex", flexDirection: "column", gap: 2, maxWidth: 480 }}>
        <TextField
          label="Usuario Marangatu (RUC)"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          size="small"
          disabled={isLoading}
        />

        <TextField
          label={config?.tiene_password ? "Nueva contraseña (opcional)" : "Contraseña"}
          type={showPassword ? "text" : "password"}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          size="small"
          slotProps={{
            input: {
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton size="small" onClick={() => setShowPassword(!showPassword)}>
                    {showPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
              ),
            },
          }}
        />

        <Box>
          <FormControlLabel
            control={
              <Switch
                checked={activoCompras}
                onChange={(e) => setActivoCompras(e.target.checked)}
              />
            }
            label="Sincronización automática de COMPRAS (cada 6 horas)"
          />
          <FormControlLabel
            control={
              <Switch
                checked={activoVentas}
                onChange={(e) => setActivoVentas(e.target.checked)}
              />
            }
            label="Sincronización activa de VENTAS"
          />
        </Box>

        <Box>
          <Button
            variant="contained"
            onClick={handleSave}
            disabled={saveMutation.isPending || !username}
          >
            {saveMutation.isPending ? "Guardando..." : "Guardar configuración Marangatu"}
          </Button>
        </Box>
      </Box>
    </Paper>
  );
};