import { Icon } from "@iconify/react";
import {
  Alert,
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
  MenuItem,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
import {
  createImportacionConcepto,
  deleteImportacionConcepto,
  getImportacionConceptos,
  updateImportacionConcepto,
} from "../../api/importaciones.service";
import { usePermission } from "../../hooks/usePermission";
import { ScreenGuia } from "../_standards";
import { AccesoRestringido } from "../common/AccesoRestringido";
import { ConfirmDialog } from "../ui/ConfirmDialog";

const GRUPOS = ["ORIGEN", "TRANSITO", "ADUANA", "LOGISTICA", "FINANCIERO"];
const IMPUTACIONES = ["DIRECTO", "COMPARTIDO"];
const CRITERIOS_PRORRATEO = ["FOB", "PESO", "CBM", "CANTIDAD", "IGUAL"];

const emptyForm = {
  codigo: "",
  nombre: "",
  grupo: "",
  imputacion_default: "COMPARTIDO",
  criterio_prorrateo_default: "FOB",
  moneda_default: "USD",
};

const normalizeError = (error) => {
  const msg = error?.response?.data?.message || error?.message || "Error inesperado";
  return Array.isArray(msg) ? msg.join(", ") : msg;
};

export function ConceptosCostoTab() {
  const { hasAccess, can } = usePermission("IMPORTACIONES");
  const canConfig = can("IMP_CFG_CONFIG_EDITAR");
  const queryClient = useQueryClient();

  const [dialog, setDialog] = useState({ open: false, data: null });
  const [form, setForm] = useState(emptyForm);
  const [deleteTarget, setDeleteTarget] = useState(null);

  const { data, isLoading } = useQuery({
    queryKey: ["importaciones-conceptos-admin"],
    queryFn: () => getImportacionConceptos(),
    enabled: hasAccess,
  });

  const items = Array.isArray(data) ? data : [];

  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: ["importaciones-conceptos-admin"] });
    queryClient.invalidateQueries({ queryKey: ["importaciones-conceptos"] });
  };

  const createMutation = useMutation({
    mutationFn: (payload) => createImportacionConcepto(payload),
    onSuccess: () => {
      toast.success("Concepto de costo creado");
      invalidate();
      setDialog({ open: false, data: null });
    },
    onError: (e) => toast.error(normalizeError(e)),
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, payload }) => updateImportacionConcepto(id, payload),
    onSuccess: () => {
      toast.success("Concepto de costo actualizado");
      invalidate();
      setDialog({ open: false, data: null });
    },
    onError: (e) => toast.error(normalizeError(e)),
  });

  const deleteMutation = useMutation({
    mutationFn: (id) => deleteImportacionConcepto(id),
    onSuccess: () => {
      toast.success("Concepto de costo desactivado");
      invalidate();
      setDeleteTarget(null);
    },
    onError: (e) => toast.error(normalizeError(e)),
  });

  const handleOpen = (row) => {
    if (row) {
      setForm({
        codigo: row.codigo ?? "",
        nombre: row.nombre ?? "",
        grupo: row.grupo ?? "",
        imputacion_default: row.imputacion_default ?? "COMPARTIDO",
        criterio_prorrateo_default: row.criterio_prorrateo_default ?? "",
        moneda_default: row.moneda_default ?? "USD",
      });
    } else {
      setForm(emptyForm);
    }
    setDialog({ open: true, data: row });
  };

  const handleClose = () => setDialog({ open: false, data: null });

  const handleSubmit = () => {
    const codigo = form.codigo.trim().toUpperCase();
    const nombre = form.nombre.trim();

    if (!codigo || !/^[A-Z0-9_]+$/.test(codigo)) {
      toast.error("El código es obligatorio y solo puede tener mayúsculas, números y guion bajo");
      return;
    }
    if (!nombre) {
      toast.error("El nombre es obligatorio");
      return;
    }

    const payload = {
      codigo,
      nombre,
      grupo: form.grupo || undefined,
      imputacion_default: form.imputacion_default,
      criterio_prorrateo_default:
        form.imputacion_default === "COMPARTIDO" ? form.criterio_prorrateo_default || undefined : undefined,
      moneda_default: form.moneda_default,
    };

    if (dialog.data?.id) {
      updateMutation.mutate({ id: dialog.data.id, payload });
    } else {
      createMutation.mutate(payload);
    }
  };

  const handleDelete = (row) => {
    if (row.es_sistema) {
      toast.error("No se puede desactivar un concepto del sistema");
      return;
    }
    setDeleteTarget(row);
  };

  const confirmarEliminar = () => {
    if (!deleteTarget?.id) return;
    deleteMutation.mutate(deleteTarget.id);
  };

  if (!hasAccess) {
    return <AccesoRestringido modulo="IMPORTACIONES" mensaje="No tenés acceso al módulo Importaciones." />;
  }
  if (!canConfig) {
    return (
      <AccesoRestringido modulo="IMPORTACIONES" mensaje="Necesitás el privilegio IMP_CFG_CONFIG_EDITAR." />
    );
  }

  return (
    <>
      <ScreenGuia
        titulo="¿Para qué sirve este catálogo?"
        intro="Define qué tipos de gasto pueden aparecer al cargar un componente de costo en un embarque (FOB, fletes, seguros, aduana, etc.)."
        pasos={[
          {
            icon: "mdi:shape-outline",
            color: "#60a5fa",
            titulo: "Conceptos de sistema",
            desc: "Vienen precargados y son de solo lectura (chip \"Sistema\") — no se pueden editar ni desactivar.",
          },
          {
            icon: "mdi:office-building-outline",
            color: "#f59e0b",
            titulo: "Conceptos propios",
            desc: "Los que creás para tu empresa (chip \"Empresa\") — editables y desactivables.",
          },
          {
            icon: "mdi:call-split",
            color: "#22c55e",
            titulo: "Imputación",
            desc: "Directo: se carga contra un ítem específico. Compartido: se prorratea entre todos los ítems.",
          },
          {
            icon: "mdi:percent-outline",
            color: "#8b5cf6",
            titulo: "Criterio de prorrateo",
            desc: "FOB, Peso, CBM, Cantidad o Partes iguales — solo aplica si la imputación es Compartido.",
          },
        ]}
        notas={[
          {
            icon: "mdi:content-save-check-outline",
            text: "Desactivar un concepto no borra el histórico — solo lo saca de la lista para nuevos costos.",
          },
          {
            icon: "mdi:key-outline",
            text: "El código debe ser único por empresa: mayúsculas, números y guion bajo (ej: FLETE_AEREO).",
          },
        ]}
      />

      <Paper sx={{ p: 3, borderRadius: 2, mt: 2 }}>
      <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 2 }}>
        <Box>
          <Typography variant="h6" fontWeight={800}>
            Conceptos de costo
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 600 }}>
            Catálogo de qué tipos de gastos pueden aparecer en un embarque (FOB, fletes, seguros, gastos de
            aduana, etc.). Aparecen como opción al cargar un componente de costo dentro de un embarque.
          </Typography>
        </Box>
        <Button
          variant="contained"
          startIcon={<Icon icon="lucide:plus" />}
          onClick={() => handleOpen(null)}
          sx={{ flexShrink: 0, ml: 2 }}
        >
          Nuevo concepto
        </Button>
      </Stack>

      {isLoading ? (
        <Box sx={{ py: 2, display: "flex", alignItems: "center", gap: 1 }}>
          <CircularProgress size={18} />
          <Typography variant="body2" color="text.secondary">
            Cargando…
          </Typography>
        </Box>
      ) : !items.length ? (
        <Alert severity="info">
          No hay conceptos configurados. Agregá el primero con el botón <strong>Nuevo concepto</strong>.
        </Alert>
      ) : (
        <TableContainer>
          <Table size="small">
            <TableHead>
              <TableRow>
                <TableCell>Origen</TableCell>
                <TableCell>Código</TableCell>
                <TableCell>Nombre</TableCell>
                <TableCell>Grupo</TableCell>
                <TableCell>Imputación</TableCell>
                <TableCell>Criterio prorrateo</TableCell>
                <TableCell>Moneda</TableCell>
                <TableCell>Perfil</TableCell>
                <TableCell align="right">Acciones</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map((row) => (
                <TableRow key={row.id} hover>
                  <TableCell>
                    <Chip
                      size="small"
                      label={row.es_sistema ? "Sistema" : "Empresa"}
                      color={row.es_sistema ? "default" : "primary"}
                    />
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2" fontFamily="monospace">
                      {row.codigo}
                    </Typography>
                  </TableCell>
                  <TableCell>{row.nombre}</TableCell>
                  <TableCell>{row.grupo || "—"}</TableCell>
                  <TableCell>{row.imputacion_default === "DIRECTO" ? "Directo" : "Compartido"}</TableCell>
                  <TableCell>{row.criterio_prorrateo_default || "—"}</TableCell>
                  <TableCell>{row.moneda_default}</TableCell>
                  <TableCell>
                    {row.aplica_perfil
                      ? row.aplica_perfil === "AUTOS"
                        ? "Autos"
                        : "Consumo masivo"
                      : "Ambos"}
                  </TableCell>
                  <TableCell align="right">
                    {!row.es_sistema && (
                      <>
                        <Tooltip title="Editar">
                          <IconButton size="small" onClick={() => handleOpen(row)}>
                            <Icon icon="lucide:pencil" />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title="Desactivar">
                          <IconButton size="small" color="error" onClick={() => handleDelete(row)}>
                            <Icon icon="lucide:ban" />
                          </IconButton>
                        </Tooltip>
                      </>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}

      <Dialog open={dialog.open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>{dialog.data?.id ? "Editar concepto de costo" : "Nuevo concepto de costo"}</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} sx={{ pt: 1 }}>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                fullWidth
                size="small"
                label="Código *"
                placeholder="ej: FLETE_AEREO"
                helperText="Mayúsculas, números y guion bajo. Único por empresa."
                value={form.codigo}
                onChange={(e) => setForm((p) => ({ ...p, codigo: e.target.value.toUpperCase() }))}
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                fullWidth
                size="small"
                label="Nombre *"
                placeholder="ej: Flete aéreo"
                value={form.nombre}
                onChange={(e) => setForm((p) => ({ ...p, nombre: e.target.value }))}
              />
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                select
                fullWidth
                size="small"
                label="Grupo"
                value={form.grupo}
                onChange={(e) => setForm((p) => ({ ...p, grupo: e.target.value }))}
              >
                <MenuItem value="">Sin grupo</MenuItem>
                {GRUPOS.map((g) => (
                  <MenuItem key={g} value={g}>
                    {g}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                select
                fullWidth
                size="small"
                label="Moneda default"
                value={form.moneda_default}
                onChange={(e) => setForm((p) => ({ ...p, moneda_default: e.target.value }))}
              >
                <MenuItem value="USD">USD</MenuItem>
                <MenuItem value="GS">GS</MenuItem>
              </TextField>
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                select
                fullWidth
                size="small"
                label="Imputación"
                value={form.imputacion_default}
                onChange={(e) => setForm((p) => ({ ...p, imputacion_default: e.target.value }))}
              >
                {IMPUTACIONES.map((i) => (
                  <MenuItem key={i} value={i}>
                    {i === "DIRECTO" ? "Directo" : "Compartido"}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
            <Grid size={{ xs: 12, sm: 6 }}>
              <TextField
                select
                fullWidth
                size="small"
                label="Criterio de prorrateo"
                disabled={form.imputacion_default !== "COMPARTIDO"}
                value={form.criterio_prorrateo_default}
                onChange={(e) => setForm((p) => ({ ...p, criterio_prorrateo_default: e.target.value }))}
                helperText={form.imputacion_default !== "COMPARTIDO" ? "Solo aplica si es Compartido" : " "}
              >
                {CRITERIOS_PRORRATEO.map((c) => (
                  <MenuItem key={c} value={c}>
                    {c}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancelar</Button>
          <Button
            variant="contained"
            onClick={handleSubmit}
            disabled={createMutation.isPending || updateMutation.isPending}
          >
            Guardar
          </Button>
        </DialogActions>
      </Dialog>
      </Paper>

      <ConfirmDialog
        open={Boolean(deleteTarget)}
        onClose={() => (deleteMutation.isPending ? undefined : setDeleteTarget(null))}
        onConfirm={confirmarEliminar}
        loading={deleteMutation.isPending}
        title="Desactivar concepto de costo"
        message={(
          <>
            <Typography variant="body2">
              Vas a desactivar el concepto <strong>{deleteTarget?.nombre || "-"}</strong>.
            </Typography>
            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
              Dejará de estar disponible para nuevos costos, pero no borra el histórico.
            </Typography>
          </>
        )}
        confirmText="Sí, desactivar"
        cancelText="Volver"
        confirmColor="error"
      />
    </>
  );
}

export default ConceptosCostoTab;