// react
import React, { useEffect, useState } from "react";
import { ISucursal } from "~/admin/interfaces/sucursal";
import { sucursalApi } from "~/admin/services/sucursalApi";
import { toast } from "react-toastify";

interface Props {
  /** Todas las sucursales (sin filtro), en el orden actual del API */
  sucursals: ISucursal[];
  onReordered: () => void;
}

export function SucursalFooterOrder({ sucursals, onReordered }: Props) {
  const [orderIds, setOrderIds] = useState<number[]>([]);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    setOrderIds(sucursals.map((s) => s.sucursalID));
  }, [sucursals]);

  const idToName = React.useMemo(() => {
    const m = new Map<number, string>();
    sucursals.forEach((s) => m.set(s.sucursalID, s.name));
    return m;
  }, [sucursals]);

  const move = (index: number, dir: -1 | 1) => {
    const j = index + dir;
    if (j < 0 || j >= orderIds.length) return;
    const next = [...orderIds];
    const t = next[index];
    next[index] = next[j];
    next[j] = t;
    setOrderIds(next);
  };

  const persist = async () => {
    try {
      setSaving(true);
      await sucursalApi.reorderFooter(orderIds);
      toast.success("Orden guardado");
      onReordered();
    } catch (e: any) {
      toast.error(e?.message || "Error al guardar el orden");
    } finally {
      setSaving(false);
    }
  };

  if (sucursals.length === 0) {
    return null;
  }

  return (
    <div className="card mb-4">
      <div className="card-header d-flex justify-content-between align-items-center">
        <span>
          <i className="fas fa-sort-amount-down mr-2 text-primary" />
          Orden en el footer (Sucursales)
        </span>
        <button type="button" className="btn btn-sm btn-primary" disabled={saving} onClick={persist}>
          {saving ? "Guardando…" : "Guardar orden"}
        </button>
      </div>
      <div className="card-body">
        <p className="text-muted small">
          Este es el orden en que aparecerán los enlaces bajo «Sucursales» en el pie de la página
          web. No modifica los datos de cada sucursal.
        </p>
        <ul className="list-group">
          {orderIds.map((id, index) => (
            <li
              key={id}
              className="list-group-item d-flex justify-content-between align-items-center"
            >
              <span>
                <span className="badge badge-secondary mr-2">{index + 1}</span>
                {idToName.get(id) || `ID ${id}`}
              </span>
              <div>
                <button
                  type="button"
                  className="btn btn-sm btn-outline-secondary mr-1"
                  disabled={index === 0 || saving}
                  onClick={() => move(index, -1)}
                  title="Subir"
                >
                  <i className="fas fa-arrow-up" />
                </button>
                <button
                  type="button"
                  className="btn btn-sm btn-outline-secondary"
                  disabled={index === orderIds.length - 1 || saving}
                  onClick={() => move(index, 1)}
                  title="Bajar"
                >
                  <i className="fas fa-arrow-down" />
                </button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}