"use client";

import { useStabilimento } from "@/src/contexts/StabilimentoContext";

export default function GlobalStabilimentoSelector() {
  const {
    stabilimenti,
    selectedStabilimento,
    selectedMagazzino,
    filteredMagazzini,
    loading,
    setSelectedStabilimento,
    setSelectedMagazzino,
    resetSelection,
  } = useStabilimento();

  if (loading) {
    return (
      <div className="flex items-center gap-2 text-zinc-500 text-sm">
        <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
        </svg>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-3">
      {/* Stabilimenti */}
      <div className="flex items-center gap-1.5">
        <button
          onClick={() => resetSelection()}
          className={`
            px-2.5 py-1 text-xs rounded-md font-medium transition-all
            ${!selectedStabilimento
              ? "bg-blue-600 text-white"
              : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
            }
          `}
        >
          Tutti
        </button>
        {stabilimenti.map((stab) => (
          <button
            key={stab.id}
            onClick={() => setSelectedStabilimento(
              selectedStabilimento?.id === stab.id ? null : stab
            )}
            className={`
              px-2.5 py-1 text-xs rounded-md font-medium transition-all
              ${selectedStabilimento?.id === stab.id
                ? "bg-blue-600 text-white"
                : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
              }
            `}
          >
            {stab.descrizione}
          </button>
        ))}
      </div>

      {/* Separatore */}
      {selectedStabilimento && filteredMagazzini.length > 0 && (
        <div className="w-px h-5 bg-zinc-700" />
      )}

      {/* Magazzini */}
      {selectedStabilimento && filteredMagazzini.length > 0 && (
        <div className="flex items-center gap-1.5">
          <span className="text-xs text-zinc-500 mr-1">Mag:</span>
          <button
            onClick={() => setSelectedMagazzino(null)}
            className={`
              px-2.5 py-1 text-xs rounded-md font-medium transition-all
              ${!selectedMagazzino
                ? "bg-green-600 text-white"
                : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
              }
            `}
          >
            Tutti
          </button>
          {filteredMagazzini.map((mag) => (
            <button
              key={mag.id}
              onClick={() => setSelectedMagazzino(
                selectedMagazzino?.id === mag.id ? null : mag
              )}
              className={`
                px-2.5 py-1 text-xs rounded-md font-medium transition-all
                ${selectedMagazzino?.id === mag.id
                  ? "bg-green-600 text-white"
                  : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-white"
                }
              `}
            >
              {mag.descrizione}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}