import { Add, Delete, Edit } from "@mui/icons-material";
import {
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputLabel,
  MenuItem,
  Select,
  Tooltip,
  Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  useTesReglasQuery,
  useUpsertTesReglaMutation,
  useDeleteTesReglaMutation,
  useTesCuentasQuery,
} from "../../../tanstack/TesoreriaStack";
import { getMediosPagoActivos } from "../../../api/pagos.service";
import { EmptyState, ScreenGuia } from "../../_standards";

const TableWrap = styled.div`
  background: ${({ theme }) => theme.bg2};
  border: 1px solid ${({ theme }) => theme.color2};
  border-radius: 10px;
  overflow: hidden;
  margin-top: 12px;
`;
const StyledTable = styled.table`width: 100%; border-collapse: collapse;`;
const Th = styled.th`
  background: ${({ theme }) => theme.bg3};
  color: ${({ theme }) => theme.text2};
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid ${({ theme }) => theme.color2};
`;
const Td = styled.td`
  padding: 10px 12px;
  border-bottom: 1px solid ${({ theme }) => theme.color2};
  font-size: 13px;
  color: ${({ theme }) => theme.text1};
`;
const Tr = styled.tr`
  &:last-child td { border-bottom: none; }
  &:hover { background: ${({ theme }) => theme.bg3}; }
`;
const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
`;

// Los únicos tipos que el sistema lee (ver tes-reglas.service del backend). La
// pantalla ofrecía otros cinco (cobro depositado, cheque debitado, cobro en
// efectivo, transferencias) que se guardaban sin hacer nada; también los campos
// "Modo" y "Tipo de tesorería", que ningún flujo usaba.
const TIPOS_OPERACION = [
  {
    value: "COBRO_CLIENTE",
    label: "Cobro de clientes",
    ayuda: "A qué cuenta entra lo cobrado en un recibo cuando no se elige una. Ej.: Efectivo → Caja, Transferencia → Banco.",
  },
  {
    value: "PAGO_PROVEEDOR",
    label: "Pago a proveedor",
    ayuda: "De qué cuenta sale una orden de pago cuando no se elige una. Ej.: Efectivo → Caja, Cheque → Banco.",
  },
  {
    value: "PAGO_GASTO",
    label: "Pago de gasto (contado)",
    ayuda: "De qué cuenta sale un gasto pagado en el momento. Ej.: Efectivo → Fondo fijo, el resto → Banco.",
  },
];
const tipoDe = (valor) => TIPOS_OPERACION.find((t) => t.value === valor);

export const TesReglasConfigSection = () => {
  const { data: reglas = [], isLoading } = useTesReglasQuery();
  const upsertRegla = useUpsertTesReglaMutation();
  const deleteRegla = useDeleteTesReglaMutation();
  const { data: cuentasData } = useTesCuentasQuery();

  const cuentas = Array.isArray(cuentasData) ? cuentasData : cuentasData?.data || [];

  const [medios, setMedios] = useState([]);
  useEffect(() => {
    getMediosPagoActivos()
      .then((data) => {
        const list = Array.isArray(data) ? data : data?.data || [];
        setMedios(list.map((m) => ({ id: m.medio_pago_id || m.id, descripcion: m.medio_pago?.descripcion || m.descripcion || "Medio" })));
      })
      .catch(() => setMedios([]));
  }, []);
  const medioLabel = (id) => medios.find((m) => m.id === id)?.descripcion || "";

  const [modal, setModal] = useState(null);
  const [form, setForm] = useState({ tipo_operacion: "", medio_pago_id: "", cuenta_id: "", activo: true });
  const [confirmDel, setConfirmDel] = useState(null);

  const handleOpen = (regla = null) => {
    if (regla) {
      setForm({
        tipo_operacion: regla.tipo_operacion,
        medio_pago_id: regla.medio_pago_id || "",
        cuenta_id: regla.cuenta_id || "",
        activo: regla.activo,
      });
      setModal({ mode: "edit", id: regla.id });
    } else {
      setForm({ tipo_operacion: "", medio_pago_id: "", cuenta_id: "", activo: true });
      setModal({ mode: "create" });
    }
  };

  const handleSave = async () => {
    if (!form.tipo_operacion) { toast.error("Seleccioná un tipo de operación"); return; }
    if (!form.cuenta_id) { toast.error("Elegí la cuenta de tesorería"); return; }
    const payload = {
      tipo_operacion: form.tipo_operacion,
      cuenta_id: form.cuenta_id,
      activo: form.activo,
      medio_pago_id: form.medio_pago_id || null,
      // Sin efecto en ningún flujo; se manda fijo para no dejar valores viejos.
      modo: "AUTOMATICO",
      tipo_tesoreria: null,
    };
    await upsertRegla.mutateAsync(payload);
    setModal(null);
  };

  const handleDelete = async () => {
    await deleteRegla.mutateAsync(confirmDel.id);
    setConfirmDel(null);
  };

  return (
    <div>
      <Header>
        <div>
          <Typography variant="h6" fontWeight={600}>Reglas automáticas</Typography>
          <Typography variant="body2" sx={{ opacity: 0.6, mt: 0.5 }}>
            Qué cuenta de tesorería se usa cuando un cobro o un pago no la tiene elegida.
          </Typography>
        </div>
        <Button variant="contained" size="small" startIcon={<Add />} onClick={() => handleOpen()}>
          Nueva regla
        </Button>
      </Header>

      <div style={{ margin: "12px 0" }}>
        <ScreenGuia
          titulo="¿Cómo funcionan las reglas?"
          moduloPadre="Tesorería"
          intro="Una regla dice a qué cuenta de tesorería (caja o banco) va un cobro o un pago cuando el usuario no eligió ninguna. Esa cuenta es también la que usa el asiento contable."
          pasos={[
            { icon: "mdi:bank-plus", color: "#60a5fa", titulo: "Primero las cuentas", desc: "Creá en Cuentas de tesorería una caja y cada banco, con su cuenta contable." },
            { icon: "mdi:cash-multiple", color: "#34d399", titulo: "Una regla por medio", desc: "Por ejemplo Efectivo → Caja y Transferencia → Banco. Una regla \"Todos los medios\" cubre el resto." },
            { icon: "mdi:check-decagram", color: "#f59e0b", titulo: "La elección manda", desc: "Si en el recibo, la orden de pago o el gasto se elige una cuenta, se usa esa y la regla no aplica." },
          ]}
          notas={[
            { icon: "mdi:information-outline", text: "Sin regla ni cuenta elegida, el cobro o pago no se registra en tesorería y el sistema avisa." },
          ]}
        />
      </div>

      <TableWrap>
        <StyledTable>
          <thead>
            <tr>
              <Th>Tipo de operación</Th>
              <Th>Medio de pago</Th>
              <Th>Cuenta de tesorería</Th>
              <Th>Estado</Th>
              <Th>Acciones</Th>
            </tr>
          </thead>
          <tbody>
            {isLoading ? (
              <tr><Td colSpan={5} style={{ textAlign: "center", padding: 24 }}><CircularProgress size={20} /></Td></tr>
            ) : reglas.length === 0 ? (
              <tr><Td colSpan={5}>
                <EmptyState
                  icon="mdi:swap-horizontal-bold"
                  title="Sin reglas configuradas"
                  description="Sin reglas, los cobros y pagos que no tienen cuenta elegida no se registran en tesorería."
                  ctaLabel="Nueva regla"
                  onCta={() => handleOpen()}
                  compact
                />
              </Td></tr>
            ) : reglas.map(r => {
              const tipo = tipoDe(r.tipo_operacion);
              return (
              <Tr key={r.id}>
                <Td>
                  {tipo ? tipo.label : (
                    <Tooltip title="Este tipo de regla no lo usa ningún proceso. Se puede eliminar.">
                      <Chip label={`${r.tipo_operacion} · sin efecto`} size="small" color="warning" variant="outlined" />
                    </Tooltip>
                  )}
                </Td>
                <Td style={{ opacity: 0.8 }}>
                  {r.medio_pago_id ? r.medio_pago?.descripcion || medioLabel(r.medio_pago_id) : "Todos los medios"}
                </Td>
                <Td style={{ opacity: 0.8 }}>{r.cuenta?.nombre || "—"}</Td>
                <Td>
                  <Chip label={r.activo ? "Activa" : "Inactiva"} size="small" color={r.activo ? "success" : "default"} variant="outlined" />
                </Td>
                <Td>
                  <div style={{ display: "flex", gap: 4 }}>
                    {tipo && (
                      <Tooltip title="Editar">
                        <IconButton size="small" onClick={() => handleOpen(r)}><Edit fontSize="small" /></IconButton>
                      </Tooltip>
                    )}
                    <Tooltip title="Eliminar">
                      <IconButton size="small" color="error" onClick={() => setConfirmDel(r)}><Delete fontSize="small" /></IconButton>
                    </Tooltip>
                  </div>
                </Td>
              </Tr>
              );
            })}
          </tbody>
        </StyledTable>
      </TableWrap>

      {/* Dialog crear/editar */}
      <Dialog open={!!modal} onClose={() => setModal(null)} maxWidth="sm" fullWidth>
        <DialogTitle>{modal?.mode === "create" ? "Nueva regla" : "Editar regla"}</DialogTitle>
        <DialogContent>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 8 }}>
            <FormControl fullWidth>
              <InputLabel>Tipo de operación</InputLabel>
              <Select value={form.tipo_operacion} label="Tipo de operación" onChange={e => setForm(f => ({ ...f, tipo_operacion: e.target.value }))}>
                {TIPOS_OPERACION.map(t => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
              </Select>
            </FormControl>
            {form.tipo_operacion && (
              <Typography variant="body2" sx={{ opacity: 0.7, mt: -0.5 }}>
                {tipoDe(form.tipo_operacion)?.ayuda}
              </Typography>
            )}
            <FormControl fullWidth>
              <InputLabel>Medio de pago</InputLabel>
              <Select value={form.medio_pago_id} label="Medio de pago" onChange={e => setForm(f => ({ ...f, medio_pago_id: e.target.value }))}>
                <MenuItem value="">Todos los medios sin regla propia</MenuItem>
                {medios.map(m => <MenuItem key={m.id} value={m.id}>{m.descripcion}</MenuItem>)}
              </Select>
            </FormControl>
            <FormControl fullWidth>
              <InputLabel>Cuenta de tesorería</InputLabel>
              <Select value={form.cuenta_id} label="Cuenta de tesorería" onChange={e => setForm(f => ({ ...f, cuenta_id: e.target.value }))}>
                {cuentas.map(c => <MenuItem key={c.id} value={c.id}>{c.nombre}{c.moneda && c.moneda !== "PYG" ? ` (${c.moneda})` : ""}</MenuItem>)}
              </Select>
            </FormControl>
            <FormControl fullWidth>
              <InputLabel>Estado</InputLabel>
              <Select value={form.activo ? "true" : "false"} label="Estado" onChange={e => setForm(f => ({ ...f, activo: e.target.value === "true" }))}>
                <MenuItem value="true">Activa</MenuItem>
                <MenuItem value="false">Inactiva</MenuItem>
              </Select>
            </FormControl>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setModal(null)}>Cancelar</Button>
          <Button variant="contained" onClick={handleSave} disabled={upsertRegla.isPending}>
            {upsertRegla.isPending ? <CircularProgress size={18} /> : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Dialog confirmar eliminación */}
      <Dialog open={!!confirmDel} onClose={() => setConfirmDel(null)} maxWidth="xs" fullWidth>
        <DialogTitle>Confirmar eliminación</DialogTitle>
        <DialogContent>
          <Typography>¿Eliminar la regla para <strong>{tipoDe(confirmDel?.tipo_operacion)?.label || confirmDel?.tipo_operacion}</strong>?</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDel(null)}>Cancelar</Button>
          <Button variant="contained" color="error" onClick={handleDelete} disabled={deleteRegla.isPending}>
            {deleteRegla.isPending ? <CircularProgress size={18} /> : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};