"use client";

import { useState } from "react";
import {
  ESTADOS_PEDIDO,
  ESTADO_PEDIDO_ETIQUETA,
  type EstadoPedido,
} from "@/lib/crm/constantes";
import { accionCambiarEstadoPedido } from "@/lib/crm/acciones";
import { AvisoAccion, usarAccion } from "@/components/admin/usarAccion";

/**
 * Cambio de estado del pedido. Cancelar pide confirmación explícita: es el
 * único estado del que no se sale sin explicar por qué.
 */
export function CambiarEstadoPedido({
  id,
  estado,
}: {
  id: string;
  estado: EstadoPedido;
}) {
  const { enviando, aviso, ejecutar } = usarAccion();
  const [elegido, setElegido] = useState<EstadoPedido>(estado);

  const confirmandoCancelacion = elegido === "CANCELADO" && estado !== "CANCELADO";

  function alCambiar(v: string) {
    const siguiente = v as EstadoPedido;
    setElegido(siguiente);
    if (siguiente === "CANCELADO") return;
    if (siguiente === estado) return;
    void ejecutar(
      () => accionCambiarEstadoPedido(id, siguiente),
      `Pedido en ${ESTADO_PEDIDO_ETIQUETA[siguiente].toLowerCase()}.`,
    );
  }

  return (
    <div className="grid gap-2">
      <label htmlFor="pedido-estado" className="field-label">
        Estado del pedido
      </label>
      <select
        id="pedido-estado"
        value={elegido}
        disabled={enviando}
        onChange={(e) => alCambiar(e.target.value)}
        className="field w-full py-2 text-sm"
        style={{ appearance: "none", WebkitAppearance: "none" }}
      >
        {ESTADOS_PEDIDO.map((e) => (
          <option key={e} value={e}>
            {ESTADO_PEDIDO_ETIQUETA[e]}
          </option>
        ))}
      </select>

      {confirmandoCancelacion ? (
        <div className="grid gap-2 rounded-[3px] border border-signal-dim bg-ink px-3 py-3">
          <p className="text-xs leading-relaxed text-muted">
            Cancelar el pedido lo saca del flujo de surtido. Confírmalo si es lo que quieres.
          </p>
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              disabled={enviando}
              onClick={() =>
                void ejecutar(
                  () => accionCambiarEstadoPedido(id, "CANCELADO"),
                  "Pedido cancelado.",
                )
              }
              className="btn btn-signal btn-sm"
              style={{ appearance: "none" }}
            >
              {enviando ? "Cancelando…" : "Cancelar pedido"}
            </button>
            <button
              type="button"
              disabled={enviando}
              onClick={() => setElegido(estado)}
              className="btn btn-ghost btn-sm"
              style={{ appearance: "none" }}
            >
              No cancelar
            </button>
          </div>
        </div>
      ) : null}

      <AvisoAccion aviso={aviso} />
    </div>
  );
}