import { getTipoCategoriaChip } from "../_standards";
import { Add, Delete, Edit } from "@mui/icons-material";
import {
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputLabel,
  MenuItem,
  Select,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import styled from "styled-components";
import {
  useCreateTesCategoriaMutation,
  useDeleteTesCategoriaMutation,
  useTesBancosQuery,
  useTesCategoriaQuery,
  useTesCuentasConfigQuery,
  useUpdateTesCategoriaMutation,
  useUpdateTesConfigMutation,
  useTesReglasQuery,
  useUpsertTesReglaMutation,
  useDeleteTesReglaMutation,
  useTesCuentasQuery,
} from "../../tanstack/TesoreriaStack";

const Container = styled.div`
  padding: 16px;
  height: 100%;
  overflow-y: auto;
`;

const TabsNav = styled.div`
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid ${({ theme }) => theme.color2};
  padding-bottom: 8px;
`;

const TabBtn = styled.button`
  background: ${({ $active, theme }) => $active ? theme.primary || "#3b82f6" : "transparent"};
  color: ${({ $active, theme }) => $active ? "#fff" : theme.text2};
  border: 1px solid ${({ $active, theme }) => $active ? (theme.primary || "#3b82f6") : theme.color2};
  border-radius: 6px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: ${({ $active }) => $active ? 600 : 400};
  transition: all 0.15s;
  &:hover {
    background: ${({ $active, theme }) => $active ? (theme.primary || "#3b82f6") : theme.bg3};
  }
`;

const Section = styled.div`
  max-width: 640px;
`;

const FieldGroup = styled.div`
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
`;

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 TableHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
`;

const MONEDAS = ["PYG", "USD", "BRL", "EUR", "ARS"];

export const TesConfiguracionTab = ({ defaultSection = "parametros" }) => {
  const [activeTab, setActiveTab] = useState(defaultSection);

  const { data: config, isLoading: loadingConfig } = useTesCuentasConfigQuery();
  const { data: categorias = [], isLoading: loadingCats } = useTesCategoriaQuery();
  const { data: bancos = [], isLoading: loadingBancos } = useTesBancosQuery();

  const updateConfig = useUpdateTesConfigMutation();
  const createCat = useCreateTesCategoriaMutation();
  const updateCat = useUpdateTesCategoriaMutation();
  const deleteCat = useDeleteTesCategoriaMutation();

  const [formConfig, setFormConfig] = useState({
    monto_umbral_aprobacion: "",
    dias_alerta_cheques: "",
    moneda_base_reportes: "PYG",
  });

  const [modalCat, setModalCat] = useState(null);
  const [formCat, setFormCat] = useState({ nombre: "", tipo: "INGRESO", descripcion: "" });

  const [confirmDelete, setConfirmDelete] = useState(null);

  // Reglas
  const { data: reglas = [], isLoading: loadingReglas } = useTesReglasQuery();
  const upsertRegla = useUpsertTesReglaMutation();
  const deleteRegla = useDeleteTesReglaMutation();
  const [modalRegla, setModalRegla] = useState(null);
  const [formRegla, setFormRegla] = useState({ tipo_operacion: "", cuenta_id: "", modo: "AUTOMATICO", activo: true });
  const [confirmDeleteRegla, setConfirmDeleteRegla] = useState(null);

  const TIPOS_OPERACION = [
    { value: "COBRO_DEPOSITADO", label: "Cobro depositado en cuenta" },
    { value: "CHEQUE_DEBITADO", label: "Cheque debitado de cuenta" },
    { value: "PAGO_PROVEEDOR", label: "Pago a proveedor" },
    { value: "COBRO_EFECTIVO", label: "Cobro en efectivo" },
    { value: "TRANSFERENCIA_ENTRADA", label: "Transferencia entrada" },
    { value: "TRANSFERENCIA_SALIDA", label: "Transferencia salida" },
  ];

  // Sólo activas: una regla apunta a la cuenta que se va a usar de acá en más,
  // no tiene sentido predeterminar una cuenta cerrada.
  const { data: cuentasData } = useTesCuentasQuery({ soloActivas: true });

  const handleOpenRegla = (regla = null) => {
    if (regla) {
      setFormRegla({ tipo_operacion: regla.tipo_operacion, cuenta_id: regla.cuenta_id || "", modo: regla.modo, activo: regla.activo });
      setModalRegla({ mode: "edit", id: regla.id });
    } else {
      setFormRegla({ tipo_operacion: "", cuenta_id: "", modo: "AUTOMATICO", activo: true });
      setModalRegla({ mode: "create" });
    }
  };

  const handleSaveRegla = async () => {
    if (!formRegla.tipo_operacion) { toast.error("Seleccioná un tipo de operación"); return; }
    await upsertRegla.mutateAsync(formRegla);
    setModalRegla(null);
  };

  const handleDeleteRegla = async () => {
    await deleteRegla.mutateAsync(confirmDeleteRegla.id);
    setConfirmDeleteRegla(null);
  };

  useEffect(() => {
    if (config) {
      setFormConfig({
        monto_umbral_aprobacion: config.monto_umbral_aprobacion ?? "",
        dias_alerta_cheques: config.dias_alerta_cheques ?? "",
        moneda_base_reportes: config.moneda_base_reportes ?? "PYG",
      });
    }
  }, [config]);

  const handleSaveConfig = async () => {
    const payload = {
      monto_umbral_aprobacion: formConfig.monto_umbral_aprobacion !== "" ? Number(formConfig.monto_umbral_aprobacion) : undefined,
      dias_alerta_cheques: formConfig.dias_alerta_cheques !== "" ? Number(formConfig.dias_alerta_cheques) : undefined,
      moneda_base_reportes: formConfig.moneda_base_reportes || undefined,
    };
    await updateConfig.mutateAsync(payload);
  };

  const handleOpenCat = (cat = null) => {
    if (cat) {
      setFormCat({ nombre: cat.nombre, tipo: cat.tipo || "INGRESO", descripcion: cat.descripcion || "" });
      setModalCat({ mode: "edit", id: cat.id });
    } else {
      setFormCat({ nombre: "", tipo: "INGRESO", descripcion: "" });
      setModalCat({ mode: "create" });
    }
  };

  const handleSaveCat = async () => {
    if (!formCat.nombre.trim()) {
      toast.error("El nombre es obligatorio");
      return;
    }
    if (modalCat.mode === "create") {
      await createCat.mutateAsync(formCat);
    } else {
      await updateCat.mutateAsync({ id: modalCat.id, data: formCat });
    }
    setModalCat(null);
  };

  const handleDeleteCat = async () => {
    await deleteCat.mutateAsync(confirmDelete.id);
    setConfirmDelete(null);
  };

  return (
    <Container>
      <TabsNav>
        <TabBtn $active={activeTab === "cuentas"} onClick={() => setActiveTab("cuentas")}>Cuentas</TabBtn>
        <TabBtn $active={activeTab === "categorias"} onClick={() => setActiveTab("categorias")}>Categorías</TabBtn>
        <TabBtn $active={activeTab === "bancos"} onClick={() => setActiveTab("bancos")}>Bancos</TabBtn>
        <TabBtn $active={activeTab === "parametros"} onClick={() => setActiveTab("parametros")}>Parámetros</TabBtn>
        <TabBtn $active={activeTab === "reglas"} onClick={() => setActiveTab("reglas")}>Reglas automáticas</TabBtn>
      </TabsNav>

      {activeTab === "cuentas" && (
        <Section>
          <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>Cuentas de Tesorería</Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
            Administrá las cuentas bancarias, cajas y billeteras de la empresa desde el módulo Tesorería → Cuentas y Saldos.
          </Typography>
        </Section>
      )}

      {activeTab === "parametros" && (
        <Section>
          <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>Parámetros de Tesorería</Typography>
          {loadingConfig ? <CircularProgress size={24} /> : (
            <>
              <FieldGroup>
                <TextField
                  label="Monto umbral de aprobación"
                  type="number"
                  value={formConfig.monto_umbral_aprobacion}
                  onChange={e => setFormConfig(f => ({ ...f, monto_umbral_aprobacion: e.target.value }))}
                  helperText="Movimientos por encima de este monto requieren aprobación"
                  fullWidth
                />
                <TextField
                  label="Días de alerta para cheques"
                  type="number"
                  value={formConfig.dias_alerta_cheques}
                  onChange={e => setFormConfig(f => ({ ...f, dias_alerta_cheques: e.target.value }))}
                  helperText="Días previos al vencimiento para alertar sobre cheques"
                  fullWidth
                />
                <FormControl fullWidth>
                  <InputLabel>Moneda base de reportes</InputLabel>
                  <Select
                    value={formConfig.moneda_base_reportes}
                    label="Moneda base de reportes"
                    onChange={e => setFormConfig(f => ({ ...f, moneda_base_reportes: e.target.value }))}
                  >
                    {MONEDAS.map(m => <MenuItem key={m} value={m}>{m}</MenuItem>)}
                  </Select>
                </FormControl>
              </FieldGroup>
              <Button variant="contained" onClick={handleSaveConfig} disabled={updateConfig.isPending}>
                {updateConfig.isPending ? <CircularProgress size={18} /> : "Guardar cambios"}
              </Button>
            </>
          )}
        </Section>
      )}

      {activeTab === "categorias" && (
        <div>
          <TableHeader>
            <Typography variant="h6" fontWeight={600}>Categorías de movimientos</Typography>
            <Button variant="contained" size="small" startIcon={<Add />} onClick={() => handleOpenCat()}>
              Nueva categoría
            </Button>
          </TableHeader>
          <TableWrap>
            <StyledTable>
              <thead>
                <tr>
                  <Th>Nombre</Th>
                  <Th>Tipo</Th>
                  <Th>Descripción</Th>
                  <Th>Sistema</Th>
                  <Th>Acciones</Th>
                </tr>
              </thead>
              <tbody>
                {loadingCats ? (
                  <tr><Td colSpan={5} style={{ textAlign: "center", padding: 24 }}><CircularProgress size={20} /></Td></tr>
                ) : categorias.length === 0 ? (
                  <tr><Td colSpan={5} style={{ textAlign: "center", opacity: 0.5 }}>Sin categorías</Td></tr>
                ) : categorias.map(cat => (
                  <Tr key={cat.id}>
                    <Td>{cat.nombre}</Td>
                    <Td>
                      <Chip
                        label={getTipoCategoriaChip(cat.tipo).label}
                        size="small"
                        color={getTipoCategoriaChip(cat.tipo).color}
                      />
                    </Td>
                    <Td style={{ opacity: 0.7 }}>{cat.descripcion || "—"}</Td>
                    <Td>
                      {cat.is_sistema && <Chip label="Sistema" size="small" variant="outlined" />}
                    </Td>
                    <Td>
                      {!cat.is_sistema ? (
                        <div style={{ display: "flex", gap: 4 }}>
                          <Tooltip title="Editar">
                            <IconButton size="small" onClick={() => handleOpenCat(cat)}>
                              <Edit fontSize="small" />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Eliminar">
                            <IconButton size="small" color="error" onClick={() => setConfirmDelete(cat)}>
                              <Delete fontSize="small" />
                            </IconButton>
                          </Tooltip>
                        </div>
                      ) : (
                        <Typography variant="caption" sx={{ opacity: 0.4 }}>Solo lectura</Typography>
                      )}
                    </Td>
                  </Tr>
                ))}
              </tbody>
            </StyledTable>
          </TableWrap>
        </div>
      )}

      {activeTab === "bancos" && (
        <div>
          <Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Bancos del sistema</Typography>
          <Typography variant="body2" sx={{ opacity: 0.6, mb: 2 }}>
            Lista de bancos disponibles para asociar a cuentas bancarias.
          </Typography>
          <TableWrap>
            <StyledTable>
              <thead>
                <tr>
                  <Th>Nombre</Th>
                  <Th>Código</Th>
                  <Th>País</Th>
                </tr>
              </thead>
              <tbody>
                {loadingBancos ? (
                  <tr><Td colSpan={3} style={{ textAlign: "center", padding: 24 }}><CircularProgress size={20} /></Td></tr>
                ) : bancos.length === 0 ? (
                  <tr><Td colSpan={3} style={{ textAlign: "center", opacity: 0.5 }}>Sin bancos registrados</Td></tr>
                ) : bancos.map(banco => (
                  <Tr key={banco.id}>
                    <Td>{banco.nombre}</Td>
                    <Td>{banco.codigo || "—"}</Td>
                    <Td>{banco.pais || "—"}</Td>
                  </Tr>
                ))}
              </tbody>
            </StyledTable>
          </TableWrap>
        </div>
      )}

      {activeTab === "reglas" && (
        <div>
          <TableHeader>
            <div>
              <Typography variant="h6" fontWeight={600}>Reglas automáticas</Typography>
              <Typography variant="body2" sx={{ opacity: 0.6 }}>
                Define qué cuenta se usa automáticamente según el tipo de operación.
              </Typography>
            </div>
            <Button variant="contained" size="small" startIcon={<Add />} onClick={() => handleOpenRegla()}>
              Nueva regla
            </Button>
          </TableHeader>
          <TableWrap>
            <StyledTable>
              <thead>
                <tr>
                  <Th>Tipo de operación</Th>
                  <Th>Cuenta</Th>
                  <Th>Modo</Th>
                  <Th>Estado</Th>
                  <Th>Acciones</Th>
                </tr>
              </thead>
              <tbody>
                {loadingReglas ? (
                  <tr><Td colSpan={5} style={{ textAlign: "center", padding: 24 }}><CircularProgress size={20} /></Td></tr>
                ) : reglas.length === 0 ? (
                  <tr><Td colSpan={5} style={{ textAlign: "center", opacity: 0.5 }}>Sin reglas configuradas</Td></tr>
                ) : reglas.map(r => (
                  <Tr key={r.id}>
                    <Td>{TIPOS_OPERACION.find(t => t.value === r.tipo_operacion)?.label || r.tipo_operacion}</Td>
                    <Td style={{ opacity: 0.8 }}>{r.cuenta?.nombre || "—"}</Td>
                    <Td>
                      <Chip
                        label={r.modo}
                        size="small"
                        color={r.modo === "AUTOMATICO" ? "primary" : r.modo === "CONFIRMACION" ? "warning" : "default"}
                      />
                    </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 }}>
                        <Tooltip title="Editar">
                          <IconButton size="small" onClick={() => handleOpenRegla(r)}><Edit fontSize="small" /></IconButton>
                        </Tooltip>
                        <Tooltip title="Eliminar">
                          <IconButton size="small" color="error" onClick={() => setConfirmDeleteRegla(r)}><Delete fontSize="small" /></IconButton>
                        </Tooltip>
                      </div>
                    </Td>
                  </Tr>
                ))}
              </tbody>
            </StyledTable>
          </TableWrap>
        </div>
      )}

      <Dialog open={!!modalCat} onClose={() => setModalCat(null)} maxWidth="sm" fullWidth>
        <DialogTitle>{modalCat?.mode === "create" ? "Nueva categoría" : "Editar categoría"}</DialogTitle>
        <DialogContent>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 8 }}>
            <TextField
              label="Nombre"
              required
              fullWidth
              value={formCat.nombre}
              onChange={e => setFormCat(f => ({ ...f, nombre: e.target.value }))}
            />
            <FormControl fullWidth>
              <InputLabel>Tipo</InputLabel>
              <Select value={formCat.tipo} label="Tipo" onChange={e => setFormCat(f => ({ ...f, tipo: e.target.value }))}>
                <MenuItem value="INGRESO">Ingreso</MenuItem>
                <MenuItem value="EGRESO">Egreso</MenuItem>
                <MenuItem value="AMBOS">Ambos</MenuItem>
              </Select>
            </FormControl>
            <TextField
              label="Descripción"
              fullWidth
              multiline
              rows={2}
              value={formCat.descripcion}
              onChange={e => setFormCat(f => ({ ...f, descripcion: e.target.value }))}
            />
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setModalCat(null)}>Cancelar</Button>
          <Button variant="contained" onClick={handleSaveCat} disabled={createCat.isPending || updateCat.isPending}>
            {(createCat.isPending || updateCat.isPending) ? <CircularProgress size={18} /> : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={!!confirmDelete} onClose={() => setConfirmDelete(null)} maxWidth="xs" fullWidth>
        <DialogTitle>Confirmar eliminación</DialogTitle>
        <DialogContent>
          <Typography>¿Eliminar la categoría <strong>{confirmDelete?.nombre}</strong>? Esta acción no se puede deshacer.</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDelete(null)}>Cancelar</Button>
          <Button variant="contained" color="error" onClick={handleDeleteCat} disabled={deleteCat.isPending}>
            {deleteCat.isPending ? <CircularProgress size={18} /> : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>
      <Dialog open={!!modalRegla} onClose={() => setModalRegla(null)} maxWidth="sm" fullWidth>
        <DialogTitle>{modalRegla?.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={formRegla.tipo_operacion}
                label="Tipo de operación"
                onChange={e => setFormRegla(f => ({ ...f, tipo_operacion: e.target.value }))}
              >
                {TIPOS_OPERACION.map(t => <MenuItem key={t.value} value={t.value}>{t.label}</MenuItem>)}
              </Select>
            </FormControl>
            <FormControl fullWidth>
              <InputLabel>Cuenta sugerida</InputLabel>
              <Select
                value={formRegla.cuenta_id}
                label="Cuenta sugerida"
                onChange={e => setFormRegla(f => ({ ...f, cuenta_id: e.target.value }))}
              >
                <MenuItem value="">Sin cuenta predeterminada</MenuItem>
                {(Array.isArray(cuentasData) ? cuentasData : cuentasData?.data || []).map(c => (
                  <MenuItem key={c.id} value={c.id}>{c.nombre}</MenuItem>
                ))}
              </Select>
            </FormControl>
            <FormControl fullWidth>
              <InputLabel>Modo</InputLabel>
              <Select value={formRegla.modo} label="Modo" onChange={e => setFormRegla(f => ({ ...f, modo: e.target.value }))}>
                <MenuItem value="AUTOMATICO">Automático — aplica sin preguntar</MenuItem>
                <MenuItem value="CONFIRMACION">Confirmación — sugiere y espera OK</MenuItem>
                <MenuItem value="MANUAL">Manual — solo como sugerencia</MenuItem>
              </Select>
            </FormControl>
            <FormControl fullWidth>
              <InputLabel>Estado</InputLabel>
              <Select value={formRegla.activo ? "true" : "false"} label="Estado" onChange={e => setFormRegla(f => ({ ...f, activo: e.target.value === "true" }))}>
                <MenuItem value="true">Activa</MenuItem>
                <MenuItem value="false">Inactiva</MenuItem>
              </Select>
            </FormControl>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setModalRegla(null)}>Cancelar</Button>
          <Button variant="contained" onClick={handleSaveRegla} disabled={upsertRegla.isPending}>
            {upsertRegla.isPending ? <CircularProgress size={18} /> : "Guardar"}
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog open={!!confirmDeleteRegla} onClose={() => setConfirmDeleteRegla(null)} maxWidth="xs" fullWidth>
        <DialogTitle>Confirmar eliminación</DialogTitle>
        <DialogContent>
          <Typography>¿Eliminar la regla para <strong>{TIPOS_OPERACION.find(t => t.value === confirmDeleteRegla?.tipo_operacion)?.label || confirmDeleteRegla?.tipo_operacion}</strong>?</Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDeleteRegla(null)}>Cancelar</Button>
          <Button variant="contained" color="error" onClick={handleDeleteRegla} disabled={deleteRegla.isPending}>
            {deleteRegla.isPending ? <CircularProgress size={18} /> : "Eliminar"}
          </Button>
        </DialogActions>
      </Dialog>
    </Container>
  );
};