import type { Role } from "@/types/dungeon";

const ALL_ROLES: Role[] = ["tank", "healer", "dps", "everyone"];

const roleConfig: Record<Role, { label: string; color: string; activeBg: string; activeBorder: string; hoverText: string }> = {
  tank: {
    label: "Tank",
    color: "text-tank",
    activeBg: "bg-tank/20",
    activeBorder: "border-tank/60",
    hoverText: "hover:text-tank/60",
  },
  healer: {
    label: "Healer",
    color: "text-healer",
    activeBg: "bg-healer/20",
    activeBorder: "border-healer/60",
    hoverText: "hover:text-healer/60",
  },
  dps: {
    label: "DPS",
    color: "text-dps",
    activeBg: "bg-dps/20",
    activeBorder: "border-dps/60",
    hoverText: "hover:text-dps/60",
  },
  everyone: {
    label: "Everyone",
    color: "text-everyone",
    activeBg: "bg-everyone/20",
    activeBorder: "border-everyone/60",
    hoverText: "hover:text-everyone/60",
  },
};

const dotColors: Record<Role, string> = {
  tank: "bg-tank",
  healer: "bg-healer",
  dps: "bg-dps",
  everyone: "bg-everyone",
};

interface RoleFilterBarProps {
  activeRoles: Set<Role>;
  onToggleRole: (role: Role) => void;
}

export function RoleFilterBar({ activeRoles, onToggleRole }: RoleFilterBarProps) {
  return (
    <div className="mb-8 flex flex-col items-center gap-2">
      <span className="text-xs font-medium uppercase tracking-widest text-text-muted">
        Filter by role
      </span>
      <div className="flex gap-2">
        {ALL_ROLES.map((role) => {
          const isActive = activeRoles.has(role);
          const cfg = roleConfig[role];
          return (
            <button
              key={role}
              onClick={() => onToggleRole(role)}
              className={`flex items-center gap-2 border px-4 py-1.5 text-sm font-bold uppercase tracking-wide transition-all hover:scale-[1.03] ${
                isActive
                  ? `${cfg.activeBg} ${cfg.color} ${cfg.activeBorder}`
                  : `bg-transparent text-text-dim border-border-default ${cfg.hoverText} opacity-50`
              }`}
            >
              <span
                className={`inline-block size-2.5 border transition-all ${
                  isActive
                    ? `${dotColors[role]} border-transparent`
                    : "border-text-dim bg-transparent"
                }`}
              />
              {cfg.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}
