import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Divider,
  FormControlLabel,
  InputAdornment,
  Switch,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { getConfigMora, updateConfigMora } from "../api/cobros.service";
import { usePermission } from "../hooks/usePermission";
import { useSubmodulo } from "../hooks/useSubmodulo";
import { useAuthStore } from "../store/AuthStore";

const DEFAULT_CONFIG = {
  activo: false,
  tipo_calculo: "diario",
  tasa: 0,
  base_calculo: "capital",
  periodo_gracia: 0,
  monto_minimo_mora: 0,
  monto_maximo_mora: "",
  descripcion_concepto: "Interés por mora",
};

// Explicaciones por tipo de cálculo
const TIPO_INFO = {
  diario: {
    titulo: "Interés diario",
    descripcion:
      "Se cobra un porcentaje del capital por cada día que la cuota está vencida. Es el método más común y preciso.",
    formula: "Mora = Capital × (Tasa% / 100) × Días vencidos",
    ejemplo: (tasa, capital = 100000, dias = 10) => {
      const mora = capital * (tasa / 100) * dias;
      return `Con tasa ${tasa}% diario, una cuota de Gs. ${capital.toLocaleString("es-PY")} vencida hace ${dias} días genera mora de Gs. ${Math.round(mora).toLocaleString("es-PY")}`;
    },
    sugerencia: "Tasas típicas: 0.1% a 0.5% diario",
  },
  mensual: {
    titulo: "Interés mensual",
    descripcion:
      "Se aplica un porcentaje mensual. Los días se redondean al mes completo más cercano (ej: 35 días = 2 meses).",
    formula: "Mora = Capital × (Tasa% / 100) × Meses vencidos (redondeado arriba)",
    ejemplo: (tasa, capital = 100000, dias = 35) => {
      const meses = Math.ceil(dias / 30);
      const mora = capital * (tasa / 100) * meses;
      return `Con tasa ${tasa}% mensual, una cuota de Gs. ${capital.toLocaleString("es-PY")} vencida hace ${dias} días (${meses} mes/es) genera mora de Gs. ${Math.round(mora).toLocaleString("es-PY")}`;
    },
    sugerencia: "Tasas típicas: 3% a 10% mensual",
  },
  fijo_por_cuota: {
    titulo: "Monto fijo por cuota",
    descripcion:
      "Se cobra un monto fijo cada vez que se cobra una cuota vencida, sin importar el capital ni los días de atraso.",
    formula: "Mora = Monto fijo configurado (siempre igual)",
    ejemplo: (tasa) =>
      `Cada cuota vencida tiene una mora fija de Gs. ${Number(tasa).toLocaleString("es-PY")}, sin importar cuántos días lleva vencida`,
    sugerencia: "Útil para cuotas pequeñas donde el cálculo proporcional no vale la pena",
  },
};

// Explicaciones por base de cálculo
const BASE_INFO = {
  capital: {
    titulo: "Solo capital (saldo pendiente)",
    descripcion:
      "La mora se calcula sobre lo que el cliente todavía debe de esa cuota. Si ya pagó parte, la mora baja proporcionalmente.",
    ejemplo:
      "Cuota original: Gs. 150.000. El cliente ya pagó Gs. 50.000. La mora se calcula sobre los Gs. 100.000 restantes.",
  },
  cuota_completa: {
    titulo: "Cuota completa (capital + interés original)",
    descripcion:
      "La mora siempre se calcula sobre el monto total original de la cuota, sin importar cuánto ya se pagó.",
    ejemplo:
      "Cuota original: Gs. 150.000. Aunque el cliente pagó Gs. 50.000, la mora se sigue calculando sobre los Gs. 150.000 completos.",
  },
};

export function ConfigMora() {
  const { hasModule } = useAuthStore();
  const { can: canAdm } = usePermission("ADMINISTRACION");
  const canReadMora = canAdm("ADM_MORA_VER");
  const canEditMora = canAdm("ADM_MORA_EDITAR");
  const { hasAccess: tieneSubmoduloMora } = useSubmodulo("ADM_INTERES_MORA");
  const tieneModuloMora = hasModule("ADMINISTRACION") && tieneSubmoduloMora && canReadMora;
  const [config, setConfig] = useState(DEFAULT_CONFIG);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    getConfigMora()
      .then((data) => {
        setConfig({
          activo: data.activo ?? false,
          tipo_calculo: data.tipo_calculo ?? "diario",
          tasa: Number(data.tasa ?? 0),
          base_calculo: data.base_calculo ?? "capital",
          periodo_gracia: data.periodo_gracia ?? 0,
          monto_minimo_mora: Number(data.monto_minimo_mora ?? 0),
          monto_maximo_mora: data.monto_maximo_mora != null ? Number(data.monto_maximo_mora) : "",
          descripcion_concepto: data.descripcion_concepto ?? "Interés por mora",
        });
      })
      .catch(() => toast.error("Error al cargar configuración de mora"))
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async () => {
    setSaving(true);
    try {
      await updateConfigMora({
        activo: config.activo,
        tipo_calculo: config.tipo_calculo,
        tasa: Number(config.tasa) || 0,
        base_calculo: config.base_calculo,
        periodo_gracia: Number(config.periodo_gracia) || 0,
        monto_minimo_mora: Number(config.monto_minimo_mora) || 0,
        monto_maximo_mora: config.monto_maximo_mora !== "" ? Number(config.monto_maximo_mora) : null,
        descripcion_concepto: config.descripcion_concepto || "Interés por mora",
      });
      toast.success("Configuración de mora guardada");
    } catch {
      toast.error("Error al guardar configuración");
    } finally {
      setSaving(false);
    }
  };

  const set = (field, value) => setConfig((prev) => ({ ...prev, [field]: value }));

  // Calcula mora para N días vencidos sobre capital=100000
  const calcularMoraPara = (dias) => {
    const tasa = Number(config.tasa) || 0;
    const capital = 100000;
    const gracia = Number(config.periodo_gracia) || 0;
    const efectivos = Math.max(0, dias - gracia);
    if (tasa === 0) return null;
    if (config.tipo_calculo !== "fijo_por_cuota" && efectivos <= 0) return 0;
    let mora = 0;
    if (config.tipo_calculo === "diario") mora = capital * (tasa / 100) * efectivos;
    else if (config.tipo_calculo === "mensual") mora = capital * (tasa / 100) * Math.ceil(efectivos / 30);
    else mora = tasa;
    mora = Math.round(mora);
    const min = Number(config.monto_minimo_mora) || 0;
    const max = config.monto_maximo_mora !== "" ? Number(config.monto_maximo_mora) : null;
    if (min > 0 && mora > 0 && mora < min) mora = min;
    if (max !== null && mora > max) mora = max;
    return mora;
  };

  // Escenarios de días para la preview
  const PREVIEW_DIAS =
    config.tipo_calculo === "mensual"
      ? [30, 60, 90, 180]
      : config.tipo_calculo === "fijo_por_cuota"
      ? [1]
      : [5, 10, 30, 60];

  const tipoInfo = TIPO_INFO[config.tipo_calculo];
  const baseInfo = BASE_INFO[config.base_calculo];

  if (loading) return null;

  if (!tieneSubmoduloMora) {
    return (
      <Box sx={{ maxWidth: 720, mx: "auto", p: 3 }}>
        <Alert severity="warning" icon={<Icon icon="lucide:lock" />}>
          <Typography variant="body2" fontWeight={600}>Submódulo no habilitado</Typography>
          <Typography variant="caption">
            El submódulo <strong>Interés por Mora</strong> no está activo en la suscripción de esta empresa. Contactá al administrador para activarlo.
          </Typography>
        </Alert>
      </Box>
    );
  }

  if (!canReadMora) {
    return (
      <Box sx={{ maxWidth: 720, mx: "auto", p: 3 }}>
        <Alert severity="error" icon={<Icon icon="lucide:shield-off" />}>
          <Typography variant="body2" fontWeight={600}>Acceso restringido</Typography>
          <Typography variant="caption">
            No tenés permisos para ver la configuración de mora. Contactá al administrador.
          </Typography>
        </Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ maxWidth: 720, mx: "auto", p: 3 }}>
      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 3 }}>
        <Icon icon="lucide:percent-circle" style={{ fontSize: 28, color: "#f88533" }} />
        <Box>
          <Typography variant="h5" fontWeight={700}>Configuración de Mora</Typography>
          <Typography variant="body2" color="text.secondary">
            Define cómo se calcula el interés por mora en cobros de cuotas vencidas
          </Typography>
        </Box>
      </Box>

      <Card variant="outlined">
        <CardContent sx={{ p: 3 }}>

          {/* Toggle activo */}
          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
            <Box>
              <Typography fontWeight={600}>Aplicar mora en cobros</Typography>
              <Typography variant="caption" color="text.secondary">
                Si está activo, se calculará mora para cuotas vencidas al momento del cobro
              </Typography>
            </Box>
            <FormControlLabel
              control={
                <Switch
                  checked={config.activo}
                  onChange={(e) => set("activo", e.target.checked)}
                  color="warning"
                />
              }
              label={
                <Chip
                  label={config.activo ? "Activo" : "Inactivo"}
                  size="small"
                  color={config.activo ? "warning" : "default"}
                  sx={{ fontWeight: 600 }}
                />
              }
              labelPlacement="start"
            />
          </Box>

          <Divider sx={{ mb: 3 }} />

          {/* ── Tipo de cálculo ── */}
          <Box sx={{ mb: 1 }}>
            <Typography variant="body2" fontWeight={600} gutterBottom>
              Tipo de cálculo
            </Typography>
            <ToggleButtonGroup
              value={config.tipo_calculo}
              exclusive
              onChange={(_, v) => v && set("tipo_calculo", v)}
              size="small"
              sx={{ mb: 2 }}
            >
              <ToggleButton value="diario">Por día</ToggleButton>
              <ToggleButton value="mensual">Por mes</ToggleButton>
              <ToggleButton value="fijo_por_cuota">Monto fijo</ToggleButton>
            </ToggleButtonGroup>

            {/* Explicación del tipo seleccionado */}
            <Alert
              severity="info"
              icon={<Icon icon="lucide:info" />}
              sx={{ mb: 2, "& .MuiAlert-message": { width: "100%" } }}
            >
              <Typography variant="body2" fontWeight={600} gutterBottom>
                {tipoInfo.titulo}
              </Typography>
              <Typography variant="caption" display="block" sx={{ mb: 0.5 }}>
                {tipoInfo.descripcion}
              </Typography>
              <Typography variant="caption" display="block" sx={{ fontFamily: "monospace", opacity: 0.8, mb: 0.5 }}>
                📐 {tipoInfo.formula}
              </Typography>
              <Typography variant="caption" display="block" sx={{ opacity: 0.7, fontStyle: "italic" }}>
                💡 {tipoInfo.sugerencia}
              </Typography>
            </Alert>
          </Box>

          {/* Tasa */}
          <Box sx={{ mb: 3 }}>
            <TextField
              label={
                config.tipo_calculo === "fijo_por_cuota"
                  ? "Monto fijo de mora"
                  : config.tipo_calculo === "diario"
                  ? "Tasa diaria (%)"
                  : "Tasa mensual (%)"
              }
              type="number"
              value={config.tasa}
              onChange={(e) => set("tasa", e.target.value)}
              size="small"
              fullWidth
              inputProps={{ min: 0, step: config.tipo_calculo === "fijo_por_cuota" ? 1 : 0.01 }}
              InputProps={
                config.tipo_calculo !== "fijo_por_cuota"
                  ? { endAdornment: <InputAdornment position="end">%</InputAdornment> }
                  : { startAdornment: <InputAdornment position="start">Gs.</InputAdornment> }
              }
            />
          </Box>

          {/* ── Base de cálculo (solo si no es fijo) ── */}
          {config.tipo_calculo !== "fijo_por_cuota" && (
            <Box sx={{ mb: 3 }}>
              <Typography variant="body2" fontWeight={600} gutterBottom>
                Base de cálculo
              </Typography>
              <ToggleButtonGroup
                value={config.base_calculo}
                exclusive
                onChange={(_, v) => v && set("base_calculo", v)}
                size="small"
                sx={{ mb: 2 }}
              >
                <ToggleButton value="capital">Solo capital</ToggleButton>
                <ToggleButton value="cuota_completa">Cuota completa</ToggleButton>
              </ToggleButtonGroup>

              {/* Explicación de la base seleccionada */}
              <Alert
                severity="info"
                icon={<Icon icon="lucide:layers" />}
                sx={{ "& .MuiAlert-message": { width: "100%" } }}
              >
                <Typography variant="body2" fontWeight={600} gutterBottom>
                  {baseInfo.titulo}
                </Typography>
                <Typography variant="caption" display="block" sx={{ mb: 0.5 }}>
                  {baseInfo.descripcion}
                </Typography>
                <Typography variant="caption" display="block" sx={{ opacity: 0.7, fontStyle: "italic" }}>
                  📋 {baseInfo.ejemplo}
                </Typography>
              </Alert>
            </Box>
          )}

          <Divider sx={{ mb: 3 }} />

          {/* Período de gracia */}
          <Box sx={{ mb: 3 }}>
            <TextField
              label="Período de gracia (días)"
              type="number"
              value={config.periodo_gracia}
              onChange={(e) => set("periodo_gracia", e.target.value)}
              size="small"
              inputProps={{ min: 0, max: 365 }}
              InputProps={{ endAdornment: <InputAdornment position="end">días</InputAdornment> }}
            />
            <Alert severity="info" icon={<Icon icon="lucide:clock" />} sx={{ mt: 1 }}>
              <Typography variant="caption" display="block">
                <strong>¿Qué es el período de gracia?</strong> Son los días después del vencimiento durante los cuales <em>no</em> se cobra mora. Sirve para dar un margen al cliente antes de penalizarlo.
              </Typography>
              <Typography variant="caption" display="block" sx={{ mt: 0.5, fontStyle: "italic", opacity: 0.8 }}>
                Ej: Con 5 días de gracia, una cuota vencida el día 1 recién genera mora a partir del día 6.
                {config.periodo_gracia > 0 && ` Con tu configuración actual de ${config.periodo_gracia} días, una cuota vencida hoy no genera mora hasta el día ${config.periodo_gracia + 1}.`}
              </Typography>
            </Alert>
          </Box>

          {/* Mínimo y máximo */}
          <Box sx={{ mb: 2 }}>
            <Typography variant="body2" fontWeight={600} gutterBottom>
              Límites de mora
            </Typography>
            <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, mb: 1 }}>
              <TextField
                label="Mora mínima"
                type="number"
                value={config.monto_minimo_mora}
                onChange={(e) => set("monto_minimo_mora", e.target.value)}
                size="small"
                inputProps={{ min: 0 }}
                helperText="0 = sin mínimo"
                InputProps={{ startAdornment: <InputAdornment position="start">Gs.</InputAdornment> }}
              />
              <TextField
                label="Mora máxima (tope)"
                type="number"
                value={config.monto_maximo_mora}
                onChange={(e) => set("monto_maximo_mora", e.target.value)}
                size="small"
                inputProps={{ min: 0 }}
                helperText="Vacío = sin tope"
                InputProps={{ startAdornment: <InputAdornment position="start">Gs.</InputAdornment> }}
              />
            </Box>
            <Alert severity="info" icon={<Icon icon="lucide:shield" />}>
              <Typography variant="caption" display="block">
                <strong>Mora mínima:</strong> Si el cálculo da un monto menor, se cobra este mínimo. Útil para que la mora siempre valga la pena cobrar.{" "}
                <em>(Ej: mínimo Gs. 5.000 — aunque la cuota sea pequeña, siempre se cobra al menos eso)</em>
              </Typography>
              <Typography variant="caption" display="block" sx={{ mt: 0.5 }}>
                <strong>Mora máxima:</strong> Limita la mora para cuotas muy atrasadas. Protege al cliente de acumular una mora desproporcionada.{" "}
                <em>(Ej: máximo Gs. 50.000 — por más días que pasen, nunca se cobra más de eso)</em>
              </Typography>
            </Alert>
          </Box>

          <Divider sx={{ mb: 3 }} />

          {/* Descripción concepto */}
          <Box sx={{ mb: 3 }}>
            <TextField
              label="Concepto / descripción"
              value={config.descripcion_concepto}
              onChange={(e) => set("descripcion_concepto", e.target.value)}
              size="small"
              fullWidth
              helperText="Aparece en el recibo de cobro como concepto de la mora"
            />
          </Box>

          {/* ── Simulación en tiempo real ── */}
          {Number(config.tasa) > 0 && (
            <Box
              sx={{
                mb: 3,
                border: "1px solid",
                borderColor: "divider",
                borderRadius: 2,
                overflow: "hidden",
              }}
            >
              {/* Cabecera */}
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1,
                  px: 2,
                  py: 1.5,
                  bgcolor: "action.hover",
                  borderBottom: "1px solid",
                  borderColor: "divider",
                }}
              >
                <Icon icon="lucide:calculator" style={{ fontSize: 16, color: "#f88533" }} />
                <Typography variant="body2" fontWeight={700}>
                  Simulación — cuota de Gs. 100.000
                </Typography>
                <Typography variant="caption" color="text.secondary" sx={{ ml: "auto" }}>
                  ¿Cuánta mora generaría una cuota de Gs. 100.000?
                </Typography>
              </Box>

              {/* Filas de escenarios */}
              <Box sx={{ px: 2, py: 1 }}>
                {config.tipo_calculo === "fijo_por_cuota" ? (
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      py: 1.5,
                    }}
                  >
                    <Typography variant="body2" color="text.secondary">
                      Monto fijo por cuota vencida (sin importar días)
                    </Typography>
                    <Typography variant="body2" fontWeight={700} color="warning.main">
                      Gs. {Number(config.tasa).toLocaleString("es-PY")}
                    </Typography>
                  </Box>
                ) : (
                  PREVIEW_DIAS.map((dias, idx) => {
                    const mora = calcularMoraPara(dias);
                    const gracia = Number(config.periodo_gracia) || 0;
                    const enGracia = mora === 0 && dias <= gracia;
                    const label =
                      config.tipo_calculo === "mensual"
                        ? `${dias} días (${Math.ceil(dias / 30)} mes${Math.ceil(dias / 30) > 1 ? "es" : ""} vencida)`
                        : `${dias} días vencida`;
                    return (
                      <Box
                        key={dias}
                        sx={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "center",
                          py: 1,
                          borderTop: idx > 0 ? "1px solid" : "none",
                          borderColor: "divider",
                        }}
                      >
                        <Typography variant="body2" color="text.secondary">
                          {label}
                        </Typography>
                        {enGracia ? (
                          <Typography variant="caption" color="text.disabled">
                            En gracia — Gs. 0
                          </Typography>
                        ) : (
                          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                            <Typography
                              variant="body2"
                              fontWeight={700}
                              color={mora > 0 ? "warning.main" : "text.disabled"}
                            >
                              Gs. {(mora || 0).toLocaleString("es-PY")}
                            </Typography>
                            {Number(config.monto_minimo_mora) > 0 &&
                              mora === Number(config.monto_minimo_mora) && (
                                <Typography variant="caption" color="text.secondary">
                                  (mín)
                                </Typography>
                              )}
                            {config.monto_maximo_mora !== "" &&
                              mora === Number(config.monto_maximo_mora) && (
                                <Typography variant="caption" color="text.secondary">
                                  (tope)
                                </Typography>
                              )}
                          </Box>
                        )}
                      </Box>
                    );
                  })
                )}
              </Box>

              {/* Pie con aclaraciones */}
              {(Number(config.monto_minimo_mora) > 0 || config.monto_maximo_mora !== "" || Number(config.periodo_gracia) > 0) && (
                <Box
                  sx={{
                    px: 2,
                    py: 1,
                    bgcolor: "action.hover",
                    borderTop: "1px solid",
                    borderColor: "divider",
                  }}
                >
                  <Typography variant="caption" color="text.secondary">
                    {Number(config.periodo_gracia) > 0 && `Gracia: ${config.periodo_gracia} días · `}
                    {Number(config.monto_minimo_mora) > 0 && `Mín: Gs. ${Number(config.monto_minimo_mora).toLocaleString("es-PY")} · `}
                    {config.monto_maximo_mora !== "" && `Tope: Gs. ${Number(config.monto_maximo_mora).toLocaleString("es-PY")}`}
                  </Typography>
                </Box>
              )}
            </Box>
          )}

          <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
            <Button
              variant="contained"
              onClick={handleSave}
              disabled={saving || !canEditMora}
              startIcon={<Icon icon={saving ? "lucide:loader" : "lucide:save"} />}
              sx={{ bgcolor: "#f88533", "&:hover": { bgcolor: "#e07520" } }}
            >
              {saving ? "Guardando..." : "Guardar configuración"}
            </Button>
          </Box>
        </CardContent>
      </Card>
    </Box>
  );
}